Tabs Block Style 1.x

快速索引

• 1、标准示例
• 2、标准用法
• 3、可选颜色
• 4、可选样式
• 5、拉伸选项卡
• 6、无间距选项卡
• 7、气泡式选项卡
• 8、去除边框
• 9、去除圆角
• 10、去除圆角及边框

标准示例：

标准用法：

					
#示例一
<div class="easyui-tabs theme-tab-blue-block" 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-blue-block" 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-blue-block" 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-blue-block" 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-red-block 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-blue-block 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-green-block 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-black-block 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-red-block theme-tab-line-bold 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-blue-block theme-tab-line-bold 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-green-block theme-tab-line-bold 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-black-block theme-tab-line-bold 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-blue-block 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-blue-block 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-blue-block" data-options="tabPosition:'top',plain:true,pill: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-blue-block 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-blue-block 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-blue-block 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>