使用EasyUI Panel组件的最佳姿势?

2019独角兽企业重金招聘Python工程师标准>>>

1. 基础面板

1 2 3 4 5 6 7 8 9 10 11

<div id="p" class="easyui-panel" style="padding: 10px;" data-options="width:700,height:250,title:'基础面板'">     <p>jQuery EasyUI framework helps you build your web pages easily.</p>     <ul>         <li>easyui is a collection of user-interface plugin based on jQuery.</li>         <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>         <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>         <li>complete framework for HTML5 web page.</li>         <li>easyui save your time and scales while developing your products.</li>         <li>easyui is very easy but powerful.</li>     </ul> </div>

2. 流式面板

1 2 3 4 5

<div style="width:700px;height:250px;">     <div id="p" style="padding:10px;" class="easyui-panel" data-options="fit:true,title:'流式面板'">         <p>The panel has a width of 100%.</p>     </div> </div>

3. 面板工具

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<div>     <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打开</a>     <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#p').panel('collapse')">收缩</a>     <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#p').panel('expand')">展开</a>     <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#p').panel('minimize')">最小</a>     <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#p').panel('restore')">还原</a>     <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#p').panel('maximize')">最大</a>     <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">关闭</a> </div> <hr> <div id="pbox" class="easyui-panel" style="padding:10px;" data-options="width:700,height:300">     <div id="p" class="easyui-panel" style="padding:10px;" data-options="width:500,height:250,title:'面板工具'">             <p>jQuery EasyUI framework helps you build your web pages easily.</p>             <ul>                 <li>easyui is a collection of user-interface plugin based on jQuery.</li>                 <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>                 <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>                 <li>complete framework for HTML5 web page.</li>                 <li>easyui save your time and scales while developing your products.</li>                 <li>easyui is very easy but powerful.</li>             </ul>     </div> </div>

4. 用户面板

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id="p" class="easyui-panel" style="padding:10px;" data-options="width:700,height:250,title:'用户面板',tools:'#usr_tools'">     <p>jQuery EasyUI framework helps you build your web pages easily.</p>     <ul>         <li>easyui is a collection of user-interface plugin based on jQuery.</li>         <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>         <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>         <li>complete framework for HTML5 web page.</li>         <li>easyui save your time and scales while developing your products.</li>         <li>easyui is very easy but powerful.</li>     </ul> </div> <div id="usr_tools">     <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>

5. 数据加载

1 2 3 4 5 6

<div id="p" class="easyui-panel" style="padding:10px;" data-options="width:700,height:250,title:'数据加载',tools:[{     iconCls:'icon-reload',     handler: function(){         $('#p').panel('refresh', '/easyui/_contents.html');     } }]"></div>

 

6. 面板尾部

1 2 3 4 5 6 7 8 9 10 11 12

<div id="p" class="easyui-panel" style="padding:10px;" data-options="width:700,height:250,title:'面板底部',footer:'#panel_foot'">     <p>jQuery EasyUI framework helps you build your web pages easily.</p>     <ul>         <li>easyui is a collection of user-interface plugin based on jQuery.</li>         <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>         <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>         <li>complete framework for HTML5 web page.</li>         <li>easyui save your time and scales while developing your products.</li>         <li>easyui is very easy but powerful.</li>     </ul> </div> <div id="panel_foot" style="padding:5px;">面板底部</div>

7. 面板嵌套

1 2 3 4 5 6 7

<div id="pbox" class="easyui-panel" style="padding:5px;" data-options="width:700,height:250,title:'主面板'">     <div class="easyui-layout" data-options="fit:true">         <div id="pleft" style="padding:5px;" data-options="region:'west',width:'20%'">左面板</div>         <div id="pcenter" style="padding:5px;" data-options="region:'center',width:'60%'">中面板</div>         <div id="pright" style="padding:5px;" data-options="region:'east',width:'20%'">右面板</div>     </div> </div>

 

 

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信，还有更多惊喜哦~

 

本文出自 “满满李 - 运维开发之路” 博客，请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1892415

转载于:https://my.oschina.net/learnbo/blog/849213