使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
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
匿名
匿名 您还未登录

Panel

Document
Native
Basic
Panel Tools
Custom Tools
Panel Footer
Load Content
Nested Panel
Panel Header Alignment
Fluid Panel
1.x Plus
默认样式
纯色样式
简约样式
下划线样式
块样式
2.x Plus
默认样式
纯色样式
简约样式
下划线样式
块样式

Panel Underline Style 2.x

标准示例:

标准用法:

					
#示例一
<div class="easyui-panel" title="<b>Basic Panel</b>" data-options="headerCls:'panel-underline-blue'"></div>


#示例二
<div class="easyui-panel" title="<b>Panel Footer</b>" data-options="footer:'#ft',headerCls:'panel-underline-blue'"></div>
<div id="ft">
    Footer Content.
</div>


#示例三 
<div class="easyui-panel" title="<b>Custom Panel Tools</b>" data-options="iconCls:'icon-save',closable:true,tools:'#tt',headerCls:'panel-underline-blue'"></div>
<div id="tt">
    <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>
    <a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>
    <a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>
</div>


#示例四
<div class="easyui-panel" title="<b>Nested Panel</b>" data-options="headerCls:'panel-underline-blue'">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" style="width:100px;">
            Left Content
        </div>
        <div data-options="region:'east'" style="width:100px;">
            Right Content
        </div>
        <div data-options="region:'center'">
            Center Content
        </div>
    </div>
</div>

					
				

可选颜色示例:

可选颜色用法:

					
#调用方法     
<div class="easyui-panel" title="<b>Red</b>" data-options="closable:true,headerCls:'panel-underline-red'"></div>


#可选颜色      
.panel-underline-red
.panel-underline-orange
.panel-underline-yellow
.panel-underline-olive
.panel-underline-green
.panel-underline-teal
.panel-underline-blue
.panel-underline-darkblue
.panel-underline-violet
.panel-underline-purple
.panel-underline-pink
.panel-underline-brown
.panel-underline-grayish
.panel-underline-grey
.panel-underline-black
		
				

可选样式示例:

可选样式用法:

					
#带左副标题示例  
<div class="easyui-panel" title="<b>Custom Panel Tools</b><span>这里左侧副标题样式</span>" data-options="closable:true,footer:'#ft1',headerCls:'panel-underline-blue panel-description'"></div>
<div id="ft1">
    Footer Content.
</div>
		
				

边框显示圆角示例:

边框显示圆角用法:

					
#示例一
<div class="easyui-panel" title="<b>Basic Panel</b>" data-options="cls:'panel-radius',headerCls:'panel-underline-blue'"></div>
		
				

边框禁用圆角示例:

边框禁用圆角用法:

					
#示例一
<div class="easyui-panel" title="<b>Basic Panel</b>" data-options="cls:'panel-unradius',headerCls:'panel-underline-blue'">禁用圆角</div>
		
				

不显示边框示例:

不显示边框用法:

					
#示例一
<div class="easyui-panel" title="<b>Basic Panel</b>" data-options="border:false,headerCls:'panel-underline-blue'">这里是内容</div>
		
				

不显示标题栏背景色示例:

不显示标题栏背景色用法:

					
#示例一       
<div class="easyui-panel" title="<b>Custom Panel Tools</b><span>这里左侧副标题样式</span>" data-options="closable:true,headerCls:'panel-underline-blue panel-description panel-unbackground'"></div>
		
				

不显示标题栏下划线示例:

不显示标题栏下划线用法:

					
#示例一       
<div class="easyui-panel" title="<b>Custom Panel Tools</b><span>这里左侧副标题样式</span>" data-options="closable:true,headerCls:'panel-underline-blue panel-description panel-unbackground panel-bar-unborder'"></div>