JQuery UI пример - вкладки (Tabs)

Предыдущий: Пример JQuery UI - ротатор (Spinner)

Далее: Jquery UI пример - подсказке окно (подсказке)

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

Для получения более подробной информации о компонентах вкладок см API документации лепесткового элемента (виджетов вкладками) .

По умолчанию функция

Перейдите на вкладку для переключения делится на другую логическую часть содержания.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> вкладки JQuery UI (Вкладки) - функция по умолчанию </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ();
  });
  </ Script>
</ Head>
<Body>
 
<DIV ID = "Вкладки">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin Dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean лациния </a> </ li>
  </ UL>
  <DIV ID = "Вкладки-1">
    <P> Proin Элит arcu, rutrum Commodo, vehicula Tempus, Commodo а, пзиз. Curabitur включенные в другие группировки arcu. Донец sollicitudin мили сидят Амет mauris. Нам Elementum Квам ullamcorper анте. Etiam aliquet Massa и др Lorem. Mauris dapibus Lacus auctor пзиз. Aenean TEMPOR ullamcorper Лев. Vivamus СЕПГ магна Quis язычок eleifend adipiscing. DUIs Орси. aliquam sodales tortor Vitae Ipsum. aliquam Nulla. DUIs aliquam molestie Erat. Ut и др mauris Vel Pede Varius sollicitudin. СЭД ут Dolor включенными в другие группировки Орси tincidunt interdum. Phasellus Ipsum. Nunc tristique Tempus Lectus . </ p>
  </ Div>
  <DIV ID = "Вкладки-2">
    <P> Morbi tincidunt, дуй сидеть Амет facilisis feugiat, Одио Метус gravida анте, ут pharetra Massa Метус ID пипс. DUIs scelerisque molestie turpis. Sed Fringilla, Massa Eget luctus malesuada, Метус эрос molestie Lectus, ут Tempus эрос Massa ут Dolor. Aenean aliquet Fringilla СЭМ. Suspendisse СЭД язычка в язычок suscipit aliquam. Связаться с Нами в эрос преддверия ми adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat пипс. Aenean Vel Метус. Ut Дознание viverra Nulla. aliquam Erat volutpat. pellentesque convallis. Меценат feugiat, Tellus pellentesque Pretium Дознание, Felis Lorem euismod Felis, ес ornare Лев НИСИ VEL Felis. Mauris consectetur tortor и др Purus. </ p>
  </ Div>
  <DIV ID = "Вкладки-3">
    <P> Mauris eleifend Эст и др turpis. DUIs ID Erat. Suspendisse Potenti. Aliquam vulputate, Pede Vel vehicula accumsan, ми neque rutrum Erat, ес congue Орси Lorem Eget Lorem. Преддверия не анте. Класс aptent taciti sociosqu объявление litora torquent в conubia ностра , в inceptos himenaeos. Fusce sodales. Quisque ес Урна Vel enim Commodo pellentesque. Связаться с Нами ЕС Risus hendrerit Tempus Pretium язычок. Curabitur Lorem enim, Pretium включенные в другие группировки, feugiat включенные в другие группировки, luctus а, Lacus. </ p>
    <P> DUIs Cursus. Меценат Ligula эрос, blandit включенные в другие группировки, pharetra на, зетрег на, Магна. Nullam AC Lacus. Nulla facilisi. Связаться с Нами viverra Justo Vitae neque. Связаться с Нами blandit adipiscing велит. Suspendisse Potenti. Донец Маттис, Pede Vel pharetra blandit, магна язычок faucibus эроса, ID euismod Lacus Dolor Eget Одио. Нам scelerisque. Донец не либеро СЕПГ Nulla Маттис Commodo. Ut sagittis. Донец НИСИ Lectus, feugiat porttitor, TEMPOR ас, TEMPOR Vitae, Pede. Aenean vehicula велит ес Tellus interdum rutrum. Меценат Commodo. Pellentesque включенных в другие категории Элит. Fusce в Lacus. Vivamus либеро Vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

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

Складные содержание

Нажмите на выбранной вкладке, чтобы переключить содержимое закрыто / открыто. Чтобы включить эту функцию, необходимо установить collapsible опцию верно.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> вкладки JQuery UI (Вкладки) - Складные содержание </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ({
      сборно-разборные: правда
    });
  });
  </ Script>
</ Head>
<Body>
 
<DIV ID = "Вкладки">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin Dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean лациния </a> </ li>
  </ UL>
  <DIV ID = "Вкладки-1">
    <P> <STRONG> Перейдите на вкладку еще раз, чтобы закрыть панель контента. </ STRONG> </ P>
    <P> Proin Элит arcu, rutrum Commodo, vehicula Tempus, Commodo а, пзиз. Curabitur включенные в другие группировки arcu. Донец sollicitudin мили сидят Амет mauris. Нам Elementum Квам ullamcorper анте. Etiam aliquet Massa и др Lorem. Mauris dapibus Lacus auctor пзиз. Aenean TEMPOR ullamcorper Лев. Vivamus СЕПГ магна Quis язычок eleifend adipiscing. DUIs Орси. aliquam sodales tortor Vitae Ipsum. aliquam Nulla. DUIs aliquam molestie Erat. Ut и др mauris Vel Pede Varius sollicitudin. СЭД ут Dolor включенными в другие группировки Орси tincidunt interdum. Phasellus Ipsum. Nunc tristique Tempus Lectus . </ p>
  </ Div>
  <DIV ID = "Вкладки-2">
    <P> <STRONG> Перейдите на вкладку еще раз, чтобы закрыть панель контента. </ STRONG> </ P>
    <P> Morbi tincidunt, дуй сидеть Амет facilisis feugiat, Одио Метус gravida анте, ут pharetra Massa Метус ID пипс. DUIs scelerisque molestie turpis. Sed Fringilla, Massa Eget luctus malesuada, Метус эрос molestie Lectus, ут Tempus эрос Massa ут Dolor. Aenean aliquet Fringilla СЭМ. Suspendisse СЭД язычка в язычок suscipit aliquam. Связаться с Нами в эрос преддверия ми adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat пипс. Aenean Vel Метус. Ut Дознание viverra Nulla. aliquam Erat volutpat. Pellentesque convallis. Меценат feugiat, Tellus pellentesque Pretium Дознание, Felis Lorem euismod Felis, ес ornare Лев НИСИ VEL Felis. Mauris consectetur tortor и др Purus. </ p>
  </ Div>
  <DIV ID = "Вкладки-3">
    <P> <STRONG> Перейдите на вкладку еще раз, чтобы закрыть панель контента. </ STRONG> </ P>
    <P> DUIs Cursus. Меценат Ligula эрос, blandit включенные в другие группировки, pharetra на, зетрег на, Магна. Nullam AC Lacus. Nulla facilisi. Связаться с Нами viverra Justo Vitae neque. Связаться с Нами blandit adipiscing велит. Suspendisse Potenti. Донец Маттис, Pede Vel pharetra blandit, магна язычок faucibus эроса, ID euismod Lacus Dolor Eget Одио. Нам scelerisque. Донец не либеро СЕПГ Nulla Маттис Commodo. Ut sagittis. Донец НИСИ Lectus, feugiat porttitor, TEMPOR ас, TEMPOR Vitae, Pede. Aenean vehicula велит ес Tellus interdum rutrum. Меценат Commodo. Pellentesque включенных в другие категории Элит. Fusce в Lacus. Vivamus либеро Vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

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

Получить контент с помощью Ajax

Установите значение HREF ссылки в закладке на вкладке для доступа к внешнему контента через Ajax. Когда Ajax запросы ждет ответа, вкладка в "Загрузка ...", когда загрузка завершена возврат к вкладке Общие.

Метка 3 и 4 демонстрируют медленную загрузку и повреждение тегов AJAX, а также как обрабатывать серверные ошибки в этих обстоятельствах. Обратите внимание, что оба требуют веб-сервер может объяснить PHP. Они не работают за пределами файловой системы.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> вкладки JQuery UI (Вкладки) - Получить контент с помощью Ajax </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ({
      beforeLoad: функция (событие, щ) {
        ui.jqXHR.error (функция () {
          ui.panel.html (
            "Не удается загрузить вкладку. Если это не демо." +
            "Мы будем решить эту проблему как можно скорее.");
        });
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<DIV ID = "Вкладки">
  <Ul>
    <Li> <a href="#tabs-1"> предустановленное </a> </ li>
    <Li> <a href="ajax/content1.html"> тег 1 </a> </ li>
    <Li> <a href="ajax/content2.html"> тег 2 </a> </ li>
    <Li> <a href="ajax/content3-slow.php"> тег 3 (медленный) </a> </ li>
    <Li> <a href="ajax/content4-broken.php"> метка 4 (повреждена) </a> </ li>
  </ UL>
  <DIV ID = "Вкладки-1">
    <P> Proin Элит arcu, rutrum Commodo, vehicula Tempus, Commodo а, пзиз. Curabitur включенные в другие группировки arcu. Донец sollicitudin мили сидят Амет mauris. Нам Elementum Квам ullamcorper анте. Etiam aliquet Massa и др Lorem. Mauris dapibus Lacus auctor пзиз. Aenean TEMPOR ullamcorper Лев. Vivamus СЕПГ магна Quis язычок eleifend adipiscing. DUIs Орси. aliquam sodales tortor Vitae Ipsum. aliquam Nulla. DUIs aliquam molestie Erat. Ut и др mauris Vel Pede Varius sollicitudin. СЭД ут Dolor включенными в другие группировки Орси tincidunt interdum. Phasellus Ipsum. Nunc tristique Tempus Lectus . </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

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

Открыть при наведении мыши

По event возможностью переключения частей при наведении указателя мыши на статус / выкл. Значение по умолчанию это событие "щелчок".

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> вкладки JQuery UI (Вкладки) - При наведении указателя мыши на открытом </ название>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ({
      событие: "Mouseover"
    });
  });
  </ Script>
</ Head>
<Body>
 
<DIV ID = "Вкладки">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin Dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean лациния </a> </ li>
  </ UL>
  <DIV ID = "Вкладки-1">
    <P> Proin Элит arcu, rutrum Commodo, vehicula Tempus, Commodo а, пзиз. Curabitur включенные в другие группировки arcu. Донец sollicitudin мили сидят Амет mauris. Нам Elementum Квам ullamcorper анте. Etiam aliquet Massa и др Lorem. Mauris dapibus Lacus auctor пзиз. Aenean TEMPOR ullamcorper Лев. Vivamus СЕПГ магна Quis язычок eleifend adipiscing. DUIs Орси. aliquam sodales tortor Vitae Ipsum. aliquam Nulla. DUIs aliquam molestie Erat. Ut и др mauris Vel Pede Varius sollicitudin. СЭД ут Dolor включенными в другие группировки Орси tincidunt interdum. Phasellus Ipsum. Nunc tristique Tempus Lectus . </ p>
  </ Div>
  <DIV ID = "Вкладки-2">
    <P> Morbi tincidunt, дуй сидеть Амет facilisis feugiat, Одио Метус gravida анте, ут pharetra Massa Метус ID пипс. DUIs scelerisque molestie turpis. Sed Fringilla, Massa Eget luctus malesuada, Метус эрос molestie Lectus, ут Tempus эрос Massa ут Dolor. Aenean aliquet Fringilla СЭМ. Suspendisse СЭД язычка в язычок suscipit aliquam. Связаться с Нами в эрос преддверия ми adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat пипс. Aenean Vel Метус. Ut Дознание viverra Nulla. aliquam Erat volutpat. Pellentesque convallis. Меценат feugiat, Tellus pellentesque Pretium Дознание, Felis Lorem euismod Felis, ес ornare Лев НИСИ VEL Felis. Mauris consectetur tortor и др Purus. </ p>
  </ Div>
  <DIV ID = "Вкладки-3">
    <P> Mauris eleifend Эст и др turpis. DUIs ID Erat. Suspendisse Potenti. Aliquam vulputate, Pede Vel vehicula accumsan, ми neque rutrum Erat, ес congue Орси Lorem Eget Lorem. Преддверия не анте. Класс aptent taciti sociosqu объявление litora torquent в conubia ностра , в inceptos himenaeos. Fusce sodales. Quisque ес Урна Vel enim Commodo pellentesque. Связаться с Нами ЕС Risus hendrerit Tempus Pretium язычок. Curabitur Lorem enim, Pretium включенные в другие группировки, feugiat включенные в другие группировки, luctus а, Lacus. </ p>
    <P> DUIs Cursus. Меценат Ligula эрос, blandit включенные в другие группировки, pharetra на, зетрег на, Магна. Nullam AC Lacus. Nulla facilisi. Связаться с Нами viverra Justo Vitae neque. Связаться с Нами blandit adipiscing велит. Suspendisse Potenti. Донец Маттис, Pede Vel pharetra blandit, магна язычок faucibus эроса, ID euismod Lacus Dolor Eget Одио. Нам scelerisque. Донец не либеро СЕПГ Nulla Маттис Commodo. Ut sagittis. Донец НИСИ Lectus, feugiat porttitor, TEMPOR ас, TEMPOR Vitae, Pede. Aenean vehicula велит ес Tellus interdum rutrum. Меценат Commodo. Pellentesque включенных в другие категории Элит. Fusce в Lacus. Vivamus либеро Vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

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

Простота в эксплуатации

Просто добавлять и удалять вкладки.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> вкладки JQuery UI (Вкладки) - простая операция </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #dialog этикетки, #dialog вход {дисплей: блок;}
  #dialog метка {маржа-топ: 0.5em;}
  #dialog вход, #dialog TextArea {ширина: 95%;}
  #tabs {маржа-топ: 1em;}
  #tabs Ли .ui-значок-закрыть {поплавок: слева; поле: 0.4em 0.2em 0 0; курсор: указатель;}
  #add_tab {курсор: указатель;}
  </ Style>
  <Script>
  $ (Function () {
    переменная tabTitle = $ ( "#tab_title"),
      tabContent = $ ( "#tab_content"),
      tabTemplate = "<li> <a href='#{href}'> # {метка} </a> <SPAN класс = 'Пользовательский интерфейс-значок UI-значок-закрыть' Роль = 'презентации'> Удалить вкладку </ SPAN > </ li> ",
      tabCounter = 2;
 
    Вкладки вар = $ ( "#tabs") .tabs ();
 
    // Инициализировать модальное диалоговое окно: кнопки и внутреннюю форму сброса "закрыть" Диалог обратного вызова переменная = $ ( "#dialog") .dialog Настройка ({
      AutoOpen: ложь,
      модальный: правда,
      Кнопки: {
        Добавить: функция () {
          addTab ();
          $ (Это) .dialog ( "закрыть");
        },
        Отмена: функция () {
          $ (Это) .dialog ( "закрыть");
        }
      },
      близко: функция () {
        образуют [0] .RESET ();
      }
    });
 
    // AddTab форма: Вызывается при подаче функции addTab и закрыть диалоговое окно VAR форма = dialog.find ( "форма") .submit (функция (событие) {
      addTab ();
      dialog.dialog ( "закрыть");
      event.preventDefault ();
    });
 
    // Реальная функция addTab: Используйте форму выше, чтобы добавить новую вкладку функции входа addTab () {
      вар метка = tabTitle.val () || "Tab" + tabCounter,
        ID = "tabs-" + tabCounter,
        Li = $ (tabTemplate.replace (/ # \ {HREF \} / г, "#" + ID) .Надеть (/ # \ {метка \} / г, этикетка)),
        tabContentHtml = tabContent.val () || "Tab" + tabCounter + "содержание.";
 
      tabs.find ( ".ui-табс-нав") .append (л);
      tabs.append ( "<DIV ID = '" + ID + "'> <p>" + tabContentHtml + "</ p> </ DIV>");
      tabs.tabs ( "Обновить");
      tabCounter ++;
    }
 
    // Кнопка AddTab: Значение открытого диалогового окна $ ( "#add_tab")
      .button ()
      .click (функция () {
        dialog.dialog ( "открыть");
      });
 
    // Закрыть Значок: Удалить вкладку tabs.delegate ( "span.ui-значок-закрыть" при нажатии на "щелчок", функция () {
      переменная panelId = $ (это) .closest ( "Ли") .remove () атр ( "ARIA-контроль") .;
      $ ( "#" + PanelId) .remove ();
      tabs.tabs ( "Обновить");
    });
 
    tabs.bind ( "KeyUp", функция (событие) {
      если (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
        . Var panelId = tabs.find ( ".ui-табс-активные") .remove () атр ( "ARIA-контроль»);
        $ ( "#" + PanelId) .remove ();
        tabs.tabs ( "Обновить");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "Диалог" название = "Данные Вкладка">
  <Форма>
    <Fieldset класс = "пользовательский интерфейс-хелперов-сброс">
      <Ярлык = "TAB_TITLE"> Название </ метка>
      <Тип входного = "текст" имя = "TAB_TITLE" ID = "TAB_TITLE" значение = "" класс = "UI-виджета-контента UI-краеугольный все">
      <Ярлык = "tab_content"> Содержание </ метка>
      <Имя Textarea = "tab_content" ID = "tab_content" класс = "UI-виджета-контента UI-краеугольный все"> </ TextArea>
    </ Fieldset>
  </ Форма>
</ Div>
 
Кнопка <ID = "add_tab"> Добавить вкладку </ Кнопка>
 
<DIV ID = "Вкладки">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> <класс диапазон = "UI-значок UI-значок-закрыть" Роль = "презентации"> вкладка Удалить </ SPAN> </ li>
  </ UL>
  <DIV ID = "Вкладки-1">
    <P> Proin Элит arcu, rutrum Commodo, vehicula Tempus, Commodo а, пзиз. Curabitur включенные в другие группировки arcu. Донец sollicitudin мили сидят Амет mauris. Нам Elementum Квам ullamcorper анте. Etiam aliquet Massa и др Lorem. Mauris dapibus Lacus auctor пзиз. Aenean TEMPOR ullamcorper Лев. Vivamus СЕПГ магна Quis язычок eleifend adipiscing. DUIs Орси. aliquam sodales tortor Vitae Ipsum. aliquam Nulla. DUIs aliquam molestie Erat. Ut и др mauris Vel Pede Varius sollicitudin. СЭД ут Dolor включенными в другие группировки Орси tincidunt interdum. Phasellus Ipsum. Nunc tristique Tempus Lectus . </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

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

Сортировка (Сортируемый)

Вкладки Перетащите выше, чтобы изменить их порядок.

Просто позвоните на .ui-tabs-nav элемент на .sortable() , вы можете позволить сортируемых вкладки.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> вкладки JQuery UI (Вкладки) - сортировка (Сортируемый) </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    Вкладки вар = $ ( "#tabs") .tabs ();
    tabs.find ( ".ui-табс-нав") .sortable ({
      ось: "х",
      остановка: функция () {
        tabs.tabs ( "Обновить");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<DIV ID = "Вкладки">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin Dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean лациния </a> </ li>
  </ UL>
  <DIV ID = "Вкладки-1">
    <P> Proin Элит arcu, rutrum Commodo, vehicula Tempus, Commodo а, пзиз. Curabitur включенные в другие группировки arcu. Донец sollicitudin мили сидят Амет mauris. Нам Elementum Квам ullamcorper анте. Etiam aliquet Massa и др Lorem. Mauris dapibus Lacus auctor пзиз. Aenean TEMPOR ullamcorper Лев. Vivamus СЕПГ магна Quis язычок eleifend adipiscing. DUIs Орси. aliquam sodales tortor Vitae Ipsum. aliquam Nulla. DUIs aliquam molestie Erat. Ut и др mauris Vel Pede Varius sollicitudin. СЭД ут Dolor включенными в другие группировки Орси tincidunt interdum. Phasellus Ipsum. Nunc tristique Tempus Lectus . </ p>
  </ Div>
  <DIV ID = "Вкладки-2">
    <P> Morbi tincidunt, дуй сидеть Амет facilisis feugiat, Одио Метус gravida анте, ут pharetra Massa Метус ID пипс. DUIs scelerisque molestie turpis. Sed Fringilla, Massa Eget luctus malesuada, Метус эрос molestie Lectus, ут Tempus эрос Massa ут Dolor. Aenean aliquet Fringilla СЭМ. Suspendisse СЭД язычка в язычок suscipit aliquam. Связаться с Нами в эрос преддверия ми adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat пипс. Aenean Vel Метус. Ut Дознание viverra Nulla. aliquam Erat volutpat. pellentesque convallis. Меценат feugiat, Tellus pellentesque Pretium Дознание, Felis Lorem euismod Felis, ес ornare Лев НИСИ VEL Felis. Mauris consectetur tortor и др Purus. </ p>
  </ Div>
  <DIV ID = "Вкладки-3">
    <P> Mauris eleifend Эст и др turpis. DUIs ID Erat. Suspendisse Potenti. Aliquam vulputate, Pede Vel vehicula accumsan, ми neque rutrum Erat, ес congue Орси Lorem Eget Lorem. Преддверия не анте. Класс aptent taciti sociosqu объявление litora torquent в conubia ностра , в inceptos himenaeos. Fusce sodales. Quisque ес Урна Vel enim Commodo pellentesque. Связаться с Нами ЕС Risus hendrerit Tempus Pretium язычок. Curabitur Lorem enim, Pretium включенные в другие группировки, feugiat включенные в другие группировки, luctus а, Lacus. </ p>
    <P> DUIs Cursus. Меценат Ligula эрос, blandit включенные в другие группировки, pharetra на, зетрег на, Магна. Nullam AC Lacus. Nulla facilisi. Связаться с Нами viverra Justo Vitae neque. Связаться с Нами blandit adipiscing велит. Suspendisse Potenti. Донец Маттис, Pede Vel pharetra blandit, магна язычок faucibus эроса, ID euismod Lacus Dolor Eget Одио. Нам scelerisque. Донец не либеро СЕПГ Nulla Маттис Commodo. Ut sagittis. Донец НИСИ Lectus, feugiat porttitor, TEMPOR ас, TEMPOR Vitae, Pede. Aenean vehicula велит ес Tellus interdum rutrum. Меценат Commodo. Pellentesque включенных в другие категории Элит. Fusce в Lacus. Vivamus либеро Vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

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

В нижней части вкладки

С некоторыми дополнительными CSS (для позиционирования) и JS (помещенного в правильном элемента класса), вкладки Jieke в нижней части содержания.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI вкладки (Tabs) - в нижней части страницы, на вкладке </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ();
 
    // Изменить класс
    $ ( ".tabs Дна .ui-табс-нав, .tabs дном .ui-Вкладки-нав> *")
      .removeClass ( "UI-краеугольный все UI-угловой-топ")
      .addClass ( "Пользовательский интерфейс угла сверху вниз");
 
    Мобильная навигация в концевой части // $ ( ".tabs дном .ui-табс-нав") .appendTo ( ".tabs-дно»);
  });
  </ Script>
  <Style>
  / * Принудительный высоту, так что вкладка не изменяется с высотой содержания изменяется * /
  #tabs .tabs-проставка {поплавок: слева; высота: 200px;}
  .tabs дном .ui-табс-нав {ясно: слева; обивка: 0 .2em .2em .2em;}
  .tabs дном .ui-табс-нав Li {верх: авто; снизу: 0; маржа: 0 .2em 1px 0; граница дна: авто; границы сверху: 0;}
  .tabs дном .ui-табс-Nav li.ui-табс-активные {маржа-топ: -1px; обивка-топ: 1px;}
  </ Style>
</ Head>
<Body>
 
<Div ID = "Вкладки" класс = "Вкладки дном">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin Dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean лациния </a> </ li>
  </ UL>
  <Div класс = "Вкладки-спейсер"> </ DIV>
  <DIV ID = "Вкладки-1">
    <P> Proin Элит arcu, rutrum Commodo, vehicula Tempus, Commodo а, пзиз. Curabitur включенные в другие группировки arcu. Донец sollicitudin мили сидят Амет mauris. Нам Elementum Квам ullamcorper анте. Etiam aliquet Massa и др Lorem. Mauris dapibus Lacus auctor пзиз. Aenean TEMPOR ullamcorper Лев. Vivamus СЕПГ магна Quis язычок eleifend adipiscing. DUIs Орси. aliquam sodales tortor Vitae Ipsum. aliquam Nulla. DUIs aliquam molestie Erat. Ut и др mauris Vel Pede Varius sollicitudin. СЭД ут Dolor включенными в другие группировки Орси tincidunt interdum. Phasellus Ipsum. Nunc tristique Tempus Lectus . </ p>
  </ Div>
  <DIV ID = "Вкладки-2">
    <P> Morbi tincidunt, дуй сидеть Амет facilisis feugiat, Одио Метус gravida анте, ут pharetra Massa Метус ID пипс. DUIs scelerisque molestie turpis. Sed Fringilla, Massa Eget luctus malesuada, Метус эрос molestie Lectus, ут Tempus эрос Massa ут Dolor. Aenean aliquet Fringilla СЭМ. Suspendisse СЭД язычка в язычок suscipit aliquam. Связаться с Нами в эрос преддверия ми adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat пипс. Aenean Vel Метус. Ut Дознание viverra Nulla. aliquam Erat volutpat. pellentesque convallis. Меценат feugiat, Tellus pellentesque Pretium Дознание, Felis Lorem euismod Felis, ес ornare Лев НИСИ VEL Felis. Mauris consectetur tortor и др Purus. </ p>
  </ Div>
  <DIV ID = "Вкладки-3">
    <P> Mauris eleifend Эст и др turpis. DUIs ID Erat. Suspendisse Potenti. Aliquam vulputate, Pede Vel vehicula accumsan, ми neque rutrum Erat, ес congue Орси Lorem Eget Lorem. Преддверия не анте. Класс aptent taciti sociosqu объявление litora torquent в conubia ностра , в inceptos himenaeos. Fusce sodales. Quisque ес Урна Vel enim Commodo pellentesque. Связаться с Нами ЕС Risus hendrerit Tempus Pretium язычок. Curabitur Lorem enim, Pretium включенные в другие группировки, feugiat включенные в другие группировки, luctus а, Lacus. </ p>
    <P> DUIs Cursus. Меценат Ligula эрос, blandit включенные в другие группировки, pharetra на, зетрег на, Магна. Nullam AC Lacus. Nulla facilisi. Связаться с Нами viverra Justo Vitae neque. Связаться с Нами blandit adipiscing велит. Suspendisse Potenti. Донец Маттис, Pede Vel pharetra blandit, магна язычок faucibus эроса, ID euismod Lacus Dolor Eget Одио. Нам scelerisque. Донец не либеро СЕПГ Nulla Маттис Commodo. Ut sagittis. Донец НИСИ Lectus, feugiat porttitor, TEMPOR ас, TEMPOR Vitae, Pede. Aenean vehicula велит ес Tellus interdum rutrum. Меценат Commodo. Pellentesque включенных в другие категории Элит. Fusce в Lacus. Vivamus либеро Vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

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

Вертикальные вкладки

Перейдите на вкладку для переключения делится на другую логическую часть содержания.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI вкладки (Tabs) - вертикальные вкладки </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs () AddClass ( "UI-Вкладки-вертикальные пользовательский интерфейс-хелперов-clearfix") .;
    $ ( "#tabs Ли") .removeClass ( "UI-угловой-топ") .addClass ( "Пользовательский интерфейс угла налево");
  });
  </ Script>
  <Style>
  .ui-табс-вертикали {ширина: 55em;}
  .ui-табс-вертикальные .ui-табс-нав {обивка: .2em .1em .2em .2em; флоат: слева; ширина: 12em;}
  .ui-табс-вертикальные .ui-табс-нав Li {ясно: левый; ширина: 100%; границы дна ширины: 1px важным, пограничный правый ширина :! 0 важное значение; запас :! 0 -1px .2em 0;
  .ui-табс-вертикальной .ui-табс-нав Ли а {дисплей: блок;}
  .ui-табс-вертикальные .ui-табс-Nav li.ui-табс-активные {набивка дном: 0; обивка-направо: .1em; границы правой ширина: 1px; границы правой ширина: 1px;}
  .ui-табс-вертикальные .ui-табс-панель {обивка: 1em; флоат: справа; ширина: 40em;}
  </ Style>
</ Head>
<Body>
 
<DIV ID = "Вкладки">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin Dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean лациния </a> </ li>
  </ UL>
  <DIV ID = "Вкладки-1">
    <H2> Содержание Заголовок 1 </ h2>
    <P> Proin Элит arcu, rutrum Commodo, vehicula Tempus, Commodo а, пзиз. Curabitur включенные в другие группировки arcu. Донец sollicitudin мили сидят Амет mauris. Нам Elementum Квам ullamcorper анте. Etiam aliquet Massa и др Lorem. Mauris dapibus Lacus auctor пзиз. Aenean TEMPOR ullamcorper Лев. Vivamus СЕПГ магна Quis язычок eleifend adipiscing. DUIs Орси. aliquam sodales tortor Vitae Ipsum. aliquam Nulla. DUIs aliquam molestie Erat. Ut и др mauris Vel Pede Varius sollicitudin. СЭД ут Dolor включенными в другие группировки Орси tincidunt interdum. Phasellus Ipsum. Nunc tristique Tempus Lectus . </ p>
  </ Div>
  <DIV ID = "Вкладки-2">
    <H2> название Содержание 2 </ h2>
    <P> Morbi tincidunt, дуй сидеть Амет facilisis feugiat, Одио Метус gravida анте, ут pharetra Massa Метус ID пипс. DUIs scelerisque molestie turpis. Sed Fringilla, Massa Eget luctus malesuada, Метус эрос molestie Lectus, ут Tempus эрос Massa ут Dolor. Aenean aliquet Fringilla СЭМ. Suspendisse СЭД язычка в язычок suscipit aliquam. Связаться с Нами в эрос преддверия ми adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat пипс. Aenean Vel Метус. Ut Дознание viverra Nulla. aliquam Erat volutpat. Pellentesque convallis. Меценат feugiat, Tellus pellentesque Pretium Дознание, Felis Lorem euismod Felis, ес ornare Лев НИСИ VEL Felis. Mauris consectetur tortor и др Purus. </ p>
  </ Div>
  <DIV ID = "Вкладки-3">
    <H2> Содержание Название 3 </ h2>
    <P> Mauris eleifend Эст и др turpis. DUIs ID Erat. Suspendisse Potenti. Aliquam vulputate, Pede Vel vehicula accumsan, ми neque rutrum Erat, ес congue Орси Lorem Eget Lorem. Преддверия не анте. Класс aptent taciti sociosqu объявление litora torquent в conubia ностра , в inceptos himenaeos. Fusce sodales. Quisque ес Урна Vel enim Commodo pellentesque. Связаться с Нами ЕС Risus hendrerit Tempus Pretium язычок. Curabitur Lorem enim, Pretium включенные в другие группировки, feugiat включенные в другие группировки, luctus а, Lacus. </ p>
    <P> DUIs Cursus. Меценат Ligula эрос, blandit включенные в другие группировки, pharetra на, зетрег на, Магна. Nullam AC Lacus. Nulla facilisi. Связаться с Нами viverra Justo Vitae neque. Связаться с Нами blandit adipiscing велит. Suspendisse Potenti. Донец Маттис, Pede Vel pharetra blandit, магна язычок faucibus эроса, ID euismod Lacus Dolor Eget Одио. Нам scelerisque. Донец не либеро СЕПГ Nulla Маттис Commodo. Ut sagittis. Донец НИСИ Lectus, feugiat porttitor, TEMPOR ас, TEMPOR Vitae, Pede. Aenean vehicula велит ес Tellus interdum rutrum. Меценат Commodo. Pellentesque включенных в другие категории Элит. Fusce в Lacus. Vivamus либеро Vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

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

Предыдущий: Пример JQuery UI - ротатор (Spinner)

Далее: Jquery UI пример - подсказке окно (подсказке)

jQuery UI курс

jQuery UI тема

jQuery UI Библиотека компонентов

jQuery UI справочное руководство

jQuery UI примеров

JQuery UI пример - вкладки (Tabs)

По умолчанию функция

Складные содержание

Получить контент с помощью Ajax

Открыть при наведении мыши

Простота в эксплуатации

Сортировка (Сортируемый)

В нижней части вкладки

Вертикальные вкладки