改造方案:利用ligerui的tab进行改造
效果:
![](http://dl2.iteye.com/upload/attachment/0117/1090/ffcbfd06-c14f-37a0-a9d1-f6b41603eb6f.png)
所需文件:
ligerui/base/base.js
ligerui/plugins/ligerTab.js
HTML代码
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="page-content" style="padding:0;">
<!-- BEGIN PAGE HEADER-->
<div id="content-main"></div>
</div>
<!-- END PAGE HEADER-->
</div>
JavaScript代码
<script type="text/javascript">
$(function(){
var tabItems = [];
//Tab
$("#content-main").ligerTab({
height: '100%',
showSwitchInTab : true,
showSwitch: true,
onAfterAddTabItem: function (tabdata)
{
tabItems.push(tabdata);
saveTabStatus();
},
onAfterRemoveTabItem: function (tabid)
{
for (var i = 0; i < tabItems.length; i++)
{
var o = tabItems[i];
if (o.tabid == tabid)
{
tabItems.splice(i, 1);
saveTabStatus();
break;
}
}
}
});
tab = $("#content-main").ligerGetTabManager();
$(".J_menuItem").on("click", function(event) {
event.preventDefault();
//var right = $(this).data("right");
//if (right && !Business.verifyRight(right)) return false;
var tabid = $(this).attr("tabid"),
href = $(this).attr("href"),
showClose = $(this).attr("showClose"),
tabTxt = $(this).attr("tabTxt") || $(this).text().replace(">", ""),
parentOpen = $(this).attr("parentOpen");
return parentOpen == "true" ? parent.tab.addTabItem({
tabid: tabid,
text: tabTxt,
url: href
}) : tab.addTabItem({
tabid: tabid,
text: tabTxt,
url: href
}), false
});
tab.addTabItem({
tabid: "index",
text: "首页",
url: "${base}/admin/dashboard",
showClose: false
});
});
function f_addTab(tabid, text, url) {
tab.addTabItem({
tabid: tabid,
text: text,
url: url
});
}
</script>