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