Наши контакты:
Обратная связь:
 
jQuery UI – виджет Tabs

Виджет Tabs помогает разделить информационное наполнение между несколькими вкладками. Это может быть полезно при дефиците свободного места на веб-странице. Информационное наполнение вкладок может быть загружено с помощью ajax-запроса.


Опции виджета Tabs:

ajaxOptions – опции ajax-запроса, которые используются для загрузки удаленного содержимого в область информационного наполнения. По умолчанию используется значение null.

cache – опция определяет, кэшировать или нет информационное наполнение вкладки, загружаемое с помощью ajax-запросов, т.е. загрузить содержимое только однажды или загружать каждый раз, когда совершен щелчок на ярлыке вкладки. По умолчанию используется значение false, т.е. кэширование не производится. Обратите внимание – чтобы воспрепятствовать фактическому кэшированию данных браузером Вы должны дополнительно обеспечить значение false в опциях самого ajax-запроса.

collapsible – по умолчанию используется значение false. Если передать в этой опции значение true, то каждый следующий щелчок на ярлыке вкладки будет скрывать и открывать область информационного наполнения.

cookie – запоминает последнюю выбранную вкладку в cookie. В дальнейшем используется для определения вкладки, открываемой по умолчанию (если не используется опция selected). Требует подключения плагина cookie. Возможно присвоение имени cookie через опцию name.

disabled – массив, содержащий индексы вкладок (отсчет ведется от 0), которые должны быть недоступными при инициализации виджета. Например, disabled: [1, 2] сделает недоступными вторую и третью вкладки.

event – тип события, которое используется для переключения вкладок. По умолчанию используется значение ‘click’. Второе возможное значение ‘mouseover’.

fx – устанавливает анимационные эффекты при открытии/закрытии вкладок. Например: fx: { opacity: «toggle», duration: «slow» }

panelTemplate – HTML-шаблон из которого создается новая область информационного наполнения вкладки в случае создания ее с использованием метода add или при создании вкладки «на лету» с использованием ajax-запроса. По умолчанию имеет значение ‘

selected – индекс вкладки, (отсчет ведется от 0) которая должна быть открыта при инициализации виджета. По умолчанию используется значение 0, т.е. открывается первая вкладка. Чтобы сделать невыбранными все вкладки, надо использовать значение -1.

spinner – HTML-код, указанный в этой строке, отображается на ярлыке вкладки во время загрузки удаленного содержимого в область информационного наполнения. Если передать пустую строку, эта возможность будет деактивирована. По умолчанию используется Loading.

tabTemplate – HTML-шаблон из которого создаются новые ярлыки вкладок в случае создания их с использованием метода add. #{href} and #{label} заменяются url’ом и названием вкладки, переданными в аргументах метода add. По умолчанию имеет значение ‘


Описания событий виджета Tabs:

select – событие tabsselect происходит в момент щелчка по ярлыку вкладки (при наведении указателя мыши на вкладку, если используется опция event: ‘mouseover’). При щелчке на ярлыке активной вкладки ничего не происходит.

load – событие tabsload происходит, когда в область информационного наполнения вкладки было загружено содержимое из внешнего файла.

show – событие tabsshow происходит в момент отображения содержимого вкладки.

add – событие tabsadd происходит каждый раз, когда добавлена новая вкладка.

remove – событие tabsremove происходит каждый раз, когда удалена какая-либо вкладка.

enable – событие tabsenable происходит в момент, когда ранее недоступная вкладка становится доступной.

disable – событие tabsdisable происходит в момент, когда вкладка становится недоступной.


Методы виджета Tabs:

destroy
– .tabs(‘destroy’) полностью удаляет всю функциональность виджета Tabs. Возвращает элементы в состояние, предшествующее инициализации.

disable – .tabs(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .tabs(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

option – .tabs(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

add – .tabs(‘add’, url, label, [index]) метод добавляет новую вкладку. Второй аргумент содержит либо идентификатор создаваемой вкладки, (см. требования к разметке) либо является полным url (относительным или абсолютным, но без поддержки кросс-доменной загрузки) при создании вкладки с использованием ajax. Третий аргумент – название вкладки, отображаемое на ее ярлыке. Четвертый – индекс создаваемой вкладки (позиции отсчитываются от 0).

remove – .tabs(‘remove’, index ) удаляет вкладку. Второй аргумент – индекс удаляемой вкладки (позиции отсчитываются от 0).

enable – .tabs(‘enable’, index) делает доступной ранее недоступную вкладку. Чтобы сделать доступными одновременно несколько вкладок сделайте так: $(‘#tabs’).data(‘disabled.tabs’, [ ]);

disable – .tabs(‘disable’, index) делает вкладку недоступной. Активная вкладка не может быть сделана недоступной. Чтобы сделать недоступными одновременно несколько вкладок сделайте так: $(‘#tabs’).data(‘disabled.tabs’, [1, 2, 3]);

select – .tabs(’select’, index) метод позволяет выбрать вкладку так, как будто был сделан щелчок по ее ярлыку. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0). Он же может быть идентификатором вкладки (см. требования к разметке).

load – .tabs(‘load’, index) программно перезагружает содержимое вкладки, используя ajax-запрос. Этот метод всегда загружает содержимое, даже если опция cache имеет значение true. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0).

url – .tabs(‘url’, index, url) изменяет url, откуда с помощью ajax-запроса будет загружаться содержимое. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0). Указанный в третьем аргументе url будет использоваться и для дальнейших загрузок.

length – .tabs(‘length’) метод просто возвращает количество вкладок.

abort – .tabs(‘abort’) метод завершает все выполняющиеся ajax-запросы и анимацию.

rotate – .tabs(‘rotate’, ms, [continuing]) метод устанавливает автоматический перебор всех вкладок. Второй аргумент – количество миллисекунд, в течение которых очередная вкладка будет активной. Чтобы остановить перебор вкладок во втором аргументе необходимо передать 0 или null. Третий аргумент определяет логику при выборе вкладки пользователем. Значение true – перебор вкладок будет продолжен. По умолчанию используется false.