Погледнете илюстрацията по-долу, за да разберете по-добре идеята.

Krok 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...

  Блокиране главендейства като контейнер за счупен елемент отстрани

  , а светлосивият фон е силно застоял. Неподреден списък с елементи.

  В повечето ситуации е безопасно да се каже, че му е дадена възможността да генерира фонов скрипт, който ще ви помогне с необходимата работа ръчно. Можете да поставите в средата на елементите

  • всяко съдържание, което jQuery автоматично ще премахне избора (ако искате да маркирате изображения - не забравяйте, че трябва да посочите тяхната ширина и височина).

    Krok 2 - CSS

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

    styles.css - Част 1

    #main( /* Основният контейнер 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( /* в страници */ width:400px; overflow:hidden; position:relative; background:url("img/dark_bg.jpg") повторете #4e5355; тъй като Google Chrome не може да заобикаля ъглите, комбинирани с вмъкнати сенки): */ -moz-box-shadow:0 0 10px #222 вложка; shadow:0 0 10px #222 вмъкване; ) .swControls( position:absolute; margin-top:10px; )

    Блок в стил Nasampered nadaemo главенкъм неподредения списък (останалото е присвоено id = притежател).

    Уважавайте, че печелим ефекта на сянка в CSS3 с атрибута вмъкванеза имитация на вътрешна сянка. Въпреки че имаме повече CSS3 правила, все пак трябва да посочим правилата за същите браузъри: двигателя на Mozilla (Firefox) и Webkit (Safri и Chrome).

    Можете да обърнете внимание на тези, които имат коментирана версия на webkit. Това се дължи на грешка с появата на сенки в Chrome с едночасова победа над властта. граница-радиус(сенките се създават по такъв начин, yakby block mav прави изрязване, пренебрегвайки тяхното закръгляване и оттук нататък ефекта psuyuchi).

    styles.css - Част 2

    A.swShowPage( /* Връзките, които инициират слайда на страницата */ background-color:#444444; float:left; height:15px; margin:4px 3px; text-indent:-9999px; width:15px; /*border: 1px плътен #ccc;*/ /* CSS3 заоблени ъгли */ -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 извън none; margin:10px 10px 0; padding:20px; float:left; inset): */ -moz-box-shadow:0 0 6px #111111; -webkit -box-shadow:0 0 6px #111111; * Прилагане на заоблени ъгли както към държача, така и към държача lis */ -moz-border-radius:8px;-webkit-border-radius:8px; border-radius:8px; * /изчисти: и двете;)

    Попълване на кода на класа ясно, който е победен за плъзгане около елементите.

    
    

    Krok 3 - jQuery

    В последната част на урока трябва да се обърнем настрани останалата версия jQuery библиотеки. От гледна точка на производителността е разумно да включите целия необходим javascript директно преди тага body, който затваря кривата, така че скриптовете да блокират изобразяването (преглеждането) на страницата.

    script.js - част 1

    (function($)( // Създаване на приставката за sweetPages jQuery: $.fn. sweetPages = function(opts)( // Ако не са предадени опции, създайте празен обект opts if(!opts) opts = (); var resultsPerPage = Opti.()( // Изчисляване на височината на всеки li елемент, // и съхраняването му с метода на данните: 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 "); // Добавяне на връзка към swControls div: swControls.append(""+(i+1)+""); ) ul.append(swControls);

    Създаването на плъгина jQuery не е толкова чисто, колкото си мислите. Трябва да създадем нова функция като сила jQuery.fn(в противен случай $.fn, както е посочено тук. индикатор товаТази функция сочи към оригиналния JQuery обект.

    Нека подкрепим моя голям брой партии във функцията Math.ceil(). Той закръглява изваждащия резултат от голямата страна до най-близкото цяло число, тъй като ни дава правилния брой страни.

    Сега, ако можем да имаме голям брой страни, можем да преминем през цикъла заот всички елементи

  • , разделяйки ги на ръба на групата и ги рамкирайки в блока swPage, образувайки страни в този ред. Не забравяйте, че бързият метод резен()в jQuery създавам нова група елементи, замествайки външния набор от елементи
  • ).

    script.js - част 2

    Var maxHeight = 0; var totalWidth = 0; var swPage = ul.find(".swPage"); swPage.each(function()( // Преглеждане на всички новосъздадени страници: 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("

    "); // Задаване на височината на ul спрямо височината на страницата с нишката: ul.height(maxHeight); var swSlider = ul.find(.swSlider"); swSlider.append("

    ").width(totalWidth); var hyperLinks = ul. find("a.swShowPage"); съдържа всички страници) и го маркирайте като активен: $(this).addClass("active").siblings().removeClass ("активен"); swSlider.stop().animate(("margin-left": - (parseInt($(this).text())-1)*ul.width()),"бавен"); e.preventDefault(); )); изпълнява: hyperLinks.eq(0).addClass("active"); // Центрирайте контролния div: swControls.css(( "left":"50%", "margin-left" ":-swControls.width()/ 2 )); върнете това; )))(jQuery);

    В другата част на скрипта преминаваме в цикъл за нови творения, инсталираме го и настройваме, така че вонята да е около лявата ръка. В процеса знаем да намерим страната i, очевидно, задаваме височината на елемента

    .

    Поставяме и страните в блок swSlider, които трябва да са широки, за да изглеждат "plea-o-plea". Дали ми под щракване за съобщения за навигация и преместете блока swSliderметод анимирайте. Това създава ефекта на коване (плъзгане), който можете да видите в демонстрацията.

    script.js - част 3

    $(document).ready(function()( /* Следният код се изпълнява след зареждане на DOM */ // Извикване на jQuery плъгин и разделяне на // #holder UL страници от 3 LI всяка: $("# holder " ).".".detach(); controls.appendTo("#main"); ));

    В останалата част от кода просто щракваме върху приставката и предаваме персонализирането на страница(пружина на елементи отстрани на екрана). Така че уважавайте най-добрия метод отдели се, jQuery 1.4 въведения. Можете да видите елементи от DOM (документен обектен модел), но пропуснете всички модули за "слушване". Tse ни позволяват да обвиняваме силата keruyuchi за границата на елемента

    , де смърди бяха на кочан, отнемайки от необходимата им функционалност.

    Сайтовете, като правило, си отмъщават от няколко страни. Те могат да бъдат разширени като 3-5 страни, например, на целевата страница, или може би дори повече, по-богато.

    Кожата на добрия сайт е виновна за отмъщение за собствената си навигация, за да позволи на coristuvachev да се ориентира правилно и да се движи между страните на сайта. Можете да създадете такава пагинация с помощта на JavaScript. В тази статия ще говорим за създаването на такава навигация.

    Още нещо, около страхотния JavaScript, в приложението се използва Bootstrap 4. Vіn ви позволява да разделите цялата информация на страницата на страниците от навигацията между тях.

    Свързване на необходимите рамки

    За да работите с Bootstrap и JQuery, трябва да ги свържете. Можете ли да добавите към вашия HTML документ за помощни маркери

    Ако вече имате включен jQuery и работите на вашия сайт, всички подробности за тялото са описани по-горе, можете спокойно да го пропуснете, продължете, защото версията на jQuery не беше твърде мрачна. В WordPress, по същество, всичко е наред.
    Дали, свържете нашия робот кон — плъгин jquery.simplePagination.js:

    Не можете да оградите града, а просто изберете стила, от който се нуждаете, светъл, тъмен или компактен и вмъкнете набор от правила в style file.css на вашия шаблон. Предпишете свои собствени стилове или ускорете Bootstrap, теж вариант, от гледна точка на оригиналност и разработка на нови сайтове, за изграждане на по-кратък.
    

    Krok 3. HTML

    За да създадете страничен навигационен панел отстрани на сайта, там планирате да разширите, логично и най-често в долната част на основната промяна напишете следното:
    За светъл фон:

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

    $(function() ( $(#light-pagination).pagination(( елементи: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));

    В приложението можете да промените инициализацията за светло страниране на #light-pagination, можете да промените селектора на нещо друго, за компактно #compact-pagination или за тъмен стил #dark-pagination. Не забравяйте в този случай да промените класа на функцията css стил.
    Въпреки че вече писах повече, плъгинът вече е гъвкав в настройките, за промяна са налични следните опции:

    • артикули- Броят на елементите е значителен, тъй като те ще бъдат победители за декорация на страните. За блокиране: 1 .
    • itemsOnPage- Редица елементи, които се появяват от страната на кожата. За блокиране: 1 .
    • страници- По избор. Ако е посочена стойност, опциите за елементи и itemsOnPage се игнорират. Задайте броя на страните за списъка.
    • показвани страници— Колко числа отстрани могат да се видят по време на навигация. Минимално допустима стойност: 3 , за подсказка: 5 .
    • ръбове- Можете да видите номерата на страните на кочана и например номерацията. Зад близкия смисъл: 2 .
    • текуща страница— Yaku storіnku bude vіdrazu след старта. Логично, за смисъл: 1 .
    • hrefTextPrefix— Редът, който печели в атрибута HREF, се добавя преди страничния номер. За блокиране: „#страница-“.
    • hrefTextSuffix— Редът, който печели в атрибута HREF, се вмъква след номера на страната. За повишение, празен ред.
    • prevText- Текст на бутона от предната страна. За блокиране: "предишна".
    • nextText— Текст на бутона от следващата страна. За блокиране: "следващия"
    • css стил- Задайте CSS стил. За блокиране: "светла тема"
    • selectOnClick- Избор на страна след натиска, за заключване - гласувано ( вярно);

    Разгледахме основните настройки. професионалист адитивни функцииТози наличен метод за изтегляне на този плъгин, можете да проверите документацията директно от страна на търговеца на дребно.

    Времето ми изтича, пожелавам ви успех и успех в работата по новите ви проекти.

    Facebook
    Twitter
    Във връзка с
    Google Plus
    Технологии