Плагин компоновки jQuery EasyUI -Вкладки


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 插件Плагин jQuery EasyUI Другие расширения