Има една английска версия на разположение тази статия.

В тази статия ще говорим за това как само за 10 минути с помощта jScrollPane - библиотека за JQuery - можете да направите персонализиран лента за превъртане на вашия сайт, и как да го оформите и да се създаде.

основна информация

Рано или късно, уеб дизайнер е изправен пред факта, че лентата за превъртане на сайта, която тя създава, погледнете neorganichno (и всеки браузър ги показва по свой начин). В много случаи това не е проблем, обаче, се намира клиенти, които плащат за този момент вниманието и търсенето, че плъзгачите бяха боядисани в определен цвят, са, например, заоблени ръбове и стрелките (нагоре-надолу, наляво-надясно) не показва. Това повдига един прост въпрос: как да го направя? Трябва ли да бъде в състояние да помогне в този случай, CSS? Всъщност, преди много години в някои сайтове, които съм виждал CSS инструкции, които всъщност пребоядисани лента за превъртане, но тя работи само когато всичките ви любими IE браузър от версия 6, а в нашия случай това не е опция. И все пак, ако някой се интересува, стана ясно, че е нещо като това:

Достатъчно е да зададете ширината и височината, която е подходяща за вашия случай. Можете да получите нещо такова:

Ето какво се случи в резултат:

Ура, тя работи. Сега само трябва да се прилагат стилове в нашия лентата за превъртане. Правим го в нюанси на сивото и по-тесен (между другото, защото jScrollPane preopredelonnaya дизайн тема):

Създаване jScrollPane

Може да забележите, че свитъка с колелцето на мишката е твърде бавен. Е, това е лесно да се определи - jScrollPane позволява на множество параметри, за да се адаптират (техния пълен списък може да намерите тук):

70 скорост превъртане, по мое мнение, е най-добрият, но можете да си (по подразбиране - 10) експериментирате.

Друг важен параметър е отговорен за това дали ни единица с лентата за превъртане автоматично актуализиране. В такъв случай е полезно? Например, когато превъртане единица има фиксирана ширина и относителната (предварително определен процент ги или REM). В този случай, ако потребителят да промените размера на прозореца, нашият блок ще се промени ширината и необходимостта от правилно промените лентата за превъртане. Това може да стане с помощта на API, който е на разположение в jScrollPane (повече за това по-късно), но това ще бъде по-лесно да се напише:

В този случай, плъзгач, ще бъде отменено автоматично. Друг сценарий е използването на този параметър - динамичното добавяне на съдържание, което да блокира превъртане. Ако автоматична замените трябва, когато добавяте съдържание лента за превъртане няма да се актуализира и новото съдържание няма да бъде в състояние да отида (той ще остане извън блока и няма да се вижда) - autoReinitialise собственост, за да се избегне този проблем. Имайте предвид, че автоматично предефинирането по подразбиране се прави много често - на всеки половин секунда. Ако във вашия случай това ще бъде достатъчно, за да се актуализира лентата за превъртане на всеки, да речем, 5 секунди, е необходимо да се премине друг параметър autoReinitialiseDelay:

Стойността се дава в милисекунди.

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

API за jScrollPane

Последното нещо, което поговорим малко - на API за управление jScrollPane. Достъп до приложния програмен интерфейс е много проста:

Сега променлива API може да се използва за достъп до jScrollPane. Например, този код

Стартиране prinuditilnoe актуализира лентата за превъртане (не забравяйте, че можете да използвате autoReinitialise опция за автоматични актуализации). Друг интересен метод на API е scrollToElement. което позволява превъртане принудени да конкретен елемент на контейнера; този елемент се прехвърля като първи аргумент и може да бъде определена или като JQuery обект или като DOM възел или като JQuery селектор. Вторият аргумент предава на булева стойност истина или лъжа. който определя дали даден елемент трябва, към които ние предлагаме превъртане да бъде в горната част на контейнера; Ако е лъжа. jScrollPane след това се опитайте да прилагат минимален Превъртете до елемента, просто се появи във видимата област. Третият параметър също се предава булева стойност, която показва дали да анимирате превъртане. Ние показваме този метод с един пример. За тази vnesom малки промени в нашия оформление, че е бил използван преди:

Тук за първи път се декларира променлива API. с която методите и ще се представят jScrollPane, а след това се свързват манипулатор кликване събитие на връзката с .scroll_to_element клас. Кликнете на линка ще бъде обработката на поведение по подразбиране е забранено първи чрез метод preventDefault (). браузърът не се опитва да скочи на връзката. Тогава принуден скролирането е, освен това, ние се две логически параметър, за да е истина. елементът е в горната част на видимата област, за да превъртите и анимирани.

Съществуват няколко метода, които изпълняват и други задачи: scrollTo (превъртане до определена точка, която се определя като X и Y координатите на горния ляв ъгъл на контейнера); scrollToX и scrollToY (превъртане до определена точка на X или Y ос); scrollToPercentX и scrollToPercentY (превъртане по съответната ос на определен процент) и други. В допълнение, API позволява разпитва jScrollPane: getIsScrollableH и getIsScrollableV (дали е възможно, за да превъртите хоризонтално и вертикално); getContentPositionX и getContentPositionY (получи позиция х и у ос, съответно); getPercentScrolledX и getPercentScrolledY (процент превъртат на оста х и у съответно), и други. И накрая, за да се върне към нормалното контейнера лента за превъртане чрез премахване на функционалната JScrollPane, можете да използвате API унищожи метод.

На тази, може би, ще завърши прегледа на библиотеката, която може да бъде наистина полезно за много фирми. Както видяхме, не само предоставя интерфейс за достатъчно гъвкава настройка, но методите на API за допълнителен контрол. Библиотеката е в постоянно състояние на развитие; Ако намерите бъг или искате да предложите да се въведе допълнителна функционалност, отворете нова молба в хранилището на GitHub. Ако подавате сигнал за открита грешка, не забравяйте да го опиша по-подробно (използва версия на библиотеката JQuery версия на сайта си, използвайте сценария JScrollPane).

За Руби на релси за разработчици

Благодаря за разбирането и успешна работа.

Следвайте ме на Twitter, за да получите информация за нови членове >>

Моля да разреши чрез една от следните социални мрежи, за да оставите коментар: