关于layout页面的tab选项卡

layout的布局：

    <div id="layout1" style="width: 99.2%; margin: 0 auto; margin-top: 4px;">
        <div position="left" title="菜单" id="accordion1">
            <div title="功能列表" class="l-scroll">
                <a id="allowStartCount" class="l-link" href="javascript:f_addTab('startpage','左侧菜单,'Start.aspx')">
                    <img class="img-menu" align="middle" alt="" src="Img/Menu/Start.png" />左侧菜单</a>              
            </div>
        </div>
        <div position="center" id="framecenter">
            <div tabid="home" title="首页" style="height: 300px">
                <iframe frameborder="0" name="home" id="home" src="Welcome.aspx"></iframe>
            </div>
        </div>
    </div>

在其中，添加tab方法如下：

 

首先，需要两个方法

 function f_heightChanged(options) {
            if (tab)
                tab.addHeight(options.diff);
            if (accordion && options.middleHeight - 24 > 0)
                accordion.setHeight(options.middleHeight - 24);
        }

        function f_addTab(tabid, text, url) {
            tab.addTabItem({ tabid: tabid, text: text, url: url });
        }

再次，需要在$()中进行声明

         //布局
            $("#layout1").ligerLayout({ leftWidth: 190, height: '100%', heightDiff: -34, space: 4, onHeightChanged: f_heightChanged });
            var height = $(".l-layout-center").height();
            //Tab
            $("#framecenter").ligerTab({ height: height, onAfterSelectTabItem: function (tabId) {
               //设置点击左侧菜单后，右侧中的框中的操作              

                // if (tabId == "empworks" || tabId == "HungUp") {
                 //   tab.reload(tabId);
               // }
            }, onAfterRemoveTabItem: function (tabId, index) {
                var item_list = tab.getTabidList();
                var preItem = item_list[item_list.length - 1];
                if (preItem == "empworks" || preItem == "HungUp") {
                    tab.reload(preItem);
                }
            }
            });
            //面板  左侧连接菜单
            $("#accordion1").ligerAccordion({ height: height - 24, speed: null });

         

            tab = $("#framecenter").ligerGetTabManager();
            accordion = $("#accordion1").ligerGetAccordionManager();

 

最后，在左侧菜单中，进行超链接的加载时，只要设置路径等即可。

 <div id="layout1" style="width: 99.2%; margin: 0 auto; margin-top: 4px;">
        <div position="left" title="菜单" id="accordion1">
            <div title="功能列表" class="l-scroll">
                <a id="allowStartCount" class="l-link" href="javascript:f_addTab('FirstPage.aspx','首页,'FirstPage.aspx')">首页</a> 
                  <a class="l-link" href="javascript:f_addTab('SecondPage','第二页','SecondPage.aspx')">第二页</a>           
            </div>
        </div>
        <div position="center" id="framecenter">
       <%-- 默认的为 首页--%>
            <div tabid="home" title="首页" style="height: 300px">
                <iframe frameborder="0" name="home" id="home" src="FirstPage.aspx"></iframe>
            </div>
        </div>
    </div>

 

下载框架示例：http://download.csdn.net/detail/hugaozhuang/5507639