網站前端_EasyUI.基礎入門.0003.使用EasyUI Panel組件的最佳姿勢?

1. 基礎面板

wKioL1h80DzQ-7ORAABDwsOfbtI895.png

<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. 流式面板

wKioL1h80GHQoemGAAAWmN6r0Gg165.png

<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. 面板工具

wKiom1h80-HQP-98AABZp5tb4TU641.png

<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. 用戶面板

wKioL1h80Nfx1Zn8AABMXiacBck654.png

<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. 數據加載

wKiom1h80QzCMQIeAABEeb0xdEE587.png

<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. 面板尾部

wKiom1h80Tmx_4M1AABDdby2Z-M051.png

<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. 面板嵌套

wKioL1h80V-TIdHUAAAcd82mplQ096.png

<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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章