easyUI學習之選項卡

         有時候，我們在后臺系統使用easyUI的tree功能的時候，需要在點擊一個節(jié)點，在頁面右側顯示一個頁面，通常這個頁面就是使用選項卡面板功能實現的，現在我們來通過幾個小Demo來了解選項卡面板的功能。

1. 創(chuàng)建選項卡面板

創(chuàng)建面板有html直接創(chuàng)建，也可以通過js創(chuàng)建，下面介紹的都是使用js來創(chuàng)建。

<div id="tt"> </div>$('#tt').tabs({      border:false,                        //選項卡的基本屬性.....    onSelect:function(title){            //用戶在選擇一個選項卡面板的時候觸發(fā)的函數        alert(title+' is selected');      },  tools:[{                               //tools屬性可以為選項卡添加一個或多個面板頭         iconCls:'icon-add',         handler:function(){                   alert("添加")；         }         }]   }); 
2.添加一個新的選項卡面板
tabs.tabs("add",{              //使用add方法    title:node.text,    href:attributes.url,     //加載遠程url數據到選項卡，這個url是加載的頁面的地址    closeable:true,         //是否顯示一個可關閉的按鈕,默認選擇false，就無法關閉了。    bodyCls:"content"       //添加CSS類文到面板中})       
 
3.獲取指定的選項卡 
// get the selected tab panel and its tabobjectvar pp = $(‘#tt’).tabs(‘getSelected’,node.name); //node.name為被選中選項卡的名字
4.綜合起來
(function(){         $("#menu").tree({               onClick:function(node){                  //node為點擊的節(jié)點                                                                                                                                   if($("#menu").tree(isLeaf,node.target)){ //判斷是不是葉子節(jié)點 node.target，節(jié)點對象的target屬性) ;                   var tabs = $("#tabs");                  //getTab方法為在面板選項中獲取指定的選項卡,node.text為指定選項卡的名字,                   var tab = tabs.tabs("getTab",node.text);                   //if(tab)tab存在的情況,在js中，如果存在有值，則表示true,不存在或者為0，表示false                   if(tab){                                                                                                            tabs.tabs("select",node.text); //如果面板中有這個選項卡，則選中該選項卡                  }else{                                                               tabs.tabs("add",{              //如果面板中沒有改選項卡，就添加一個選項卡add方法                                  title:node.text,                                  href:attributes.url,    //加載遠程url數據到選項卡，                                                                                               closeable:true,         //是否顯示一個可關閉的按鈕                                                                                                    bodyCls:"content"       //添加css類文到面板中                                  })                                }                 }          }        });       });