easyUI學(xué)習(xí)之選項(xiàng)卡

         有時(shí)候，我們?cè)诤笈_(tái)系統(tǒng)使用easyUI的tree功能的時(shí)候，需要在點(diǎn)擊一個(gè)節(jié)點(diǎn)，在頁面右側(cè)顯示一個(gè)頁面，通常這個(gè)頁面就是使用選項(xiàng)卡面板功能實(shí)現(xiàn)的，現(xiàn)在我們來通過幾個(gè)小Demo來了解選項(xiàng)卡面板的功能。

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

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

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