Четыре варианта:
Вот вам три варианта:
Использовать фоновое изображение
Справочный ответ Кангкана охватывает это.
Если это не сработает для вас, я предполагаю, что вам нужна только помощь с материалами с поддержкой JavaScript, поскольку вы сказали, что пользователи, не использующие JavaScript, будут видеть другую страницу.
Используйте плагин
Пейджинг выполнен. В комментарии вы сказали, что используете jQuery. Для разбиения по страницам существует множество подключаемых модулей jQuery. Найдите тот, который вам нравится, и используйте его. Они будут разного качества, поэтому вы захотите протестировать их и просмотреть их код, но я уверен, что есть и более качественные.
Пейджинг на стороне сервера
Здесь главная страница загружается либо без продуктов, либо с первой страницей продуктов. Обычно вы кладете все продукты в контейнер, например:
<ul id='productList'>
</ul>
Тогда у вас будут обычные элементы управления пользовательского интерфейса для перемещения между страницами результатов. У вас будет серверный ресурс, который возвращает фрагменты HTML или данные в формате JSON, которые вы можете использовать для заполнения этого списка. Я буду использовать HTML для простоты (хотя, вероятно, я бы использовал JSON в производственном приложении, так как он будет меньше). Каждая запись о продукте представляет собой отдельный автономный блок:
<li id='product-001'>
<div>This is Product 001</div>
<img src='http://www.gravatar.com/avatar/88ca83ed97a129596d6e8dd86deef994?s=32&d=identicon&r=PG'>
<div>Blurb about Product 001</div>
</li>
... а затем страница возвращает столько из них, сколько вы считаете нужным. Вы запрашиваете страницу с помощью Ajax и обновляете список продуктов с помощью JavaScript. Поскольку вы сказали, что используете jQuery, это может быть тривиально просто:
$('#productList').load("/path/to/paging/page?start=X&count=Y");
Вот пример прототипа (не производственный код); он подделывает Ajax, потому что JSBin вызывал у меня проблемы с Ajax.
Загрузка одной большой страницы, затем подкачка JavaScript на стороне клиента
Я не уверен, как вы выполняете фильтрацию, но если у вас есть элемент, содержащий информацию о продукте, вы можете сохранить URL-адрес изображения в атрибуте data-xyz:
<div id='product-123' data-image='/images/foo.png'>
Затем, когда ваш код сделает это видимым, вы можете легко добавить к нему img:
var prod, imgsrc, img;
prod = document.getElementById('product-123');
prod.style.display = 'block'; // Or whatever you're doing to show it
imgsrc = prod.getAttribute('data-image');
if (imgsrc) {
img = document.createElement('img');
img.src = imgsrc;
prod.appendChild(img); // You'd probably put this somewhere else, but you get the idea
prod.removeAttribute('data-image');
}
Изменить. В другом месте вы сказали, что используете jQuery. Если да, то перевод вышеизложенного может выглядеть так:
var prod, imgsrc, img;
prod = $('#product-123');
prod.show();
imgsrc = prod.attr('data-image');
if (imgsrc) {
$("<img/>").attr('src', imgsrc).appendTo(prod); // You'd probably put this somewhere else, but you get the idea
prod.removeAttr('data-image');
}
Нет необходимости снова удалять его при скрытии, поскольку изображение уже будет показано, поэтому я удаляю атрибут после того, как мы его использовали.
Причина, по которой я использовал префикс data-, - это проверка: в HTML5 вы можете определять свои собственные data-xyz атрибуты, и ваши страницы по-прежнему будут проходить проверку. В более ранних версиях HTML вам не разрешалось определять свои собственные атрибуты (хотя на практике это не касается основных браузеров), поэтому, если вы использовали для этого свой собственный атрибут, страница не проверялась.
Ссылки (w3.org):
Не по теме, но многое из этого станет намного проще, если вы используете библиотеку JavaScript, например jQuery, закрытие, Прототип, YUI или любой из нескольких других, чтобы сгладить острые углы для вас. (С тех пор вы сказали вы используете jQuery.)
person
T.J. Crowder
schedule
27.10.2010
