easyui---tabs(选项卡)

配置好easyui环境

1.笔记：

tabs(选项卡)
class:class="easyui-tabs" //<div class="easyui-tabs" style="width: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="width: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="width: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>

效果图: