JQuery UI API - лепестковый элемент (Вкладки Виджет)

категория

Виджеты (Widgets)

использование

Описание: мульти-панель площадь Один содержание, каждая панель в названии списка.

Новая версия: 1.0

Вкладки (Tabs) обычно используется содержимое на множество секций, чтобы сэкономить место, как и аккордеона (баяна) то же самое.

Вкладки (Tabs) имеет определенный набор тегов, которые должны быть использованы для того, чтобы работать должным образом закладки:

• Вкладки (Tabs) должен быть упорядоченный ( <ol> ) или неупорядоченные ( <ul> список)
• "Title" на каждой странице должен быть элемент списка ( <li> внутренний), и должны быть использованы с href атрибута анкерного ( <a> ) пакета.
• Каждая табличка может быть любым допустимым элементом страницы, но она должна иметь идентификатор, якорное хэш, связанный с идентификатором соответствующих вкладках.

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

Вот некоторые примеры теги:

<DIV ID = "Вкладки">
  <Ul>
    <Li> <a href="#fragment-1"> </a> </ li>
    <Li> <a href="#fragment-2"> два </a> </ li>
    <Li> <a href="#fragment-3"> три </a> </ li>
  </ UL>
  <Div ID = "фрагмент-1">
    Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит, Sed диам nonummy nibh euismod tincidunt ут laoreet Dolore магна aliquam Erat volutpat.
  </ Div>
  <Div ID = "фрагмент-2">
    Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит, Sed диам nonummy nibh euismod tincidunt ут laoreet Dolore магна aliquam Erat volutpat.
  </ Div>
  <Div ID = "фрагмент-3">
    Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит, Sed диам nonummy nibh euismod tincidunt ут laoreet Dolore магна aliquam Erat volutpat.
  </ Div>
</ Div>

взаимодействие клавиатуры

Когда фокус находится на вкладке, следующие команды клавиатуры:

• UP / LEFT: Перемещение курсора на предыдущую вкладку. Если метка на первой странице, а затем переместить фокус на последней вкладке. В короткой задержки после активации вкладки сфокусированным.
• Вниз / вправо: переместить курсор на следующую вкладку. Если метка на последней странице, а затем переместить фокус на первой вкладке. В короткой задержки после активации вкладки сфокусированным.
• HOME: Переместить курсор на первой вкладке. В короткой задержки после активации вкладки сфокусированным.
• END: Переместить курсор на последнюю вкладку. В короткой задержки после активации вкладки сфокусированным.
• ПРОСТОР: активация, связанная с целенаправленным панели вкладок.
• ENTER: включение или переключатель, связанный с целенаправленным панели вкладок.
• ALT + PAGE UP: Перемещение курсора на предыдущую вкладку и сразу же активируется.
• ALT + PAGE DOWN: Перемещение курсора на следующую вкладку, и активируется немедленно.

Когда фокус находится на панели, следующие команды клавиатуры:

• CTRL + UP: Перемещение курсора на соответствующую вкладку.
• ALT + PAGE UP: Перемещение курсора на предыдущую вкладку и сразу же активируется.
• ALT + PAGE DOWN: Перемещение курсора на следующую вкладку, и активируется немедленно.

Тематизация

член Tab (Вкладки Виджет) с помощью рамки JQuery UI CSS , чтобы определить внешний вид и его стиль. Если вам необходимо использовать указанные вкладки стилей, вы можете использовать следующее имя класса CSS:

• ui-tabs : вкладки внешнего контейнера. При установке collapsible -time опции, дополнительные элементы снабжены ui-tabs-collapsible , класса.
  • ui-tabs-nav : список вкладок.
    • Навигации элемент списка будет активирован с ui-tabs-active , класса. Содержимое , загруженное с помощью Ajax вызова появится со списком элементов ui-tabs-loading , класс.
      • ui-tabs-anchor : Switchboard якорей.
  • ui-tabs-panel : вкладку связанных с панелями. Только соответствующая вкладка видна только тогда, когда активирована.

полагаться

• Ядро пользовательского интерфейса (UI ядра)
• Библиотеки компонентов (Widget Factory)
• Эффекты Ядро (Core Effects) (опционально, когда show и hide при использовании с опциями)

дополнительная информация

• Часть требует некоторой функциональной CSS, в противном случае она не будет работать. Если вы создаете собственную тему, используйте виджет указанный файл CSS в качестве отправной точки.

примеров

Простой вкладки JQuery UI (Tabs).

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> вкладка элемент (Вкладки Виджет) Demo </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.10.2.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
</ Head>
<Body>
 
<DIV ID = "Вкладки">
  <Ul>
    <Li> <a href="#fragment-1"> <SPAN> а </ SPAN> </a> </ li>
    <Li> <a href="#fragment-2"> <SPAN> два </ SPAN> </a> </ li>
    <Li> <a href="#fragment-3"> <SPAN> три </ SPAN> </a> </ li>
  </ UL>
  <Div ID = "фрагмент-1">
    <P> Первый тег включен по умолчанию: </ p>
    <Код> $ ( "#tabs") .tabs (); </ код>
  </ Div>
  <Div ID = "фрагмент-2">
    Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит, Sed диам nonummy nibh euismod tincidunt ут laoreet Dolore магна aliquam Erat volutpat.
    Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит, Sed диам nonummy nibh euismod tincidunt ут laoreet Dolore магна aliquam Erat volutpat.
  </ Div>
  <Div ID = "фрагмент-3">
    Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит, Sed диам nonummy nibh euismod tincidunt ут laoreet Dolore магна aliquam Erat volutpat.
    Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит, Sed диам nonummy nibh euismod tincidunt ут laoreet Dolore магна aliquam Erat volutpat.
    Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит, Sed диам nonummy nibh euismod tincidunt ут laoreet Dolore магна aliquam Erat volutpat.
  </ Div>
</ Div>
 
<Script>
$ ( "#tabs") .tabs ();
</ Script>
 
</ Body>
</ HTML>

Посмотреть демо