Panel Solid color Style 1.x

快速索引

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

标准示例：

标准用法：

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

#示例二
<div class="easyui-panel" title="Panel Footer" data-options="footer:'#ft',cls:'theme-panel-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',cls:'theme-panel-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="cls:'theme-panel-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="Custom Panel Tools" data-options="closable:true,cls:'theme-panel-red'"></div>

#可选颜色
.theme-panel-red
.theme-panel-orange
.theme-panel-green
.theme-panel-blue
.theme-panel-deepblue
.theme-panel-black
					
				

可选样式示例：

可选样式用法：

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


#带下副标题示例      
<div class="easyui-panel" title="Custom Panel Tools<p>这里下侧副标题样式</p>" data-options="closable:true,cls:'theme-panel-blue theme-header-unheight'"> 
</div>
		
				

边框显示圆角示例：

边框显示圆角用法：

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

边框禁用圆角示例：

边框禁用圆角用法：

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

不显示边框示例：

不显示边框用法：

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