widget layout jQuery EasyUI - / tab tab Tabs

Fiez

• panneau
• linkbutton

usage

Créer des onglets (onglets)

1. Créez un onglet en marquage (onglets)

Onglet Créer de la balise (Tabs) plus facile, on n'a pas besoin d'écrire du code JavaScript. Rappelez-vous d'ajouter la classe 'easyui-onglets de la balise <div>. Chaque conseil de page d'étiquette (onglet du panneau) a été créé par la sous-balise <div>, son utilisation et le panneau (panneau) de la même.

<Div id = classe "tt" style = "easyui-onglets" = "width: 500px; height: 250px;">
    <Div title = style "Tab1" = "padding: 20px; display: none;">
		tab1
    </ Div>
    <Title = "Div Tab2" data-options = "refermable: true" style = "overflow: auto; padding: 20px; display: none;">
		tab2
    </ Div>
    <div title = "tab3" data-options = "iconCls:" icon-reload », refermable: true" style = "padding: 20px; display: none;">
		tab3
    </ Div>
</ Div>

2, créer par programme onglets (onglets)

Nous créons maintenant programme onglets (onglets), nous attrapons aussi l'événement 'onSelect'.

$ ( '# Tt') Tabs. ({
    frontière: false,
    onSelect: function (titre) {
		alerte (titre + 'est sélectionné');
    }
});

Ajouter une nouvelle plaque de page balises (onglet du panneau)

Ajouter une nouvelle plaque balise page (onglet du panneau) à travers un mini outil Mini icône de l'outil (8x8) placé devant le bouton Fermer.

// Ajouter une nouvelle plaque onglet de page (onglet du panneau)
$ ( '# Tt'). Tabs ( 'ajouter', {
    titre: «Nouvel onglet»,
    contenu: 'Tab Body',
    refermable: true,
    outils: [{
		iconCls: «icon-mini-refresh ',
		gestionnaire: function () {
			alert ( 'refresh');
		}
    }]
});

Obtenez l'onglet sélectionné (Tab)

// Obtenir la plaque de page de l'onglet sélectionné (onglet du panneau) et ses onglets (onglet) objets var pp = $ ( '# tt') onglets ( 'GetSelected') .;
onglet var = pp.panel ( «options») onglet ;. // onglets correspondants (onglet) Objet 

propriété

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

événement

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

manière

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

Mots-clefs Page plaque (panneau d'onglets)

Tag page carte (onglet panel) propriété est définie dans le composant panneau (panneau), les éléments suivants sont des attributs communs.

Certains attributs supplémentaires.