LigerUI - Tab使用细节

LigerUI中打开新页面常常使用Tab，示例如下：

具体参数如下：

---

【1】JS布局

结合前一篇LigerUI - Layout使用细节说明，这里首先定义需要的全局变量：

<script type="text/javascript">

           var tabidstr="",tabcount=6(选项卡显示上限),tab = null,tree = null,grid = null,id=0,title="";

           $(function (){
               //布局
               $("#layout").ligerLayout(
                    { 
                    leftWidth: 190, height: '100%',
                    rightWidth: 190, height: '100%',
                    allowBottomResize:true,
                    allowLeftResize:false,
                    allowTopResize:false, 
                    topHeight:60,
                    bottomHeight:30,
                    onHeightChanged: heightChanged
                    });

              // 获取树
             tree = $("#tree1").ligerTree({
                checkbox:false,
                //数据
                data:data, 
                //ID字段名
                idFieldName :'id',
                //父节点字段
                parentIDFieldName :'pid',
                //是否允许拖拽
                nodeDraggable:false,

                //点击树节点的触发函数--点击树节点，打开选项卡
                onSelect: function (node){

                   if (node.data.url==null || node.data.url=="") return;
                     var tabid = $(node.target).attr("tabid");
                     var url_1 = node.data.url;

                     //根据node.data.url生成tabid
                     var tabid = generateTabId(url_1);

                     if (!tabid){

                         tabid = "_"+ new Date().getTime();

                         $(node.target).attr("mytabId", tabid)
                     }
                     addTab(tabid, node.data.text, node.data.url);
              }
            });

              // 建立选项卡并保存选项卡对象到全局变量
              tab = $("#navtab").ligerTab();
           });

           function heightChanged(options){
               if (tab){tab.addHeight(options.diff);}
           }

            function generateTabId(url) {
            var tabid = url.replace(new RegExp("[/:\.\?\=\&,]","gm"),"_");
            return tabid;
            }

---

添加选项卡(打开选项卡页面)：

function addTab(tabid,text, url){

               if(tabid==null) {
                tabid = generateTabId(url);
               }

               //打开第一个选项卡时 ,tabidstr为"";
               if (tabidstr==""){
                 tabidstr=tabid;
               }else{
                  var tabexist=false;
                  var pos=tabidstr.indexOf(",");
                  if(pos>0)
                  {
                   var tabs = tabidstr.split(",");

                   for(var i=0;i<tabs.length;i++)
                   {
                      if (tabid==tabs[i])
                      {
                          tabexist=true;
                      }
                   }
                  }
                  // 判断新的tabid是否已经，新加的将更新tabidstr
                  if (!tabexist){
                     tabidstr=tabidstr+","+tabid;
                  }

                  //判断选项卡数量是否大于tabcount,若大于则删除第一个并更新tabidstr
                  if (tabidstr.indexOf(",")>0)
                  {   
                   var tabs1  = tabidstr.split(",");
                   if (tabs1.length>tabcount)
                   {    
                        //删除第一个tab
                       f_delTab(tabs1[0]);
                       tabidstr="";
                       for(var i=1;i<tabs1.length;i++)
                       {
                          if (tabidstr=="")
                             tabidstr=tabs1[i];
                          else
                             tabidstr=tabidstr+","+tabs1[i]; 
                       }
                   }  
                  }                                  

               }  

            // 打开选项卡页面 
            tab.addTabItem({ tabid : tabid,text: text, url: url });
           } 
</script>

其他操作选项卡方法：

//删除指定标签
            function delTabById(tabid)
           {         
               tab.removeTabItem(tabid);
           }
            //删除活动的标签
           function delActivityTab()
           {         
               tab.removeTabItem(tab.getSelectedTabItemID());
           }
            //获取活动的标签ID
           function getSelectedTabItemID()
           {         
               return tab.getSelectedTabItemID();
           }
           //刷新执行标签
           function refreshTab(tabid)
           {         
               tab.reload(tabid);
           }

---

【2】页面HTML:

<body>
    <div id="layout" style="width:100%">
        <div position="top"  >
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image: url(<%=uiPath %>ui/skins/default/images/top_bg2.jpg);background-repeat: no-repeat;background-size:100%;">
              <tr> <td  style="padding: 20px;font-size: 18px;color:black;">LigerUI grid 演示</td></tr>
            </table>
        </div>
        <div position="left"  title="功能菜单" id="menu" style="height:95%; overflow:auto;"> 
             <ul id="tree1"></ul>
        </div>

        <div position="center" id="centerContent"> 
            - - 选项卡()
            <div id="navtab">
                <div title="我的主页1" showclose="true">
                    <div id="Div1" style="margin: 10px; height: 300px;">我的主页1</div>
                 </div>
                 <div title="我的主页2" showclose="true">
                     <div id="Div2" style="margin: 10px; height: 300px;">我的主页2</div>
                 </div>
            </div>
           - - 选项卡
        </div> 

        <div position="right">
            <span>this is right</span>
        </div>
        <div position="bottom">
            <span>this is bottom</span>
        </div>
    </div>
    <div id="dialog-confirm"></div>
</body>

除去整体布局，选项卡部分其实就是一个外层div下has several div。
其中子div(如div[title=”我的主页2”])也可以放一个iframe加载页面。

<div title="我的主页2" showclose="true">
     <iframe src="form2.htm"></iframe>
</div>