Panel Purecolor Style 2.x

快速索引

• 1、标准示例
• 2、标准用法
• 3、可选颜色
• 4、可选样式
• 5、边框显示圆角
• 6、边框禁用圆角
• 7、不显示边框

标准示例：

标准用法：

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


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


#示例三 
<div class="easyui-panel" title="Custom Panel Tools" data-options="iconCls:'icon-save',closable:true,tools:'#tt',headerCls:'panel-bar-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="Nested Panel" data-options="headerCls:'panel-bar-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="Red" data-options="closable:true,headerCls:'panel-bar-red'"></div>


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

可选样式示例：

可选样式用法：

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


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

		
				

边框显示圆角示例：

边框显示圆角用法：

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

边框禁用圆角示例：

边框禁用圆角用法：

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

不显示边框示例：

不显示边框用法：

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