Panel Default Style 1.x

快速索引

• 1、标准示例
• 2、标准用法
• 3、可选样式
• 4、不显示标题栏背景色
• 5、不显示标题栏下划线
• 6、边框显示圆角
• 7、边框禁用圆角
• 8、不显示边框

标准示例：

标准用法：

					
#示例一
<div id="p" class="easyui-panel" title="Basic Panel"></div>

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

#示例三      
<div class="easyui-panel" title="Custom Panel Tools" data-options="iconCls:'icon-save',closable:true,tools:'#tt'"></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">
    <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="Custom Panel Tools<span>这里左侧副标题样式</span>" data-options="closable:true,headerCls:'panel-description'"></div>


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

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

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

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


#示例二
<div class="easyui-panel" title="Custom Panel Tools<p>这里下侧副标题样式</p>" style=" padding:10px;" data-options="closable:true,headerCls:'panel-subcaption panel-unbackground'"></div>

		
				

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

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

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


#示例二
<div class="easyui-panel" title="Custom Panel Tools<p>这里下侧副标题样式</p>" style=" padding:10px;" data-options="closable:true,headerCls:'panel-subcaption panel-unbackground panel-bar-unborder'"></div>
		
				

边框显示圆角示例：

边框显示圆角用法：

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

边框禁用圆角示例：

边框禁用圆角用法：

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

不显示边框示例：

不显示边框用法：

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