Плагин компоновки jQuery EasyUI -Вкладки
Плагин jQuery EasyUI
Переопределите значения по умолчанию с помощью $.fn.tabs.defaults.
Вкладки отображают набор панелей. Одновременно отображается только одна панель вкладки. Каждая панель вкладки имеет заголовок и несколько мини-кнопок инструментов, включая кнопку закрытия и другие настраиваемые кнопки.
Зависимости
- panel
- linkbutton
Использование
Создание вкладок
1. Создание вкладок с помощью разметки
Создание вкладок из разметки проще — не нужно писать никакого кода JavaScript. Не забудьте добавить класс 'easyui-tabs' к разметке <div>. Каждая панель вкладки создаётся через дочерний <div>, и её использование такое же, как у панели.
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
2. Создание вкладок программно
Теперь мы создаем вкладки программно и также перехватываем событие 'onSelect'.
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
Добавить новую панель вкладки
Добавить новую панель вкладки с помощью мини-инструмента; значок мини-инструмента (8x8) размещается перед кнопкой закрытия.
// 添加一个新的标签页面板(tab panel)
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
Получить выбранную вкладку
// 获取选中的标签页面板(tab panel)和它的标签页(tab)对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页(tab)对象
Свойства
| Name | Type | Описание | Default |
|---|---|---|---|
| width | число | Ширина контейнера вкладок. | auto |
| height | число | Высота контейнера вкладок. | auto |
| plain | логическое значение | Если установлено значение true, фоновое изображение контейнера не используется для отрисовки полосы вкладок. | false |
| fit | логическое значение | Если установлено значение true, размер контейнера вкладок устанавливается по размеру родительского контейнера. | false |
| border | логическое значение | Если установлено значение true, отображается граница контейнера вкладок. | истина |
| scrollIncrement | число | Количество пикселей для прокрутки при каждом нажатии кнопки прокрутки вкладок. | 100 |
| scrollDuration | число | Количество миллисекунд, которое должна длиться каждая анимация прокрутки. | 400 |
| tools | массив, селектор | Панель инструментов, размещённая слева или справа от заголовка. Возможные значения: 1. Массив, указывающий группу инструментов; параметры каждого инструмента такие же, как у кнопки-ссылки (Linkbutton). 2. Селектор, указывающий на <div>, содержащий инструменты. Примеры кода: Определение инструментов через массив.
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
Определение инструментов через существующий DOM-контейнер.
$('#tt').tabs({
tools:'#tab-tools'
});
<div id="tab-tools">
<a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
<a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
|
null |
| toolPosition | string | Позиция панели инструментов. Возможные значения: 'left', 'right'. Это свойство доступно начиная с версии 1.3.2. | right |
| tabPosition | string | Позиция вкладки. Возможные значения: 'top', 'bottom', 'left', 'right'. Это свойство доступно с версии 1.3.2. | top |
| headerWidth | число | Ширина заголовка вкладки. Действует только когда tabPosition установлен в 'left' или 'right'. Это свойство доступно с версии 1.3.2. | 150 |
| tabWidth | число | Ширина полосы вкладок. Это свойство доступно с версии 1.3.4. | auto |
| tabHeight | число | Высота полосы вкладок. Это свойство доступно с версии 1.3.4. | 27 |
| selected | число | Индекс изначально выбранной вкладки. Это свойство доступно с версии 1.3.5. | 0 |
| showHeader | логическое значение | Если установлено в true, отображать заголовок вкладки. Это свойство доступно с версии 1.3.5. | истина |
Events
| Name | Parameters | Описание |
|---|---|---|
| onLoad | panel | Срабатывает, когда ajax-панель вкладки завершает загрузку удалённых данных. |
| onSelect | title,index | Срабатывает, когда пользователь выбирает панель вкладки. |
| onUnselect | title,index | Срабатывает, когда пользователь отменяет выбор панели вкладки. Это событие доступно с версии 1.3.5. |
| onBeforeClose | title,index | Срабатывает перед закрытием панели вкладки. Верните false, чтобы отменить действие закрытия. В приведенном ниже примере показано, как отобразить диалог подтверждения перед закрытием панели вкладки.
$('#tt').tabs({
onBeforeClose: function(title){
return confirm('Are you sure you want to close ' + title);
}
});
// using the async confirm dialog
$('#tt').tabs({
onBeforeClose: function(title,index){
var target = this;
$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
if (r){
var opts = $(target).tabs('options');
var bc = opts.onBeforeClose;
opts.onBeforeClose = function(){}; // allowed to close now
$(target).tabs('close',index);
opts.onBeforeClose = bc; // restore the event function
}
});
return false; // prevent from closing
}
});
|
| onClose | title,index | Срабатывает, когда пользователь закрывает панель вкладки. |
| onAdd | title,index | Срабатывает при добавлении новой панели вкладки. |
| onUpdate | title,index | Срабатывает при обновлении панели вкладки. |
| onContextMenu | e, title,index | Срабатывает при щелчке правой кнопкой мыши по панели вкладки. |
Методы
| Name | Parameters | Описание |
|---|---|---|
| options | none | Возвращает параметры вкладок. |
| tabs | none | Возвращает все панели вкладок. |
| resize | none | Изменяет размер контейнера вкладок и выполняет компоновку. |
| добавьте | options | Добавляет новую панель вкладки. Параметр options — это объект конфигурации. Подробнее см. в свойствах панели вкладки. При добавлении новой панели вкладки она будет выбрана. Если вы хотите добавить невыбранную панель вкладки, не забудьте установить для свойства 'selected' значение false.
// add a unselected tab panel
$('#tt').tabs('add',{
title: 'new tab',
selected: false
//...
});
|
| close | which | Закрыть панель вкладки. Параметр 'which' может быть заголовком или индексом закрываемой панели вкладки. |
| getTab | which | Получить указанную панель вкладки. Параметр 'which' может быть заголовком или индексом панели вкладки. |
| getTabIndex | tab | Получить индекс указанной панели вкладки. |
| getSelected | none | Получить выбранную панель вкладки. В примере ниже показано, как получить индекс выбранной панели вкладки.
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
|
| select | which | Выбрать панель вкладки. Параметр 'which' может быть заголовком или индексом панели вкладки. |
| unselect | which | Выбрать панель вкладки. Параметр 'which' может быть заголовком или индексом панели вкладки. Этот метод доступен начиная с версии 1.3.5. |
| showHeader | none | Показать заголовок вкладок. Этот метод доступен начиная с версии 1.3.5. |
| hideHeader | none | Скрыть заголовок вкладок. Этот метод доступен начиная с версии 1.3.5. |
| существует | which | Указывает, существует ли уже указанная панель. Параметр 'which' может быть заголовком или индексом панели вкладок. |
| update | param | Обновляет указанную панель вкладок. Параметр param содержит два свойства: tab: панель вкладок, которую нужно обновить. options: параметры панели. Пример кода:
// update the selected panel with new title and content
var tab = $('#tt').tabs('getSelected'); // get selected panel
$('#tt').tabs('update', {
tab: tab,
options: {
title: 'New Title',
href: 'get_content.php' // the new content URL
}
});
// call 'refresh' method for tab panel to update its content
var tab = $('#tt').tabs('getSelected'); // get selected panel
tab.panel('refresh', 'get_content.php');
|
| enableTab | which | Включает указанную панель вкладок. Параметр 'which' может быть заголовком или индексом панели вкладок. Этот метод доступен начиная с версии 1.3. Пример кода:
$('#tt').tabs('enableTab', 1); // enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title
|
| disableTab | which | Отключает указанную панель вкладок. Параметр 'which' может быть заголовком или индексом панели вкладок. Этот метод доступен начиная с версии 1.3. Пример кода:
$('#tt').tabs('disableTab', 1); // disable the second tab panel.
|
| scrollBy | deltaX | Прокручивает заголовок вкладок на указанное число пикселей. Отрицательное значение прокручивает вправо, положительное значение прокручивает влево. Этот метод доступен начиная с версии 1.3.2. Пример кода:
// scroll the tab header to left
$('#tt').tabs('scroll', 10);
|
Панель вкладок
Свойства панели вкладок определяются в компоненте panel. Ниже приведены некоторые часто используемые свойства.
| Name | Type | Описание | Default |
|---|---|---|---|
| id | string | Свойство id панели вкладки. | null |
| title | string | Текст заголовка панели вкладки. | |
| content | string | Содержимое панели вкладки. | |
| href | string | URL-адрес для загрузки удалённого содержимого для заполнения панели вкладки. | null |
| cache | логическое значение | Если задано значение true, панель вкладки кэшируется, когда установлен корректный атрибут href. | истина |
| iconCls | string | CSS-класс значка, отображаемого в заголовке панели вкладки. | null |
| width | число | Ширина панели вкладки. | auto |
| height | число | Высота панели вкладки. | auto |
| collapsible | логическое значение | Если задано значение true, позволяет сделать панель вкладки сворачиваемой. | false |
Некоторые дополнительные атрибуты.
| Name | Type | Описание | Значение по умолчанию |
|---|---|---|---|
| closable | логическое значение | Если задано значение true, панель вкладки будет отображать кнопку закрытия; нажатие на неё позволяет закрыть панель вкладки. | false |
| selected | логическое значение | Если задано значение true, панель вкладки будет выбрана. | false |
Плагин jQuery EasyUI Другие расширения