Подивіться на ілюстрацію нижче, щоб краще зрозуміти ідею.

Крок 1 - XHTML

Перший крок – це створення розмітки XHTML. Плагіну потрібно надати невпорядкований список

з деякою кількістю елементів
• усередині нього. Нижче наведено код із файлу demo.html, який ви знайдете в архіві з прикладом:
  • Lorem ipsum dolor sit amet...
  • Lorem ipsum dolor sit amet...
  • Lorem ipsum dolor sit amet...
  • Lorem ipsum dolor sit amet...

  Блок mainвиступає в ролі контейнера для розбитого на сторінці елемента

  , і до нього застосовано світло-сірий фон. Невпорядкований список містить елементи.

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

  • будь-який контент, тому що розміри автоматично вираховуються jQuery (якщо ви хочете використовувати картинки - пам'ятайте, що потрібно вказати їх ширину і висоту).

    Крок 2 – CSS

    Після створення розмітки займемося надання їй стильового оформлення. Хороша ідея - використовувати стилі так, ніби у вас немає цієї посторінкової навігації, так як плагін залежить від JavaScript. Це означає, що є ймовірність того, що деякі користувачі не зможуть побачити вашу сторінкову навігацію і, відповідно, скористатися нею.

    styles.css – Частина 1

    #main( /* The main container div */ position:relative; margin:50px auto; width:410px; background:url("img/main_bg.jpg") repeat-x #aeadad; border:1px solid #CCCCCC; padding :70px 25px 60px; /* CSS3 закруглені коронери */ -moz-border-radius:12px;-webkit-border-radius:12px; border-radius:12px; ) #holder( /* into pages */ width:400px; overflow:hidden; position:relative; background:url("img/dark_bg.jpg") repeat #4e5355; because Google Chrome не може бути закручених corners combined with inset shadows): */ -moz-box-shadow:0 0 10px #222 inset; shadow:0 0 10px #222 inset; ) .swControls( position:absolute; margin-top:10px; )

    Насамперед надаємо стиль блоку mainта неупорядкованому списку (останньому присвоєно id = holder).

    Зауважте, що ми використовуємо ефект тіні в CSS3 з атрибутом insetдля імітації внутрішньої тіні. Як і у випадку з більшістю правил CSS3, нам все ще необхідно вказувати правила окремо для певних браузерів: з двигуном Mozilla (Firefox) та Webkit (Safri та Chrome).

    Ви могли звернути увагу на те, що версія для webkit закоментована. Це пов'язано з багом при відмальовуванні тіней в Chrome при одночасному використанні даної властивості. border-radius(тіні створюються так, якби блок мав прямі кути, ігноруючи їх заокруглення і, отже, псуючи ефект).

    styles.css – Частина 2

    A.swShowPage( /* The links that initiate the page slide */ background-color:#444444; float:left; height:15px; margin:4px 3px; text-indent:-9999px; width:15px; /*border: 1px solid #ccc;*/ /* CSS3 rounded corners */ -moz-border-radius:7px;-webkit-border-radius:7px; border-radius:7px; ( background-color:#2993dd; /* CSS3 inner shadow */ -moz-box-shadow:0 0 7px #1e435d inset; /*-webkit-box-shadow:0 0 7px #1e435d inset;*/ box-shadow :0 0 7px #1e435d inset; ) #holder li( background-color:#F4F4F4; list-style:none outside none; margin:10px 10px 0; padding:20px; float:left; inset): */ -moz-box-shadow:0 0 6px #111111; -webkit-box-shadow:0 0 6px #111111; * Applying rouded corners to both the holder and the holder lis */ -moz-border-radius:8px;-webkit-border-radius:8px; border-radius:8px; */ clear:both; )

    Завершує код клас clear, що використовується для скидання обтікання елементів.

    
    

    Крок 3 – jQuery

    У завершальній частині уроку нам потрібно включити на сторінку останню версіюбібліотеки jQuery. З точки зору продуктивності мудро включати всі зовнішні яваскрипти безпосередньо перед тегом body, що закриває, так як скрипти блокують рендеринг (відмальовку) сторінки.

    script.js – Частина 1

    (function($)( // Creating the sweetPages jQuery plugin: $.fn.sweetPages = function(opts)( // If no options were passed, create an empty opts object if(!opts) opts = (); var resultsPerPage = Опти. ()( // Calculating height of each li element, // and storing it with the data method: var el = $(this); el.data("height",el.outerHeight(true)); )); // Визначення загальної кількості сторінок: var pagesNumber = Math.ceil(li.length/resultsPerPage);<2) return this; // Creating the controls div: var swControls = $("

    "); for(var i=0;i "); // Надіслати link до swControls div: swControls.append(""+(i+1)+""); ) ul.append(swControls);

    Створення JQuery-плагін не так складно, як ви могли подумати. Нам потрібно створити нову функцію як властивість jQuery.fn(або $.fn, як зазначено тут. Покажчик thisЦя функція вказує на оригінальний об'єкт JQuery.

    Потім ми підраховуємо загальну кількість сторінок функцією Math.ceil(). Вона округляє отриманий результат у велику сторону до найближчого цілого числа, яке дає нам правильну кількість сторінок.

    Тепер, коли ми маємо загальну кількість сторінок, ми можемо пройтись циклом forпо всіх елементах

  • , розбиваючи їх на окремі групи та обрамляючи їх у блок swPage, формуючи таким чином сторінки. Пам'ятайте, що виклик методу slice()в jQuery створює нову групу елементів, залишаючи вихідний набір незайманим (інакше в кожній ітерації циклу ми починали б з вихідного набору елементів
  • ).

    script.js – Частина 2

    Var maxHeight = 0; var totalWidth = 0; var swPage = ul.find(".swPage"); swPage.each(function()( // Looping through all the newly created pages: var elem = $(this); var tmpHeight = 0; elem.find("li").each(function()(tmpHeight+=$( this).data("height");));if(tmpHeight>maxHeight) maxHeight = tmpHeight; totalWidth+=elem.outerWidth(); ));)); swPage.wrapAll("

    "); // Setting the height of the ul to the height of the thread page: ul.height(maxHeight); var swSlider = ul.find(".swSlider"); swSlider.append("

    ").width(totalWidth); var hyperLinks = ul.find("a.swShowPage"); contains all the pages) і mark it as active: $(this).addClass("active").siblings().removeClass("active"); swSlider.stop().animate(("margin-left": - (parseInt($(this).text())-1)*ul.width()),"slow"); e.preventDefault(); )); runs: hyperLinks.eq(0).addClass("active"); // Center the control div: swControls.css(( "left":"50%", "margin-left":-swControls.width()/ 2 ));return this; )))(jQuery);

    У другій частині скрипту ми проходимо в циклі за новими створеними сторінками, встановлюємо їм розміри та задаємо, щоб вони обтікали ліворуч. У процесі цього ми знаходимо найвищу сторінку і, відповідно, встановлюємо висоту елемента

    .

    Ми також укладаємо сторінки в блок swSlider, який досить широкий для того, щоб відобразити їх "пліч-о-пліч". Далі ми відстежуємо подію кліка за навігаційними посиланнями та переміщуємо блок swSliderметодом animate. Це створює ефект ковзання (слайдингу), який ви бачите у демо.

    script.js – Частина 3

    $(document).ready(function()( /* The following code is executed once the DOM is loaded */ // Calling jQuery plugin and splitting the // #holder UL inpages of 3 LIs each: $("# holder "). ").detach(); controls.appendTo("#main"); ));

    В останній частині коду ми просто викликаємо плагін і передаємо налаштування perPage(кілька елементів на сторінку відображати). Також зверніть увагу на використання методу detach, введений у jQuery 1.4. Він видаляє елементи з DOM (Об'єктної Моделі Документу), але залишає незайманими всі "прослуховувачі" подій. Це дозволяє нам винести керуючі посилання за межі елемента

    , де вони були спочатку, зберігаючи у своїй необхідну функціональність.

    Сайти, як правило, містять кілька сторінок. На них може розташовуватися як 3-5 сторінок, наприклад, на landing-page, а може бути і більше, набагато більше.

    Кожен добрий сайт повинен містити в собі навігацію, яка дозволить користувачеві правильно орієнтуватися та переміщатися між сторінками сайту. Створити таку пагінацію можна за допомогою JavaScript. У цій статті ми поговоримо про створення такої навігації.

    Ще один момент, окрім звичайного JavaScript, у прикладі використовується Bootstrap 4. Його компонент bootstrap pagination поєднується з бібліотекою JQuery, а саме спеціальним плагіном Buzina Pagination. Він дозволяє розбивати всю інформацію на кілька сторінок із створенням навігації між ними.

    Підключення необхідних фреймворків

    Щоб працювати з Bootstrap та JQuery, їх потрібно підключити. Це можна зробити у вашому HTML документі за допомогою тегів

    Якщо у вас на сайті jQuery вже включений і працює, всі рухи тіла описані вище, можете сміливо пропустити, головне стежте за тим, щоб версія jQuery, не була занадто дрімучою. У WordPress, до речі, з цим усе гаразд.
    Далі, підключаємо нашого робочого конячка — плагін jquery.simplePagination.js:

    Можна не городити город, а просто вибрати потрібний стиль, світлий, темний або компактний і вставити набір правил у файл стилів.css вашого шаблону. Прописати свої власні стилі або скористатися Bootstrap, теж варіант, у плані оригінальності та розвитку навичок сайтобудування, навіть кращий.
    

    Крок 3. HTML

    Щоб вивести панель сторінкової навігації на сторінках сайту, там де ви плануєте її розмістити, логічніше і найчастіше, це внизу основного змісту слід прописати наступне:
    Для світлого фону:

    Компактна тема:

    $(function() ( $(#light-pagination).pagination(( items: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));

    У прикладі я використав ініціалізацію для пагінації світлої теми #light-pagination , ви можете змінити селектор на інший, для компактного це #compact-pagination , або для темного стилю #dark-pagination . Не забувайте в такому разі міняти і клас у функції cssStyle.
    Кая я вже писав вище, плагін дуже гнучкий в налаштуваннях, для зміни доступні такі опції:

    • items— Загальна кількість елементів, які будуть використовуватись для розрахунку сторінок. За замовчуванням: 1 .
    • itemsOnPage— Кількість елементів, які відображаються на кожній сторінці. За замовчуванням: 1 .
    • pages- Опціонально. Якщо вказано значення, опції items і itemsOnPage ігноруються. Встановлює кількість сторінок у списку.
    • displayedPages— Скільки номерів сторінок має бути видно під час навігації. Мінімально допустиме значення: 3 , за замовчуванням: 5 .
    • edges— Скільки номерів сторінок видно на початку та наприкінці нумерації. За замовчуванням значення: 2 .
    • currentPage— Яку сторінку буде обрано відразу після запуску. Логічно, за замовчуванням значення: 1 .
    • hrefTextPrefix— Рядок, що використовується в атрибуті HREF, додається перед номером сторінки. За замовчуванням: "#page-".
    • hrefTextSuffix— Рядок, що використовується в атрибуті HREF, вставляється після номера сторінки. За промовчанням порожній рядок.
    • prevText- Текст кнопки на попередню сторінку. За замовчуванням: "Prev".
    • nextText— Текст кнопки на наступній сторінці. За замовчуванням: "Next"
    • cssStyle- Визначать стиль CSS. За замовчуванням: "light-theme"
    • selectOnClick— Вибір сторінки після натискання, за замовчуванням — увімкнено( true), навіщо відключати так і не зрозумів, але така можливість є значення: «false».

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

    Мені залишається тільки, побажати вам удачі та успіхів у роботі над вашими новими проектами.

    Facebook
    Twitter
    Вконтакте
    Google+
    Технології