使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

Tabs

Document
Native
Basic
Auto Height
Hover Tabs
Nested Tabs
Strip Tools
Tabs Tools
Tabs Style
Tab Position
Fixed Tab Width
Tabs with Images
Tabs with DropDown
Fluid Tabs
1.x Plus
默认样式
简约样式
下划线样式
卡片样式
气泡样式
2.x Plus
默认样式
简约样式
下划线样式
上划线样式
卡片样式
气泡样式
横栏样式
自定义配置
Extend

Tabs Underline Style 1.x

标准示例:

标准用法:

					
#示例一
<div class="easyui-tabs theme-tab-blue-line" 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-line" 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-line" 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-line" 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-line 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-line 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-line 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-line 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-line 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-line 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-line" 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-line 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-line 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-line 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>