背景: 很多后台管理系统为了方便浏览,都需要做多Tab的形式(多页签),而metronic这点我觉得很烂。
改造方案:利用ligerui的tab进行改造
效果:
所需文件:
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>
- 大小: 21.5 KB
分享到:
相关推荐
NULL 博文链接:https://rockyuse.iteye.com/blog/721493
正好最近比较闲,就打算把一直看不顺眼的项目中现有的tab改造一番(现有的tab未能做成一个控件,copy,past的代码太多)。 想着jQuery这么强大的库不可能没有tabs插件吧,赶紧搜了一下,哈,果然!jQuery tabs!心里...
远方New Tab是一个能将新标签页改造成以世界各地美景为主题的chrome新标签页美景主题插件,主要能通过七个不同的图片来源给新标签页提供不同的背景。在安装了这款插件后,使用者能在以美景图片为背景的新标签页下...
骚操作之二: fuck源代码,读懂之后开始改造首先指示器的线是画出来的,关键代码如下 (以下改动代码均为tabLayout类) canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight, ...
手机界面风格
一、重要部分 1、 注意 <component is=item.content></component> :表明模板 (item) key=item.name label=item.title name=item.name > <component is=item.content></component> 2、content: ‘Jbxx’ ,...
接触jquery 2,3个月了,一直都未动手写过插件。正好最近比较闲,就打算把一直看不顺眼的项目中现有的tab改造一番(现有的tab未能做成一个控件,copy,past的代码太多)。
attachEvent Retrofill 释放旧记忆并安装attachEvent改造! 随着 IE 的消失和 Edge 的出现,微软将删除所有并完全坚持 Web 标准。 这使得所有addEvent包装器功能... 'I will not let you close this tab' ) ;} ) ;
于是自己从以前的框架上改造,搭了这么一个精简版框架,用得也舒服,原创:zany_face:。 特性 :triangular_ruler:: 代码规模:原创精简版脚手架,主张最少,不臃肿 :bullet_train:: 追求前沿:全站使用 React Hooks ...
获取新的pokemon壁纸背景的新标签 亲爱的口袋妖怪粉丝,满足这个令人敬畏的Pokemon壁纸HD主题。...如何即将为此无聊的默认新标签制作一个令人惊叹的改造,并使您的浏览Pleasan简单,通过安装我们的p
获取新的保时捷壁纸背景的新标签 亲爱的保时捷粉丝,满足这个令人敬畏的保时捷壁纸高清...如何即将为此无聊的默认新标签制作一个令人惊叹的改造,并使您的浏览Pleasan并简单地安装我们的保时捷壁纸主题新标签背景?没
获取新的标签的新搞笑壁纸背景 亲爱的有趣的粉丝,迎接这个令人敬畏有趣的壁纸HD...如何即将为此无聊的默认新标签制作一个令人惊叹的改造,并使您的浏览Pleasan通过安装我们有趣的壁纸主题新标签背景和简单没有疑惑和只
获取新的标签的新秋季壁纸背景 亲爱的秋季粉丝,符合这个令人敬畏的秋天壁纸高清...如何制作这种无聊的默认新标签的令人惊叹的改造,并通过安装我们的秋壁板主题新标签背景,使您的浏览Pleasan和简单。没有疑惑,只需
通过可爱的壁纸选择这个扩展,为您的新标签提供可爱的改造是完美的时机。让可爱的背景成为您新标签的可爱词。可爱的屏保像可爱的宝贝壁纸,可爱的壁纸,女孩,可爱的简单壁纸,可爱的动物是每一代人喜欢的东西。如果...
获取新的星球大战壁纸背景的新标签 亲爱的星球大战电影粉丝,满足这个令人敬畏的星球大战壁纸高清主题。...如何即将为此无聊的默认新标签制作一个令人惊叹的改造,并使您的浏览Pleasan通过安装我们的星球大战壁纸
获得新的野猫壁纸背景新标签 亲爱的野生猫粉丝,满足这个令人敬畏...如何即将为此无聊的默认新标签制作一个令人惊叹的改造,并使您的浏览Pleasan并通过安装我们的野生猫科动物壁纸主题新标签背景简单吗?没有疑惑和只需
获取新的质量效果壁纸背景的新标签 亲爱的群众效果游戏粉丝,符合这个令人敬畏的质量效果壁纸高清主题。...如何制作这种无聊的默认新标签的令人惊叹的改造,并通过安装我们的群发壁纸主题新标签背景,使您的浏览Plea
让新的夏季度假壁纸背景用于新标签 亲爱的暑假粉丝,符合这个令人敬畏的暑假壁纸HD主题。...如何制作这种无聊的默认新标签的令人惊叹的改造,并通过安装我们的暑假壁纸主题新标签背景,使您的浏览Pleasan和简单易于制
之前写的方式比较麻烦,代码也比较乱,用JQuery改造后可以使其更加清晰,核心代码如下: JS代码 代码如下: [removed] <!– $(document).ready(function(){ $(“#Nav li a img”).mouseover(function(){ var m =