jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI界面。開發者不需要編寫複雜的javascript，也不需要對css樣式有深入的瞭解，開發者需要了解的只有一些簡單的html標籤。
本經驗是 【jQuery EasyUI從入門到精通】系列教程的第3部分，講述 jQuery EasyUI Web Demos之Panel。
工具/原料
筆記本電腦或是臺式機
互聯網
jQuery EasyUI
方法/步驟
Basic Panel，The panel is a container for other components or elements.
基本面板，面板是其他組件或元素的容器。
Basic Panel
The panel is a container for other components or elements.
jQuery EasyUI framework helps you build your web pages easily.
- easyui is a collection of user-interface plugin based on jQuery.
- easyui provides essential functionality for building modem, interactive, javascript applications.
- using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
- complete framework for HTML5 web page.
- easyui save your time and scales while developing your products.
- easyui is very easy but powerful.
最基本的面板，有打開面板和關閉面板兩個操作，運行效果，如下圖所示。
onclick="javascript:$('#p').panel('open')"
onclick="javascript:$('#p').panel('close')"
Panel Tools，Click the right top buttons to perform actions with panel.
面板工具，點擊右上方的按鈕執行面板相關動作。
Panel Tools
Click the right top buttons to perform actions with panel.
data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">
jQuery EasyUI framework helps you build your web pages easily.
- easyui is a collection of user-interface plugin based on jQuery.
- easyui provides essential functionality for building modem, interactive, javascript applications.
- using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
- complete framework for HTML5 web page.
- easyui save your time and scales while developing your products.
- easyui is very easy but powerful.
Panel Tools，運行效果，如下圖所示。
Custom Panel Tools（自定義面板工具），Click the right top buttons to perform actions with panel.
Custom Panel Tools
Click the right top buttons to perform actions with panel.
data-options="iconCls:'icon-save',closable:true,tools:'#tt'">
jQuery EasyUI framework helps you build your web pages easily.
- easyui is a collection of user-interface plugin based on jQuery.
- easyui provides essential functionality for building modem, interactive, javascript applications.
- using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
- complete framework for HTML5 web page.
- easyui save your time and scales while developing your products.
- easyui is very easy but powerful.
Custom Panel Tools（自定義面板工具），運行效果，如下圖所示。
Panel Footer（面板尾部），The panel footer is displayed at the bottom of the panel and can consist of any other components（面板尾部被現實在面板的底部，並且可以由任何其他組件組成。）.
Panel Footer
The panel footer is displayed at the bottom of the panel and can consist of any other components.
Footer Content.
面板尾部，運行效果，如下圖所示。
Load Panel Content（加載面板內容），Click the refresh button on top right of panel to load content（點擊面板右上方的刷新按鈕加載內容）.
Load Panel Content
Click the refresh button on top right of panel to load content.
data-options="
tools:[{
iconCls:'icon-reload',
handler:function(){
$('#p').panel('refresh', '_content.html');
}
}]
">
加載面板內容，運行效果，如下圖所示。
Nested Panel(嵌套式面板),The panel can be placed inside containers and can contain other components（該面板可以被放置在容器內部，區別可以容納其它組件。）.
Nested Panel
The panel can be placed inside containers and can contain other components.
Left Content
Right Content
Center Content
Nested Panel(嵌套式面板)，運行效果，如下圖所示。
Fluid Panel（流體面板），This example shows how to set the width of Panel to a percentage of its parent container（這個例子展示瞭如何設置面板的寬度通過其父容器的百分比）.
Fluid Panel
This example shows how to set the width of Panel to a percentage of its parent container.
The panel has a width of 100%.
Fluid Panel（流體面板），運行效果，如下圖所示。
注意事項
jQuery EasyUI插件依賴於JQuery，需要在easyui.min.js之前引入JQuery庫
除了引入easyui.min.js文件之外，還引入相應的庫文件。