网站前端_EasyUI.基础入门.0003.使用EasyUI Panel组件的最佳姿势?
1. 基础面板
<divid="p"class="easyui-panel"data-options="width:700,height:250,title:'基础面板'"><p>jQueryEasyUIframeworkhelpsyoubuildyourwebpageseasily.</p><ul><li>easyuiisacollectionofuser-interfacepluginbasedonjQuery.</li><li>easyuiprovidesessentialfunctionalityforbuildingmodem,interactive,javascriptapplications.</li><li>usingeasyuiyoudon'tneedtowritemanyjavascriptcode,youusuallydefinesuser-interfacebywritingsomeHTMLmarkup.</li><li>completeframeworkforHTML5webpage.</li><li>easyuisaveyourtimeandscaleswhiledevelopingyourproducts.</li><li>easyuiisveryeasybutpowerful.</li></ul></div>
2. 流式面板
<div><divid="p"class="easyui-panel"data-options="fit:true,title:'流式面板'"><p>Thepanelhasawidthof100%.</p></div></div>
3. 面板工具
<div><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:$('#p').panel('open')">打开</a><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:$('#p').panel('collapse')">收缩</a><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:$('#p').panel('expand')">展开</a><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:$('#p').panel('minimize')">最小</a><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:$('#p').panel('restore')">还原</a><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:$('#p').panel('maximize')">最大</a><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:$('#p').panel('close')">关闭</a></div><hr><divid="pbox"class="easyui-panel"data-options="width:700,height:300"><divid="p"class="easyui-panel"data-options="width:500,height:250,title:'面板工具'"><p>jQueryEasyUIframeworkhelpsyoubuildyourwebpageseasily.</p><ul><li>easyuiisacollectionofuser-interfacepluginbasedonjQuery.</li><li>easyuiprovidesessentialfunctionalityforbuildingmodem,interactive,javascriptapplications.</li><li>usingeasyuiyoudon'tneedtowritemanyjavascriptcode,youusuallydefinesuser-interfacebywritingsomeHTMLmarkup.</li><li>completeframeworkforHTML5webpage.</li><li>easyuisaveyourtimeandscaleswhiledevelopingyourproducts.</li><li>easyuiisveryeasybutpowerful.</li></ul></div></div>
4. 用户面板
<divid="p"class="easyui-panel"data-options="width:700,height:250,title:'用户面板',tools:'#usr_tools'"><p>jQueryEasyUIframeworkhelpsyoubuildyourwebpageseasily.</p><ul><li>easyuiisacollectionofuser-interfacepluginbasedonjQuery.</li><li>easyuiprovidesessentialfunctionalityforbuildingmodem,interactive,javascriptapplications.</li><li>usingeasyuiyoudon'tneedtowritemanyjavascriptcode,youusuallydefinesuser-interfacebywritingsomeHTMLmarkup.</li><li>completeframeworkforHTML5webpage.</li><li>easyuisaveyourtimeandscaleswhiledevelopingyourproducts.</li><li>easyuiisveryeasybutpowerful.</li></ul></div><divid="usr_tools"><ahref="javascript:void(0);"class="icon-add"onclick="javascript:alert('add')"></a><ahref="javascript:void(0);"class="icon-edit"onclick="javascript:alert('edit')"></a><ahref="javascript:void(0);"class="icon-cut"onclick="javascript:alert('cut')"></a><ahref="javascript:void(0);"class="icon-help"onclick="javascript:alert('help')"></a></div>
5. 数据加载
<divid="p"class="easyui-panel"data-options="width:700,height:250,title:'数据加载',tools:[{iconCls:'icon-reload',handler:function(){$('#p').panel('refresh','/easyui/_contents.html');}}]"></div>
6. 面板尾部
<divid="p"class="easyui-panel"data-options="width:700,height:250,title:'面板底部',footer:'#panel_foot'"><p>jQueryEasyUIframeworkhelpsyoubuildyourwebpageseasily.</p><ul><li>easyuiisacollectionofuser-interfacepluginbasedonjQuery.</li><li>easyuiprovidesessentialfunctionalityforbuildingmodem,interactive,javascriptapplications.</li><li>usingeasyuiyoudon'tneedtowritemanyjavascriptcode,youusuallydefinesuser-interfacebywritingsomeHTMLmarkup.</li><li>completeframeworkforHTML5webpage.</li><li>easyuisaveyourtimeandscaleswhiledevelopingyourproducts.</li><li>easyuiisveryeasybutpowerful.</li></ul></div><divid="panel_foot">面板底部</div>
7. 面板嵌套
<divid="pbox"class="easyui-panel"data-options="width:700,height:250,title:'主面板'"><divclass="easyui-layout"data-options="fit:true"><divid="pleft"data-options="region:'west',width:'20%'">左面板</div><divid="pcenter"data-options="region:'center',width:'60%'">中面板</div><divid="pright"data-options="region:'east',width:'20%'">右面板</div></div></div>
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。