Panel Block Style 1.x

快速索引

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

标准示例：

标准用法：

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


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


#示例三     
<div class="easyui-panel" title="<b>Custom Panel Tools</b>" data-options="closable:true,tools:'#tt',cls:'theme-title-block-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="cls:'theme-title-block-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>Custom Panel Tools</b>" data-options="closable:true,cls:'theme-title-block-red'"></div>

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

可选样式示例：

可选样式用法：

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

		
				

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

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

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


		
				

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

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

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

		
				

边框显示圆角示例：

边框显示圆角用法：

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

边框禁用圆角示例：

边框禁用圆角用法：

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

不显示边框示例：

不显示边框用法：

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