control disposición jQuery EasyUI - pestaña / pestaña aquí

confiar

• panel
• LinkButton

uso

Crear pestañas (Tabs)

1. Crear una ficha marcando (aquí)

Crear pestaña de la etiqueta (aquí) más fácil, no es necesario escribir ningún código JavaScript. Recuerde que debe agregar la clase 'easyui-pestañas' a la etiqueta <div>. Cada tablero de la página de etiquetas (panel de pestañas) fue creado por la sub-etiqueta <div>, su uso y el panel (panel) de la misma.

<Id = clase "tt" Div = estilo "-pestañas easyui" = "width: 500px; altura: 250px;">
    <Title = estilo "Pestaña1" Div = "padding: 20px; display: none;">
		tab1
    </ Div>
    <Title = "Div" Sep2 de datos-options = "que se puede cerrar: true" style = "overflow: auto; padding: 20px; display: none;">
		Sep2
    </ Div>
    <div title = "" TAB3-Opciones de datos = "iconCls: 'icono-recarga', que se puede cerrar: true" style = "padding: 20px; display: none;">
		TAB3
    </ Div>
</ Div>

2, crear mediante programación pestañas (Tabs)

Ahora vamos a crear mediante programación pestañas (Tabs), que también capturan evento 'onSelect'.

$ ( '# Tt'). Tabs ({
    frontera: falso,
    onSelect: function (título) {
		alert ( 'se selecciona' título +);
    }
});

Añadir nueva placa página de etiquetas (panel de pestañas)

Añadir una nueva placa de página de la etiqueta (panel de pestañas) a través de mini herramienta de icono de la herramienta Mini (8x8) situada delante del botón Cerrar.

// Añadir una nueva placa de pestaña (panel de pestañas)
$ ( '# Tt'). Aquí (en 'Añadir', {
    Título: "Nueva pestaña ',
    contenido: 'Tab Cuerpo',
    que se puede cerrar: true,
    herramientas: [{
		iconCls: "-icono de mini-refresh ',
		manejador: function () {
			alert ( 'refresh');
		}
    }]
});

Obtener la ficha seleccionada (Tab)

// Obtener la placa de pestaña seleccionada (panel de pestañas) y sus pestañas (tab) objetos pp var = $ pestañas ( '# tt') ( 'GetSelected') .;
pestaña var = pp.panel ( 'Opciones') // ;. pestaña pestañas correspondientes (pestaña) Objeto 

propiedad

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

camino

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

placa página de etiquetas (Panel de pestañas)

La página de cartulina (panel de pestañas) propiedad se define en el componente de panel (panel), los siguientes son algunos atributos comunes.

Algunos atributos adicionales.