配置好easyui环境
1.笔记：
tabs(选项卡)
class:class="easyui-tabs" //<div class="easyui-tabs" style="700px;height:auto"></div>
是否可以关闭：closable:true
选项卡标签的宽度:data-options="tabWidth:200"
下拉菜单:
<div id="mm">
<div>Welcome</div>
<div>Help Contents</div>
<div data-options="iconCls:'icon-search'">Search</div>
<div>Dynamic Help</div>
</div>
<script>
//下拉菜单js
$(function(){
var p = $('#tt').tabs().tabs('tabs')[2]; //tt大容器的id
var mb = p.panel('options').tab.find('a.tabs-inner');
mb.menubutton({
menu:'#mm',
iconCls:'icon-help'
}).click(function(){
$('#tt').tabs('select',2);
});
});
</script>
微型按钮：加入微型按钮:data-options="tools:'#p-tools'" //#p-tools微型按钮组id
<div id="p-tools">
<a href="javascript:void(0)" class="icon-mini-add" onclick="alert('add')"></a>
<a href="javascript:void(0)" class="icon-mini-edit" onclick="alert('edit')"></a>
<a href="javascript:void(0)" class="icon-mini-refresh" onclick="alert('refresh')"></a>
</div>
<script type="text/javascript">
//将鼠标移到标签条上，以打开标签面板。与下拉菜单冲突
$(function(){
var tabs = $('#tt').tabs().tabs('tabs');
for(var i=0; i<tabs.length; i++){
tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){
$('#tt').tabs('select', e.data.index);
});
}
});
</script>
选项卡样式：
<div style="margin:20px 0;">
<input id="plain" type="checkbox" onclick="setTabs()"><span>plain</span><br>
<input id="narrow" type="checkbox" onclick="setTabs()"><span>narrow</span><br>
<input id="pill" type="checkbox" onclick="setTabs()"><span>pill</span><br>
<input id="justified" type="checkbox" onclick="setTabs()"><span>justified</span>
</div>
<script type="text/javascript">
//选项卡样式js
function setTabs(){
$('#tt').tabs({
plain: $('#plain').is(':checked'),
narrow: $('#narrow').is(':checked'),
pill: $('#pill').is(':checked'),
justified: $('#justified').is(':checked')
})
}
</script>
内嵌选项卡(子选项卡)
在选项卡内容在嵌套一次
<div class="easyui-tabs">
<div title="内嵌选项卡">
<div class="easyui-tabs" data-options="fit:true,plain:true">
<div title="小卡 1" style="padding:10px;">小卡 1</div>
<div title="小卡 2" style="padding:10px;">小卡 2</div>
<div title="小卡 3" style="padding:10px;">小卡 3</div>
</div>
</div>
</div>
选项卡大图标:设置title="<span class='tt-inner'><img src='images/modem.png'/><br>Modem</span>"
修改标签的位置
<div style="margin:20px 0;">
<span>位置:</span>
<select onchange="$('#tt').tabs({tabPosition:this.value})">
<option value="top">Top</option>
<option value="bottom">Bottom</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
添加删除选项卡(位置原理同微型标签)
<!--添加删除选项卡-->
<div id="actab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
</div>
<script type="text/javascript">
//添加删除选项卡
var index = 0;
function addPanel(){
index++;
$('#tt').tabs('add',{
title: 'Tab'+index,
content: '<div style="padding:10px">Content'+index+'</div>',
closable: true
});
}
function removePanel(){
var tab = $('#tt').tabs('getSelected');
if (tab){
var index = $('#tt').tabs('getTabIndex', tab);
$('#tt').tabs('close', index);
}
}
</script>
2.例子：
<!--data-options="tabWidth:200" 标签宽度-->
<div id="tt" data-options="tabWidth:200,tabHeight:50,tools:'#actab-tools'" class="easyui-tabs" style="700px;height:500px">
<!--描述：ajax嵌入页面-->
<div title="选项卡1(ajax)" data-options="href:'_content.html'">
</div>
<!--data-options="tools:'#p-tools'"加入微型按钮-->
<div title="选项卡2(上面微型按钮)" data-options="tools:'#p-tools'">
<ul class="easyui-tree">
<li>
<ul>
<li>
ssad
</li>
</ul>
</li>
</ul>
</div>
<!--closable:true是否可以关闭-->
<div title="选项卡3(可关闭)" data-options="closable:true"">
<h1>这里是选项卡3的内容</h1>
</div>
<div title="选项卡4(iframe)">
<iframe scrolling="yes" frameborder="0" src="http://www.baidu.com" style="100%;height:100%;"></iframe>
</div>
<!--内嵌选项卡-->
<div title="内嵌选项卡">
<div class="easyui-tabs" data-options="fit:true,plain:true">
<div title="小卡 1" style="padding:10px;">小卡 1</div>
<div title="小卡 2" style="padding:10px;">小卡 2</div>
<div title="小卡 3" style="padding:10px;">小卡 3</div>
</div>
</div>
<div title="<span class='tt-inner'><img src='images/modem.png'/>Modem</span>">
666
</div>
</div>
<!--下拉菜单内容-->
<div id="mm">
<div>Welcome</div>
<div>Help Contents</div>
<div data-options="iconCls:'icon-search'">Search</div>
<div>Dynamic Help</div>
</div>
<!--微型按钮-->
<div id="p-tools">
<a href="javascript:void(0)" class="icon-mini-add" onclick="alert('add')"></a>
<a href="javascript:void(0)" class="icon-mini-edit" onclick="alert('edit')"></a>
<a href="javascript:void(0)" class="icon-mini-refresh" onclick="alert('refresh')"></a>
</div>
<!--样式开启-->
<div style="margin:20px 0;">
<input id="plain" type="checkbox" onclick="setTabs()"><span>plain</span><br>
<input id="narrow" type="checkbox" onclick="setTabs()"><span>narrow</span><br>
<input id="pill" type="checkbox" onclick="setTabs()"><span>pill</span><br>
<input id="justified" type="checkbox" onclick="setTabs()"><span>justified</span>
</div>
<!--选项卡标签位置-->
<div style="margin:20px 0;">
<span>位置:</span>
<select onchange="$('#tt').tabs({tabPosition:this.value})">
<option value="top">Top</option>
<option value="bottom">Bottom</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
<!--添加删除选项卡-->
<div id="actab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
</div>
<script type="text/javascript">
//添加删除选项卡
var index = 0;
function addPanel(){
index++;
$('#tt').tabs('add',{
title: 'Tab'+index,
content: '<div style="padding:10px">Content'+index+'</div>',
closable: true
});
}
function removePanel(){
var tab = $('#tt').tabs('getSelected');
if (tab){
var index = $('#tt').tabs('getTabIndex', tab);
$('#tt').tabs('close', index);
}
}
</script>
<script>
//下拉菜单js
$(function(){
var p = $('#tt').tabs().tabs('tabs')[2]; //tt大容器的id
var mb = p.panel('options').tab.find('a.tabs-inner');
mb.menubutton({
menu:'#mm',
iconCls:'icon-help'
}).click(function(){
$('#tt').tabs('select',2);
});
});
</script>
<script type="text/javascript">
//将鼠标移到标签条上，以打开标签面板。与下拉菜单冲突
/*$(function(){
var tabs = $('#tt').tabs().tabs('tabs');
for(var i=0; i<tabs.length; i++){
tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){
$('#tt').tabs('select', e.data.index);
});
}
});*/
</script>
<script type="text/javascript">
//选项卡样式js
function setTabs(){
$('#tt').tabs({
plain: $('#plain').is(':checked'),
narrow: $('#narrow').is(':checked'),
pill: $('#pill').is(':checked'),
justified: $('#justified').is(':checked')
})
}
</script>
效果图:
