EasyUI-Tabs

EasyUI-Tabs 选项卡篇

Tabs我们可以理解为选项卡，那么什么才算是选项卡呢：

从上图中一定就理解了啥叫选项卡了

参考代码如下所示：

<div class="easyui-tabs" style="width:700px;height:250px">
　　<div title="About" style="padding:10px"></div>
　　<div title="My Documents" style="padding:10px"></div>
　　<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px"></div>
</div>

Tabs的用法跟其他元素基本相似，也是指定Class的值 = "easyui-tabs" ，然后在指定的容器内添加子内容

 

1：我们还可以为任何一个Tab项添加icon图片，参考代码如下：

<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px"></div>

也是指定data-options中的iconCls属性的值，这个值指定为icon图片的名称即可

 

2：我们还可以指定Tabs在容器中的位置，现在支持四个方向：top,bottom,right,left

参考代码：

1. <divstyle="margin:10px0;">
   1. 　　<span>Position:</span>
   2. 　　<selectonchange="$('#tt').tabs({tabPosition:this.value})">
   3. 　　<optionvalue="top">Top</option>
   4. 　　<optionvalue="bottom">Bottom</option>
   5. 　　<optionvalue="left">Left</option>
   6. 　　<optionvalue="right">Right</option>
   7. 　　</select>
2. 　　</div>
3. <divid="tt"class="easyui-tabs"style="width:700px;height:250px">

主要是通过设置 tabPosition属性的值

比如：tabPostion:bottom

topPostion:left

 

3：Tabs项不仅仅可以显示文字，还可以显示icon，比如下图所示：

 

上面这些是关于Tab组件常见的用法，但是tab不仅仅支持上面这些用户，更多用法请参考：

http://www.jeasyui.com/demo/main/index.php?plugin=Tabs&theme=default&dir=ltr&pitem=

但是作为基本的需求，上面的几个属性已经可以满足大部分开发需求了

 

Jason

2014年2月28日21:50:01