it-swarm.com.ru

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

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

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

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

15
aLL0i

Хорошо, я предполагаю, что когда пользователь нажимает на вкладку, вы намереваетесь извлекать контент динамически, через 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

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

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

Удачи.

28
wilsoniya

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

14
CMS

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

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

1
Som

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

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

1
ajma

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

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

0
Zack Xu