Вкладки jQuery - загрузка содержимого только при нажатии

Question

Я относительно новичок в jQuery и веб-разработке.

Я использую вкладки пользовательского интерфейса jQuery для создания вкладок.

Но я хочу, чтобы содержимое загружалось только при выборе определенной вкладки.

Answer 1

ОК, я предполагаю, что когда пользователь нажимает на вкладку, вы намереваетесь извлекать контент динамически, через AJAX. На самом деле это включает в себя две вещи: установка onclick даже для вашей вкладки и выборка данных через ajax .

Настройка события onclick

Дайте вашей вкладке класс, например my_tab . Скажем, когда пользователь нажимает на вкладку, вы хотите, чтобы сработала функция handle_tab_click () . Вот пример привязки события onclick к вашей вкладке my_tab :

$(".my_tab").bind("click", handle_tab_click);

Ваша функция handle_tab_click () получит аргумент event , который сможет предоставить вам информацию об элементе, вызвавшем событие (в данном случае элемент с имя класса my_tab ).

function (event) {
    if ($(event.target).hasClass("my_tab")) { /* handle tab click */ }
    if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ }
    if ($(event.target).hasClass("my_tab_3")) { /* ... */ }
}

Подробнее см. Документацию по JQuery здесь .

Загрузка данных через ajax

Для извлечения данных потребуется, чтобы вы вызвали удаленный сценарий, предоставляя информацию о том, на какой вкладке была нажата (чтобы получить соответствующую информацию). В следующем фрагменте мы вызываем удаленный скрипт myscript.php , предоставляя аргумент HTTP GET tab_clicked = my_tab и вызывая функцию tab_fetch_cb , когда скрипт возвращается. Последний параметр - это тип возвращаемых данных (выбор за вами).

$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml")

Вам нужно спроектировать myscript.php для обработки параметра tab_clicked , извлечь соответствующие данные и вернуть их (т.е. записать обратно клиенту).

Вот пример для tab_fetch_cb :

function tab_fetch_cb(data, status) {
    // populate your newly opened tab with information 
    // returned from myscript.php here
}

Вы можете узнать больше о функции JQuery get здесь и JJuery ajax здесь

Извините, я не могу быть более конкретным в своих примерах, но большая часть обработки действительно зависит от вашей задачи. Как это уже указывалось, вы можете обратиться к некоторым плагинам JQuery, чтобы найти готовое решение вашей проблемы. При этом никогда не помешает научиться делать это вручную с помощью JQuery.

Удачи.

Answer 2

Пользовательский интерфейс / вкладки поддерживают загрузку содержимого вкладок по запросу через Ajax, отметьте этот пример.

Answer 3

По умолчанию виджет вкладок будет переключаться между разделами с вкладками onClick, но события могут быть изменены на onHover через опцию. Содержимое вкладки можно загрузить через Ajax, установив href на вкладке.

источник: http://docs.jquery.com/UI/Tabs

Answer 4

Загрузка контента через Ajax добавляет сложность работы с закладками / кнопками браузера назад. В зависимости от вашей ситуации, вы должны рассмотреть возможность загрузки нового контента с полным запросом страницы. Обработка закладки / браузера обратно включает в себя добавление информации привязки в URL.

Кроме того, проверьте LavaLamp для выбора вкладки. Это довольно изящно выглядит.

Answer 5

Если вы используете Rails, вы можете попробовать этот гем bettertabs

Поддерживает вкладки ajax.