jQuery EasyUI Layout Plugin -Onglets

jQuery EasyUI 插件jQuery EasyUI Plugin

Surcharger les valeurs par défaut via $.fn.tabs.defaults.

Les onglets affichent un ensemble de panneaux. Ils n'affichent qu'un seul panneau d'onglet à la fois. Chaque panneau d'onglet possède un titre d'en-tête et quelques mini-boutons d'outils, notamment un bouton de fermeture et d'autres boutons personnalisés.

Dépendances

  • panel
  • linkbutton

Utilisation

Créer des onglets

1. Création d'onglets via le balisage

Créer des onglets à partir du balisage est plus facile, nous n'avons pas besoin d'écrire de code JavaScript. N'oubliez pas d'ajouter la classe 'easyui-tabs' au balisage <div>. Chaque panneau d'onglet est créé via un balisage <div> enfant, et son utilisation est la même que celle du panneau.

<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. Création d'onglets par programmation

Nous créons maintenant des onglets par programmation, et nous capturons également l'événement 'onSelect'.

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

Ajouter un nouveau panneau d'onglet

Ajouter un nouveau panneau d'onglet via un mini outil, l'icône du mini outil (8x8) est placée avant le bouton de fermeture.

// 添加一个新的标签页面板（tab panel）
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
            alert('refresh');
        }
    }]
});

Obtenir l'onglet sélectionné

// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页（tab）对象

Propriétés

Name Type Description Default
width nombre La largeur du conteneur d'onglets. auto
height nombre La hauteur du conteneur d'onglets. auto
plain booléen Lorsqu'il est défini sur true, aucune image d'arrière-plan du conteneur n'est utilisée pour afficher la bande d'onglets. false
fit booléen Lorsqu'il est défini sur true, la taille du conteneur d'onglets est définie pour s'adapter à son conteneur parent. false
border booléen Lorsqu'il est défini sur true, la bordure du conteneur d'onglets est affichée. vrai
scrollIncrement nombre Le nombre de pixels à faire défiler chaque fois qu'un bouton de défilement d'onglet est enfoncé. 100
scrollDuration nombre Le nombre de millisecondes que doit durer chaque animation de défilement. 400
tools tableau, sélecteur Une barre d'outils placée sur le côté gauche ou droit de l'en-tête. Valeurs possibles :
1. Un tableau, indiquant un groupe d'outils, chaque option d'outil est identique à un bouton de lien (Linkbutton).
2. Un sélecteur, indiquant un <div> qui contient les outils.

Exemples de code :
Définir des outils via un tableau.
$('#tt').tabs({
    tools:[{
        iconCls:'icon-add',
        handler:function(){
            alert('add')
        }
    },{
        iconCls:'icon-save',
        handler:function(){
            alert('save')
        }
    }]
});
Définir des outils via un conteneur DOM existant.
$('#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 Position de la barre d'outils. Valeurs possibles : 'left', 'right'. Cette propriété est disponible depuis la version 1.3.2. right
tabPosition string Position de l'onglet. Valeurs possibles : 'top', 'bottom', 'left', 'right'. Cette propriété est disponible depuis la version 1.3.2. top
headerWidth nombre Largeur de l'en-tête d'onglet. Elle n'est valide que lorsque tabPosition est défini sur 'left' ou 'right'. Cette propriété est disponible depuis la version 1.3.2. 150
tabWidth nombre Largeur de la bande d'onglets. Cette propriété est disponible depuis la version 1.3.4. auto
tabHeight nombre Hauteur de la bande d'onglets. Cette propriété est disponible depuis la version 1.3.4. 27
selected nombre L'index de l'onglet sélectionné initialement. Cette propriété est disponible depuis la version 1.3.5. 0
showHeader booléen Lorsque défini sur true, affiche l'en-tête d'onglet. Cette propriété est disponible depuis la version 1.3.5. vrai

Événements

Name Parameters Description
onLoad panel Déclenché lorsqu'un panneau d'onglet ajax termine le chargement de données distantes.
onSelect title,index Déclenché lorsque l'utilisateur sélectionne un panneau d'onglet.
onUnselect title,index Déclenché lorsque l'utilisateur désélectionne un panneau d'onglet. Cet événement est disponible depuis la version 1.3.5.
onBeforeClose title,index Déclenché avant la fermeture d'un panneau d'onglet. Retournez false pour annuler l'action de fermeture. L'exemple ci-dessous montre comment afficher une boîte de dialogue de confirmation avant de fermer un panneau d'onglet.
$('#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 Déclenché lorsque l'utilisateur ferme un panneau d'onglet.
onAdd title,index Déclenché lorsqu'un nouveau panneau d'onglet est ajouté.
onUpdate title,index Déclenché lorsqu'un panneau d'onglet est mis à jour.
onContextMenu e, title,index Déclenché lorsqu'un clic droit est effectué sur un panneau d'onglet.

Méthodes

Name Parameters Description
options none Retourne les options des onglets.
tabs none Retourne tous les panneaux d'onglets.
resize none Redimensionne le conteneur des onglets et effectue la mise en page.
ajoutez options Ajoute un nouveau panneau d'onglet. Le paramètre options est un objet de configuration. Pour plus de détails, voir les propriétés du panneau d'onglet.
Lorsqu'un nouveau panneau d'onglet est ajouté, il sera sélectionné.
Si vous souhaitez ajouter un panneau d'onglets non sélectionné, pensez à définir la propriété 'selected' sur false.
// add a unselected tab panel
$('#tt').tabs('add',{
    title: 'new tab',
    selected: false
    //...
});
close which Fermer un panneau d'onglets. Le paramètre 'which' peut être le titre ou l'index du panneau d'onglets à fermer.
getTab which Récupère le panneau d'onglets spécifié. Le paramètre 'which' peut être le titre ou l'index du panneau d'onglets.
getTabIndex tab Récupère l'index du panneau d'onglets spécifié.
getSelected none Récupère le panneau d'onglets sélectionné. L'exemple ci-dessous montre comment récupérer l'index du panneau d'onglets sélectionné.
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
select which Sélectionner un panneau d'onglets. Le paramètre 'which' peut être le titre ou l'index du panneau d'onglets.
unselect which Sélectionner un panneau d'onglets. Le paramètre 'which' peut être le titre ou l'index du panneau d'onglets. Cette méthode est disponible depuis la version 1.3.5.
showHeader none Afficher l'en-tête des onglets. Cette méthode est disponible depuis la version 1.3.5.
hideHeader none Masquer l'en-tête des onglets. Cette méthode est disponible depuis la version 1.3.5.
il existe which Indique si le panneau spécifié existe déjà. Le paramètre 'which' peut être le titre ou l'index du panneau d'onglets.
update param Met à jour le panneau d'onglets spécifié. Le paramètre param contient deux propriétés :
tab : le panneau d'onglets à mettre à jour.
options : les options du panneau.

Exemple de code :
// 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 Active le panneau d'onglets spécifié. Le paramètre 'which' peut être le titre ou l'index du panneau d'onglets. Cette méthode est disponible depuis la version 1.3.

Exemple de code :
$('#tt').tabs('enableTab', 1);    // enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2');    enable the tab panel that has 'Tab2' title
disableTab which Désactive le panneau d'onglets spécifié. Le paramètre 'which' peut être le titre ou l'index du panneau d'onglets. Cette méthode est disponible depuis la version 1.3.

Exemple de code :
$('#tt').tabs('disableTab', 1);    // disable the second tab panel.
scrollBy deltaX Fait défiler l'en-tête des onglets du nombre de pixels spécifié. Une valeur négative fait défiler vers la droite, une valeur positive fait défiler vers la gauche. Cette méthode est disponible depuis la version 1.3.2.

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

Panneau d'onglets

Les propriétés du panneau d'onglets sont définies dans le composant panneau. Voici quelques propriétés couramment utilisées.

Name Type Description Default
id string La propriété id du panneau d'onglet. null
title string Le texte du titre du panneau d'onglet.
content string Le contenu du panneau d'onglet.
href string Une URL pour charger du contenu distant afin de remplir le panneau d'onglet. null
cache booléen Lorsqu'il est défini sur true, le panneau d'onglet est mis en cache lorsqu'un attribut href valide est défini. vrai
iconCls string La classe CSS de l'icône affichée sur le titre du panneau d'onglet. null
width nombre La largeur du panneau d'onglet. auto
height nombre La hauteur du panneau d'onglet. auto
collapsible booléen Lorsqu'il est défini sur true, permet au panneau d'onglet d'être repliable. false

Quelques attributs supplémentaires.

Name Type Description Valeur par défaut
closable booléen Lorsqu'il est défini sur true, le panneau d'onglet affiche un bouton de fermeture ; cliquer dessus permet de fermer le panneau d'onglet. false
selected booléen Lorsqu'il est défini sur true, le panneau d'onglet sera sélectionné. false
jQuery EasyUI 插件jQuery EasyUI Plugin Autres extensions