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,    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为点击的节点                                                                                                                                   if($("#menu").tree(isLeaf,node.target)){ //判断是不是叶子节点 node.target，节点对象的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类文到面板中                                  })                                }                 }          }        });       });