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

Ответ 1

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

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

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

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

В вашей функции handle_tab_click() будет указан аргумент события, который сможет предоставить вам информацию об элементе, который запустил событие (в этом случае элемент с именем класса 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

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

$.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 здесь, а функции JQuery ajax здесь

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

Удачи.

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Он поддерживает вкладки ajax.