先下载EasyUi http://www.jeasyui.net/download/
然后只保留这些文件
然后导出
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5.4/themes/icon.css" />
<!--2个js文件 ,要先引入jquery,然后再引入easyui-->
<script src="jquery-easyui-1.5.5.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-easyui-1.5.5.4/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
然后使用官方例子
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
javascript
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
官方案例效果图:
利用官方案例进行修改做个添加tab的事例
function addTab(title, content) {
console.log(".....")
if($('#tt').tabs('exists', title)) {//判断是否存在tab,若存在就选中
$('#tt').tabs('select', title);//选中改tab
} else {//否则新建
$('#tt').tabs('add', {
title: title,//title
content: content,//选项卡里面的内容
closable: true,//是否显示关闭按钮,显示点击关闭按钮关闭,默认false
});
}
}
addTab('Tab4', '发的发多法说')
效果图
然后进行一些添加像Tab3一样前面加个小图标
先看它原有的小图标都在themes ---> icons 小图标都在这里
但是我们并不需要小图标也放进去而是去求改themes文件下的 icon,css的
学着添加粉色框的代码
function addTab(title, content) {
console.log(".....")
if($('#tt').tabs('exists', title)) {//判断是否存在tab,若存在就选中
$('#tt').tabs('select', title);//选中改tab
} else {//否则新建
$('#tt').tabs('add', {
title: title,//title
content: content,//选项卡里面的内容
closable: true,//是否显示关闭按钮,显示点击关闭按钮关闭,默认false
iconCls: 'icon-a'
});
}
}
addTab('Tab4', '发的发多法说')
加上iconCls:‘icon-a’然后查看效果
然后就多了个蓝色的图标了
先新增一个页面叫做 aa.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
bbbbbbbbbbbbbbbcaca
<div style="width: 500px;height:500px;background: green;;"></div>
</body>
</html>
再把原有的javascript进行以下修改
function addTab(title, url) {
console.log(".....")
if($('#tt').tabs('exists', title)) {//判断是否存在tab,若存在就选中
$('#tt').tabs('select', title);//选中改tab
} else {//否则新建
var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;overflow-x: hidden;"></iframe>';
$('#tt').tabs('add', {
title: title,//title
content: content,//选项卡里面的内容
closable: true,//是否显示关闭按钮,显示点击关闭按钮关闭,默认false
iconCls: 'icon-a'
});
}
}
addTab('Tab4', 'aa.html')
使用效果是
发现了一个问提就是有变多了个滚动条。。
除了content外还有一个属性是href
function addTab(title, url) {
console.log(".....")
if($('#tt').tabs('exists', title)) {//判断是否存在tab,若存在就选中
$('#tt').tabs('select', title);//选中改tab
} else {//否则新建
$('#tt').tabs('add', {
title: title,//title
href: url,
closable: true,//是否显示关闭按钮,显示点击关闭按钮关闭,默认false
iconCls: 'icon-a'
});
}
}
addTab('Tab4', 'aa.html')
也可以实现这个效果并且没有滚动条。
所以使用href效果更佳
看着看着发现样式不好看,那就直接去改他的样式打开css
找到并加上红色背景
看效果,原本浅蓝色的背景变红了,想加什么都可以
里面的小Tab1去哪修改呢
继续在这个CSS文件下查找这几个class进行样式修改
注意了,要修改上面这个带颜色的才能修改他的颜色哦。
鼠标触碰时的样式
这个是修改比如这个C的小图标
就查找这个class