easyui学习之选项卡面板

easyUI学习之选项卡

         有时候，我们在后台系统使用easyUI的tree功能的时候，需要在点击一个节点，在页面右侧显示一个页面，通常这个页面就是使用选项卡面板功能实现的，现在我们来通过几个小Demo来了解选项卡面板的功能。

 

        

1. 创建选项卡面板

创建面板有html直接创建，也可以通过js创建，下面介绍的都是使用js来创建。

<div id="tt"> 

</div>

$('#tt').tabs({  

    border:false,                        //选项卡的基本属性.....

    onSelect:function(title){            //用户在选择一个选项卡面板的时候触发的函数

        alert(title+' is selected');  

    },

  tools:[{                               //tools属性可以为选项卡添加一个或多个面板头

         iconCls:'icon-add',

         handler:function(){ 

                  alert("添加")；

         }

         }]   

}); 

2.添加一个新的选项卡面板

tabs.tabs("add",{              //使用add方法

    title:node.text