首页还是需要引入layui.js和layui.css文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/layui.css">
</head>
<body>
<ul class="layui-nav layui-nav-tree layui-nav-side"lay-filter="treenav">
<li class="layui-nav-item"><a href="javascript：;" class="site-url" data-id="1" data-title="控制台" data-url="/views/cat.html">控制台</a></li>
<li class="layui-nav-item"><a href="javascript：;" class="site-url" data-title="组件" data-id="2" data-url="/views/news.html">组件</a></li>
<li class="layui-nav-item"><a href="javascript：;" class="site-url" data-title="应用" data-id="3" data-url="http://news.qq.com">应用</a></li>
<li class="layui-nav-item">
<a href="javascript：;">设置</a>
<dl class="layui-nav-child">
<dd><a href="javascript：;" class="site-url" data-title="系统设置" data-id="4" data-url="http://www.sina.com.cn">系统设置</a></dd>
<dd><a href="javascript：;" class="site-url" data-title="网站设置" data-id="5" data-url="http://www.163.com">网站设置</a></dd>
<dd><a href="javascript：;" class="site-url" data-title="修改密码" data-id="6" data-url="http://www.tmall.com">修改密码</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript：;" class="site-url" data-title="社区" data-id="7" data-url="http://fly.layui.com/">社区</a></li>
</ul>
<div class="layui-tab layui-tab-brief" lay-filter="contentnav" lay-allowClose="true" style="margin-left:200px;margin-top:0;">
<ul class="layui-tab-title">
<li class="layui-this">首页</li>
</ul>
<ul class="layui-bg-green rightmenu" style="display: none;position: absolute;">
<li data-type="closethis">关闭当前</li>
<li data-type="closeall">关闭所有</li>
</ul>
<div class="layui-tab-content"style="padding:0;">
<div class="layui-tab-item layui-show">首页内容...</div>
</div>
</div>
<script src="layui.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
layui.use('element',function(){
var element = layui.element;
var active={
tabAdd:function(url,id,name){
element.tabAdd('contentnav',{
title:name,
content:'<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="http://localhost/www/layui/layui/'+url+'" style="width:100%; height:99%"></iframe>',
id:id
});
rightMenu();
iframeWH();
},
tabChange:function(id){
element.tabChange('contentnav',id);
},
tabDelete:function(id){
element.tabDelete('contentnav',id);
},
tabDeleteAll:function(ids){
$.each(ids,function(index,item){
element.tabDelete('contentnav',item);
});
}
};
$(".site-url").on('click',function(){
var nav=$(this);
var length = $("ul.layui-tab-title li").length;
if(length<=0){
active.tabAdd(nav.attr("data-url"),nav.attr("data-id"),nav.attr("data-title"));
}else{
var isData=false;
$.each($("ul.layui-tab-title li"),function(){
if($(this).attr("lay-id")==nav.attr("data-id")){
isData=true;
}
});
if(isData==false){
active.tabAdd(nav.attr("data-url"),nav.attr("data-id"),nav.attr("data-title"));
}
active.tabChange(nav.attr("data-id"));
}
});
function rightMenu(){
//右击弹出
$(".layui-tab-title li").on('contextmenu',function(e){
e.preventDefault();
var menu=$(".rightmenu");
menu.find("li").attr('data-id',$(this).attr("lay-id"));
l = e.clientX;
t = e.clientY;
menu.css({ left:l, top:t}).show();
returnfalse;
});
//左键点击隐藏
$("body,.layui-tab-title li").click(function(){
$(".rightmenu").hide();
});
}
$(".rightmenu li").click(function(){
if($(this).attr("data-type")=="closethis"){
active.tabDelete($(this).attr("data-id"));
}else if($(this).attr("data-type")=="closeall"){
var tabtitle = $(".layui-tab-title li");
var ids =newArray();
tabtitle.each(function(i){
ids.push($(this).attr("lay-id"));
});
//如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
active.tabDeleteAll(ids);
}
$('.rightmenu').hide();//最后再隐藏右键菜单
});
function iframeWH(){
var H = $(window).height()-80;
$("iframe").css("height",H+"px");
}
$(window).resize(function(){
iframeWH();
});
});
</script>
</body>
</html>
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接