Tabs Simple Style 1.x

快速索引

• 1、标准示例
• 2、标准用法
• 3、去除选项卡背景
• 4、拉伸选项卡
• 5、无间距选项卡
• 6、去除边框
• 7、去除圆角
• 8、去除圆角及边框

标准示例：

标准用法：

					
#示例一
<div class="easyui-tabs theme-tab-simple" data-options="tabPosition:'left'">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>


#示例二
<div class="easyui-tabs theme-tab-simple" data-options="tabPosition:'right'">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>


#示例三
<div class="easyui-tabs theme-tab-simple" data-options="tabPosition:'top'">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>


#示例四
<div class="easyui-tabs theme-tab-simple" data-options="tabPosition:'bottom'">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>
					
				

去除选项卡背景示例：

去除选项卡背景用法：

					
<div class="easyui-tabs theme-tab-simple theme-tab-unbackdrop" data-options="tabPosition:'top',plain:true">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>
					
				

拉伸选项卡示例：

拉伸选项卡用法：

					
<div class="easyui-tabs theme-tab-simple theme-tab-unbackdrop" data-options="tabPosition:'top',plain:true,justified:true">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>
					
				

无间距选项卡示例：

无间距选项卡用法：

					
<div class="easyui-tabs theme-tab-simple theme-tab-unbackdrop" data-options="tabPosition:'top',plain:true,narrow:true">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>
					
				

去除边框示例：

去除边框用法：

					
<div class="easyui-tabs theme-tab-simple theme-tab-unbackdrop" data-options="tabPosition:'top',plain:true,border:false">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>
					
				

去除圆角示例：

去除圆角用法：

					
<div class="easyui-tabs theme-tab-simple theme-tab-unbackdrop theme-tab-unradius" data-options="tabPosition:'top',plain:true">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>
					
				

去除圆角及边框示例：

去除圆角及边框用法：

					
<div class="easyui-tabs theme-tab-simple theme-tab-unbackdrop theme-tab-unradius" data-options="tabPosition:'top',plain:true,border:false">
    <div title="About"></div>
    <div title="My Documents"></div>
    <div title="Help" data-options="iconCls:'icon-help',closable:true"></div>
</div>