Tab的改造

最新推荐文章于 2019-06-18 17:18:00 发布

wzalong

最新推荐文章于 2019-06-18 17:18:00 发布

阅读量209

点赞数

分类专栏： metronic响应式框架的改造文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/owzalong/article/details/84795811

版权

metronic响应式框架的改造专栏收录该内容

7 篇文章 0 订阅

订阅专栏

背景：很多后台管理系统为了方便浏览，都需要做多Tab的形式(多页签)，而metronic这点我觉得很烂。

改造方案：利用ligerui的tab进行改造

效果：

[img]http://dl2.iteye.com/upload/attachment/0117/1090/ffcbfd06-c14f-37a0-a9d1-f6b41603eb6f.png[/img]

所需文件：
ligerui/base/base.js
ligerui/plugins/ligerTab.js

HTML代码

<div class="page-content-wrapper">
<div class="page-content" style="padding:0;">

<div id="content-main"></div>
</div>

</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>