easyui中的tabs实例
来源：互联网 发布：js 汽车360度全景系统 编辑：程序博客网 时间：2024/06/05 15:56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script>
$(function(){
////导航栏
$(".c").hover(function(){
$(this).find(".d").css("display","block");
},function(){
$(this).find(".d").css("display","none");
});});
</script>
</head>
<body>
<style>
.a{width:800px;height:500px;margin:30px auto;}
.b{width:100%;height:auto;position:relative;list-style: none;padding: 0px;border: 1px solid #000000;}
.c{width: 10%;height: 60px;text-align: center;padding: 20px 0px;}
.c a{width: 100%;height: 100%;}
.c a img{width: 50%;margin: 0px 25%;height: 40px;}
.d{position: absolute;width: 120px;border: 1px solid #009F95;list-style: none;text-align: center;padding: 0px;margin-top: 10px;z-index: 1;background: #FFFFFF;display: none;margin-left: 30px;}
.d li{line-height: 35px;height: 35px;text-align: center;border-bottom: 1px solid #CCCCCC;}
.d li:hover{border: 1px solid #31B0D5;}
#cc:hover #dd{display: block !important;}
</style>
</head>
<body>
<div class="a">
<ul class="b">
<li class="c" id="cc"><a href="#" ><i>数据分析</a>
<ul class="d">
<li id="1"> <a href="index.html" onclick="addpanel(this.text,this.href);return false;">数据分析1</a></li>
<li id="2"><a href="test1.html" onclick="addpanel(this.text,this.href);return false;">数据分析2</a></li>
<li id="3"><a href="index.html" onclick="addpanel(this.text,this.href);return false;">数据分析3</a></li>
<li id="4"><a href="test1.html" onclick="addpanel(this.text,this.href);return false;">数据分析4</a></li>
</ul>
</li>
</ul>
<div id="tt" class="easyui-tabs" style="border: 1px solid;overflow:hidden;height:250px;"></div>
</div>
<script>
function addpanel(title,url){
if(!$("#tt").tabs('exists',title)){// 如果不存在此tab则创建
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true,
});
}
else { // 如果已经打开则选中
$("#tt").tabs('select',title);
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script>
$(function(){
////导航栏
$(".c").hover(function(){
$(this).find(".d").css("display","block");
},function(){
$(this).find(".d").css("display","none");
});});
</script>
</head>
<body>
<style>
.a{width:800px;height:500px;margin:30px auto;}
.b{width:100%;height:auto;position:relative;list-style: none;padding: 0px;border: 1px solid #000000;}
.c{width: 10%;height: 60px;text-align: center;padding: 20px 0px;}
.c a{width: 100%;height: 100%;}
.c a img{width: 50%;margin: 0px 25%;height: 40px;}
.d{position: absolute;width: 120px;border: 1px solid #009F95;list-style: none;text-align: center;padding: 0px;margin-top: 10px;z-index: 1;background: #FFFFFF;display: none;margin-left: 30px;}
.d li{line-height: 35px;height: 35px;text-align: center;border-bottom: 1px solid #CCCCCC;}
.d li:hover{border: 1px solid #31B0D5;}
#cc:hover #dd{display: block !important;}
</style>
</head>
<body>
<div class="a">
<ul class="b">
<li class="c" id="cc"><a href="#" ><i>数据分析</a>
<ul class="d">
<li id="1"> <a href="index.html" onclick="addpanel(this.text,this.href);return false;">数据分析1</a></li>
<li id="2"><a href="test1.html" onclick="addpanel(this.text,this.href);return false;">数据分析2</a></li>
<li id="3"><a href="index.html" onclick="addpanel(this.text,this.href);return false;">数据分析3</a></li>
<li id="4"><a href="test1.html" onclick="addpanel(this.text,this.href);return false;">数据分析4</a></li>
</ul>
</li>
</ul>
<div id="tt" class="easyui-tabs" style="border: 1px solid;overflow:hidden;height:250px;"></div>
</div>
<script>
function addpanel(title,url){
if(!$("#tt").tabs('exists',title)){// 如果不存在此tab则创建
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true,
});
}
else { // 如果已经打开则选中
$("#tt").tabs('select',title);
}
}
</script>
</body>
</html>
效果：
阅读全文
0 0
- easyui中的tabs实例
- Easyui实例--tabs
- easyUI Tabs
- easyUI Tabs
- easyui-tabs
- jQuery EasyUI 选项卡面板tabs使用实例精讲
- easyui tabs的使用
- easyui tabs 例子
- EasyUI 动态添加tabs
- easyui-tabs关闭页面
- easyUI Tabs 切换问题
- EasyUI的tabs使用
- tabs - jQuery EasyUI
- easyui-tabs 自适应高度
- easyUI tabs 初探
- EasyUI Tabs全攻略
- easyui-tabs使用相关
- easyUI tabs切换
- （转载）spring
- 数据结构-堆
- Shiro 项目开发中第一次使用到，所以研究了一下，这里
- react的一些细节
- 数制转换
- easyui中的tabs实例
- 对待虚拟货币政策汇总
- JS数字转中文大写
- Altium Designer 快捷操作方法（去除丝印、死铜皮、隐藏模型、泪滴等
- POJ-1182 食物链
- 随机生成token值
- H264格式 详细介绍
- 【查查企业:www.chacha360.cn】站点开通
- for...in/for...of
