Динамическая подгрузка страницы. Крути меня полностью. Адаптивный макет с бесконечной прокруткой

Что-то давненько я не публиковал никакого кода. Сегодня я исправлю ситуацию и дам несколько полезных сниппетов на jQuery, которые обязательно вам пригодятся на ваших сайтах.

Я не буду вдаваться в теорию, вся документация по jQuery есть на официальном сайте библиотеки. Я лишь напомню, что, такое jQuery.

jQuery - это библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

Итак, поехали!

1. Плавная прокрутка к началу страницы

Без нее уже не обходится ни один сайт. Всего лишь 4 строчки кода позволят вашим посетителям в один клик плавно пркрутить всю страницу вверх.

$("a").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; });

2. Дублируем заголовки таблиц

Чтобы улучшить восприятие и читабельность ваших таблиц, можно продублировать их заголовки снизу под таблицей. Казалось бы мелочь, но это очень удобно в сложных и больших таблицах, которые не умещаются в один экран.

Var $tfoot = $(""); $($("thead").clone(true, true).children().get().reverse()).each(function(){ $tfoot.append($(this)); }); $tfoot.insertAfter("table thead");

3. Подгрузка внешних данных

С помощью jQuery очень легко подгружать на веб-страницы внешний контент. Его можно вывести прямо в блок DIV, как в примере ниже.

$("#content").load("somefile.html", function(response, status, xhr) { // error handling if(status == "error") { $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText); } });

4. Одинаковая высота колонок

Известно, что выровнять блоки по высоте стандартными средствами HTML и CSS не так-то просто. Всего несколько строк кода ниже позволит вам сделать высоту всех блоков равной высоте большего блока.

var maxheight = 0; $("div.col").each(function(){ if($(this).height() > maxheight) { maxheight = $(this).height(); } }); $("div.col").height(maxheight);

5. Табличная зебра

Как известно, восприятие и читабельность таблицы будет заметно выше если сделать разноцветное чередование строк. Это очень легко реализуется на jQuery.

$(document).ready(function(){ $("table tr:even").addClass("stripe"); });

6. Частичное обновление страницы

С помощью jQuery очень просто реализовать блочное (частичное) обновление страницы. К примеру, код ниже позволит вам каждые 10 секунд автоматически обновлять блок #refresh.

SetInterval(function() { $("#refresh").load(location.href+" #refresh>*",""); }, 10000); // milliseconds to wait

7. Предзагрузка изображений

Данный код позволяет осуществлять загрузку изображений в фоновом режиме без подгрузок в процессе просмотра страницы. Просто перечислите в 7 строке необходимые вам для предзагрузки изображения.

$.preloadImages = function() { for(var i = 0; i").attr("src", arguments[i]); } } $(document).ready(function() { $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); });

8. Открытие внешних ссылок в новых окнах/табах

Данный сниппет осуществляет принудительное открытие всех внешних ссылок страницы в новом окне браузера. Скрипт банально определяет текущий домен сайта, и срабатывает если он не совпадает с адресом в ссылке.

$("a").each(function() { var a = new RegExp("/" + window.location.host + "/"); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, "_blank"); }); } });

9. Блок во все окно браузера

Данный скрипт поможет вам растянуть блок на весь экран браузера. Отлично подойдет для модальных окон и диалогов.

Var winWidth = $(window).width(); var winHeight = $(window).height(); $("div").css({ "width": winWidth, "height": winHeight, }); $(window).resize(function(){ $("div").css({ "width": winWidth, "height": winHeight, }); });

10. Проверка сложности пароля

Если вы позволяете посетителям своего сайта самостоятельно указывать пароли, было бы неплохо проконтролировать его сложность и информировать об этом посетителя.

Для начала напишем HTML-часть кода:

А с помощью кода ниже мы проверим введенный пароль и выведем посетителю информацию: его пароль сложный, средний или слабый, а также проверим не слишком ли он короткий.

$("#pass").keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*)(?=.*)(?=.*)(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.*)(?=.*))|((?=.*)(?=.*))|((?=.*)(?=.*))).*$", "g"); var enoughRegex = new RegExp("(?=.{6,}).*", "g"); if (false == enoughRegex.test($(this).val())) { $("#passstrength").html("More Characters"); } else if (strongRegex.test($(this).val())) { $("#passstrength").className = "ok"; $("#passstrength").html("Strong!"); } else if (mediumRegex.test($(this).val())) { $("#passstrength").className = "alert"; $("#passstrength").html("Medium!"); } else { $("#passstrength").className = "error"; $("#passstrength").html("Weak!"); } return true; });

11. Ресайз изображений средствами jQuery

Конечно, логичнее изменять размеры изображений на стороне сервера средствами PHP и GD, но бывают ситуации когда это необходимо сделать именно на стороне клиента. И в этом снова нам поможет jQuery.

$(window).bind("load", function() { $("#product_cat_list img").each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; } }); //$("#contentpage img").show(); // IMAGE RESIZE });

12. Подгрузка контента при прокрутке страницу вниз

Чаще этот прием называют как бесконечный скролл. Контент подгружается по мере прокрутки пользователем страницы. Это достаточно просто реализовать с помощью кода ниже.

Var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == false){ loading = true; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max").val(), function(loaded){ $("body").append(loaded); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $("#loadingbar").css("display","none"); loading = false; }); } } }); $(document).ready(function() { $("#loaded_max").val(50); });

13. Проверка загрузки изображения

Часто бывает нужно проверить загружено изображение в данный момент или нет. И в этом снова нам поможет jQuery.

Var imgsrc = "img/image1.png"; $("").load(function () { alert("image loaded"); }).error(function () { alert("error loading image"); }).attr("src", imgsrc);

14. Сортировка по-алфавиту

Если вам нужна динамическая сортировка списка по-алфавиту, вам обязательно поможет этот небольшой сниппет.

$(function() { $.fn.sortList = function() { var mylist = $(this); var listitems = $("li", mylist).get(); listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });

Сохраните - пригодится.

Всё самое новое и интересное из мира Вордпресс в моём Телеграм-канале . Подписываемся!

В 2011 году очень модно было (по-моему, эта мода пошла от Фейсбука) делать у себя на сайтах «бесконечный скроллинг»: это когда пользователь крутит-крутит колесом мыши, и всё новые результаты поиска подгружаются Аяксом внизу страницы, превращая обычный скроллинг в бесконечный и вызывая у столкнувшегося с этим в первый раз пользователя «когнитивный диссонанс».

Также недавно я видел на этом сайте статью, в которой автор выражал своё недовольство «бесконечным скроллингом» и призывал использовать старую добрую «паджинацию».

Я согласен с автором. Я сам - наркоман, и порою сижу за монитором как зачарованный, со стеклянными глазами, кручу-кручу-кручу волшебное колёсико, не в состоянии пойти по делам/на работу/в магазин/поесть/попить/в туалет, и кручу я его с одной единственной мыслью: «Ну когдааа же вы все уже закончитесь?!» (что поделаешь - я привык доводить дела до конца).

Однажды утром я встал и твёрдо решил: «Хватит это терпеть!».

Представляю вам свой небольшой скрипт , который я на днях написал для своей «социальной сети» (с блекджеком и шлюхами).

Чтобы посмотреть демо, скачайте архив , и запустите файл «test/test.html».

Какие нововведения предлагает этот скрипт:

Поскольку основной «скроллбар» они превратили непонятно во что, нам нужно вернуть нормальный «скроллбар», что мы и сделали, нарисовав серую полоску в правой части страницы, сразу слева от обычного «скроллбара».

То, докуда дошла эта полоска сверху - это сколько результатов выборки мы уже пролистали. Вообще, эта полоска как бы чёрная. Там, где она серая - это место во всей выборке, где мы находимся сейчас.

Обратите также внимание на то, что адрес страницы меняется во время прокрутки. Таким образом, вы можете сегодня вечером пролистать половину, добавить страницу в закладки, выключить компьютер, пойти спать, проснуться утром, включить компьютер, зайти на страницу, добавленную вами вчера перед сном в закладки, и продолжить листать с того самого места, на котором вы остановились. И, более того, вы сможете листать с этого места не только вперёд, но и назад.

И по поводу навигации на любую нужную страницу: попасть на любую страницу можно и здесь - просто подставьте в адрес веб страницы номер нужной вам страницы выборки. Поскольку человекопонятные url"ы сейчас являются стандартом, это должно быть годным решением.

Этот скрипт, очевидно, не является чем-то высеченным в граните, и я сам, встав сегодня с утра, переписал его половину. Тем не менее, работоспособность вроде как стабильная, и проверено в последних версиях Chrome и FireFox. Сразу скажу: не гонюсь за «кроссбраузерностью» - её всегда можно будет допилить, если кто-то захочет использовать этот скрипт на своём «кроссбраузерном» сайте.

Вроде как всё, демо говорит само за себя. Пост провоцирует комментарии.

Что ещё можно сделать (на основе комментариев):

При клике в любое место полоски - переходить на соответствующую страницу выборки.

Убирать страницы данных с верха веб страницы, когда данных на веб странице становится слишком много (чтобы не тормозило).

Примеры улучшенного «бесконечного скроллинга».

Сколько я себя помню, веб-разработчики всегда обращались к старой-доброй пагинации в случае, когда им необходимо было отобразить большое количество контента. Не поймите меня неправильно, пагинация до сих пор является эффективным способом отображения контента, но в этой статье мы поговорим о другом подходе - “ленивой” прокрутке, также известной под названием “бесконечной прокрутки” и “отказом от пагинации”. С помощью этой техники подгрузка контента производится с помощью AJAX, когда пользователь прокручивает страницу до места, где загруженный контент заканчивается. Ленивая прокрутка используется некоторыми гигантами интернета, такими как Facebook и Pinterest. В этом посте мы попробуем реализовать свой плагин для ленивой загрузки на jQuery.

Преимущества и недостатки

Преимущества такого метода очевидны. Для того, чтобы получить дополнительную порцию контента вам нет необходимости переходить на другую страницу, что также сбивает ваше внимание и заставляет смотреть в другую область страницы. Добавив возможность ленивой загрузки вы удерживаете внимание пользователя на одной и той же области в процессе чтения.

Ленивая загрузка эффективна не во всех ситуациях. Например, в случаях, когда пользователь переходит по ссылке, а затем хочет вернуться на предыдущую страницу с помощью истории браузера, он теряет позицию в той части, которая была подгружена с помощью AJAX. Одним из способов решения подобной проблемы - открывать все ссылки в новом окне или вкладке.

В добавок, перед тем, как решите использовать эту технологию знайте, что поисковые системы не очень-то дружны с такими решениями. Для того, чтобы избежать проблемы видимости контента поисковикам, убедитесь, что вы можете предоставить альтернативу с пагинацией или картой сайта.

Начинаем

Начнем с наброска очень простой страницы. Самые важные части страницы показаны в коде ниже. Полные файлы можно посмотреть в исходниках.

HTML

CSS

#data-container { margin: 10px; } #data-container .data-item { background-color: #444444; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; margin: 5px; color: #fff; } #loading-div { display: none; } #button-more{ cursor: pointer; margin: 0 auto; background-color: #aeaeae; color: #fff; width: 200px; height: 50px; line-height: 50px; }

Основные замечания

Если вы приглядитесь к документу, что мы создали, то увидите, что новые посты будут загружены при клике на кнопку “загрузить еще”. Вот пункты, которые мы будем реализовывать:

• необходимо сделать запрос на URL, который вернет нам список элементов, которые необходимо будет вставить на странице
• этот процесс должен повторяться каждый раз, как будет нажата кнопка, но в результате должны возвращаться новые посты
• новые посты должны выдаваться на каждый запрос до тех пор, пока есть, что возвращать
• когда больше не осталось постов, необходимо сообщить пользователю, что он достиг конца

Шаблоны ответа AJAX

В идеале необходимо объявить переменную, в которой мы будем хранить номер страницы, и с помощью этого номера определять URL, на который мы будем отправлять запрос. В нашем демонстрационном примере у нас будут три таких страницы: 2.html, 3.html и пустая страница 4.html.

Когда вы нажимаете на кнопку загрузки следующей порции данных, проходит некоторое время от момента отправки запроса и получения ответа. В таком случае мы будем прятать кнопку загрузки, а вместо нее будем показывать некоторый текст, говорящий о том, что идет загрузка элементов:

Добавляем полученные данные на страницу

Сначала вернем обратно те изменения, которые мы проделали, пока запрос еще выполнялся, то есть, показать кнопку “загрузить еще”, и спрятать информационный текст. Во-вторых, необходимо вставить полученные данные на страницу, после тех элементов, что уже есть на странице. Заметьте, что для упрощения в этом примере мы получаем данные HTML сразу, как результат запроса. Можно отсылать ответ в формате JSON, добавив в него дополнительные переменные, как статус или сообщение. Код ставки данных представлен ниже:

$(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1;

Обрабатываем вариант, когда данные закончились

Как только вы достигнете последнего поста, вам нужно показать пользователю, что больше постов нет. Сделать это можно различными способами. Можно отсылать статус в виде встроенного в ответ кода или сообщения. Так как мы напрямую используем разметку HTML в этом примере, то пустой ответ в нашем случае будет говорить о том, что данные закончились.

$.ajax({ ... success: function(response) { // Действие при пустом ответе if (response.trim() == "") { $(buttonId).fadeOut(); $(loadingId).text("No more entries to load!"); return; } // Если ответ верный }, ... });

Заключение

В данном демонстрационном примере мы привели очень базовый вариант обработки ленивой загрузки. Конечно же, можно сделать гораздо лучше, если постараться. Для начала, можно вообще избавиться от кнопки, и отправлять запрос, когда пользователь прокрутит страницу до конца. Это избавит пользователя от дополнительной необходимости нажимать кнопку, и в целом ускоряет процесс просмотра информации. Во-вторых, можно просто отсылать чистые данные в формате JSON, а разметку создавать налету, используя jQuery, например:

$.each(response.items, function(index, value) { $("

• 2024-04-28 00:21:37
  Тема: электронная почта (e-mail)

  Цель занятия. Изучение информационной технологии создания почтового ящика и работы с электронной почтой (или e-mail в английском варианте). Краткая справка. Чтобы работать с электронной почтой, вам нужны: почтовый ящик – место, куда будут...

  Решение проблем
• 2024-04-22 00:23:34
  Радар детекторы Street Storm обновление ПО

  STR-9520EX , STR-9510Plus STR-9040EX, STR-9040GPS, STR-9030EX, STR-9030GPS STR-9020GPS, STR-8800EXT, STR-8040GPS, STR-8030GPS STR-8020GPS, STR-8010GPS, STR-7700GPS, STR-7040GPS STR-7030GPS, STR-7020GPS, STR-7010GPS, STR-6600GPS STR-6030GPS,...

  Решение проблем
• 2024-04-21 00:26:16
  Портативная колонка JBL Xtreme

  Беспроводные колонки позволяют наслаждаться любимой музыкой, где бы вы ни находились. Портативные акустические системы JBL и Harman Kardon обеспечивают исключительно качественное, мощное и чистое звучание, оснащены перезаряжаемым аккумулятором и...

  Аппаратные решения