Widget de layout jQuery EasyUI - guia / guia Tabs

depender

• painel
• linkbutton

uso

Criar guias (Tabs)

1. Criar um guia por marcação (Tabs)

Criar guia do tag (Tabs) mais fácil, não precisa escrever qualquer código JavaScript. Lembre-se de adicionar a classe 'easyui-guias "para a tag <div>. Cada placa página de etiqueta (painel guia) foi criado pelo sub-tag <div>, a sua utilização e o painel (painel) do o mesmo.

<Div id = class "tt" = "easyui-tabs" style = "width: 500px; height: 250px;">
    <Div title = "Tab1" style = "padding: 20px; display: none;">
		tab1
    </ Div>
    <Título Div = "tab2"-opções de dados = "closable: true" style = "overflow: auto; padding: 20px; display: none;">
		tab2
    </ Div>
    <title =-opções de dados Div "Tab3" = "iconCls: 'icon-reload', que pode ser fechado: true" style = "padding: 20px; display: none;">
		Tab3
    </ Div>
</ Div>

2, programaticamente criar guias (Tabs)

Temos agora programaticamente criar guias (Tabs), nós também pegar evento 'onSelect'.

$ ( "# Tt '). Tabs ({
    border: false,
    onSelect: function (título) {
		alert (título + 'é selecionado');
    }
});

Adicionar nova placa tags página (painel guia)

Adicionar uma nova placa página tag (painel da guia), através de mini-ferramenta ícone da ferramenta Mini (8x8) colocado na frente do botão Fechar.

// Adicionar um novo prato separador de página (painel da guia)
$ ( "# Tt '). Tabs (' add ', {
    Título: 'Nova Página',
    conteúdo: 'Tab Body',
    closable: true,
    ferramentas: [{
		iconCls: 'icon-mini-refresh',
		handler: function () {
			alert ( 'refresh');
		}
    }]
});

Obter o guia selecionada (Tab)

// Obter a placa página da guia seleccionada (painel da guia) e suas abas (tab) objetos var pp = $ ( '# tt') guias ( 'getSelected') .;
var tab = pp.panel ( 'opções') separador ;. // guias correspondentes (guia) Objeto 

propriedade

$('#tt').tabs({
	tools:[{
		iconCls:'icon-add',
		handler:function(){
			alert('add')
		}
	},{
		iconCls:'icon-save',
		handler:function(){
			alert('save')
		}
	}]
});

$('#tt').tabs({
	tools:'#tab-tools'
});
<div id="tab-tools">
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>

evento

$('#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
  }
});

caminho

// add a unselected tab panel
$('#tt').tabs('add',{
	title: 'new tab',
	selected: false
	//...
});

var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);

// 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');

$('#tt').tabs('enableTab', 1);	// enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2');	enable the tab panel that has 'Tab2' title

$('#tt').tabs('disableTab', 1);	// disable the second tab panel.

// scroll the tab header to left
$('#tt').tabs('scroll', 10);

Etiquetas página placa (Painel Tab)

página da área de Tag (painel guia) propriedade é definida no componente de painel (painel), os seguintes são alguns atributos comuns.

Alguns atributos adicionais.