Съдържание
Има много начини да направите табове и акордеони, но определено jQuery и вашия библиотечен пакет jQuery потребителски интерфейс ни предоставя най -бързия и ефективен начин за прилагане на тези елементи.Мигли
Разделите ни позволяват да групираме информацията на нашия уебсайт по теми, което позволява на потребителите да получат подходяща информация бързо и лесно, само като изберат желания раздел.
Методът tabs ()
Методът раздели(options) декларира, че елемент от HTML и неговото съдържание трябва да се показват в раздели, параметрите на опциите са обект, който определя външния вид и поведението на разделите.
Методът раздели () може да се използва по два начина:
• $ (селектор, контекст). Табове (опции)
• $ (селектор, контекст) .tabs ("действие", параметри)
Нека да видим пример за неговото изпълнение:
- Включваме необходимите файлове, библиотеките на jQuery и CSS:
- Ние създаваме нашия екземпляр на метода раздели () и го свързваме със селектор:
- Накрая в нашия HTML ние създаваме съдържанието, което ще бъде форматирано в нашите раздели, важно е да споменем, че то трябва да отговаря на структурата на маркеритеслед това етикетите
- и накрая етикетиза метода за идентифициране на всеки раздел.
- Nunc tincidunt
- Проин болка
- Aenean lacinia
- Включваме необходимите файлове, библиотеките на jQuery и CSS:
- Ние създаваме нашия екземпляр на метода акордеон () и го свързваме със селектор:
- Накрая създаваме нашия HTML, като спазваме структурата на етикетобщо, последвано от други таговекойто ще служи за идентифициране на всеки блок.
- Създай акаунтРегистрирайте се БЕЗПЛАТНО, за да имате своя Solvetic акаунтРегистрирайте акаунт
- ИдентифицирайтеИмате ли вече акаунт? Влезте тукИдентифицирайте ме в моя акаунт
- Публикувано 12 август 2013 00:54
- Посещения 3,7 хиляди
- НивоПрофесионален
- Как да актуализирате NPM с PowerShell в Windows 10
- Как да плъзнете и вземете изображения с потребителския интерфейс на JQuery
- Как да направите Spinner или икона за зареждане с JQuery
- Как да преведете уебсайт на няколко езика
Нека да видим как изглежда този пример в нашия браузър:
jQuery UI Tabs - Функционалност по подразбиране
Tab тест 1.
Morbi tincidunt, dui sit amet facilisis feugiat, преди мразя metus gravida, ut pharetra massa metus id nunc. Duis scelerisque annoy turpis. Жажда fringilla, massa eget luctus malesuada, metus eros дискомфорт lectus, ut tempus eros massa ut болка. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare sequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Tab тест 3.
Акордеон
Подобно на разделите, акордеонът организира информацията с особеностите, които прави по блокове, в които ще се показва само информацията за избрания блок, докато останалите остават скрити.
Методът на акордеон ()
Методът акордеон (опции) определя, че елемент от HTML и неговото съдържание ще се управляват като менюта от тип акордеон. Подобно на метода tabs, опциите ще определят неговото поведение и външен вид.
Методът акордеон () може да се използва по два начина:
• $ (селектор, контекст). Акордеон (опции)
• $ (селектор, контекст). Акордеон ("действие", параметри)
Нека видим пример за неговото изпълнение:
Нашият пример ще изглежда така в браузъра:
Помогна ли ви този урок?
Ако неПОМОГНЕТЕ ПОДОБРЕТЕ ТОЗИ УРОК!
Смятате ли, че можете да коригирате или подобрите този урок? Можете да изпратите изданието си с промените, които смятате за полезни.0 потребители са редактирали този урок. Редактирайте и станете признат експерт!
Редактирайте този урок
Сходни уроци
Как да плъзгате и хващате изображения с потребителския интерфейс на JQueryКак да направите Spinner или икона за зареждане с JQueryJQuery плъгини и библиотеки за уеб разработкаДинамична мрежа Flexigrid с JQuery и PHPРегулярни изрази с JqueryУправление на обобщени таблици с приставката Jquery DatatablesРазбиране на AJAX с jQueryФилтри в селектори с Jquery и CSS3 II
Без коментари, бъдете първи!
Не чакайте повече и влезте в SolveticОставете вашите коментари и се възползвайте от потребителския акаунт Присъединете се към нас!Информация
Най -новите уроци по JavaScript
