EastUI Tabs使用笔记

先下载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效果更佳