網站前端_EasyUI.基礎入門.0002.帶你玩轉jQuery EasyUI Panel組件 ?

簡單介紹:

說明: Panel面板常當作其它內容的容器,可用于創建包含Layout布局/Tabs選項卡/Accordion折疊面板等基礎組件,還提供了內置的折疊/關閉/最大化/最小化的行為,你可以將它嵌入到網頁的任何位置.

基礎用法:

<div id="p" class="easyui-panel" title="面板-標題" data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true" >
    <p>面板-內容</p>
</div>

異步加載:

<!-- 注意: 必須添加easyui-panel類,不然在有些瀏覽器顯示不完整 -->
<div id="p" class="easyui-panel"></div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    var options = {
        width:500,
        height:150,
        iconCls:'icon-ok',
        title:'面板 - 標題',
        closable: true,
        href: '/easyui/data.json',
        cache: false,
        onLoad: function(){
            alert('notice: load remove data success!');
        }
    };
    $('#p').panel(options);
</script>

容器屬性:

id -> string

說明: 面板的id屬性

title -> string

說明: 顯示在面板頭部的標題文字

iconCls -> string

說明: 在面板顯示一個16*16圖標Css Class

width -> number

說明: 設置面板寬度

height -> number

說明: 設置面板高度

left -> number

說明: 設置面板的Left位置

top -> number

說明: 設置面板的Top位置

content -> string

說明: 面板的主體內容

<div id="p" class="easyui-panel" data-options="width:500,height:150,iconCls:'icon-save',title:'面板 - 標題',contet:''">
</div>

cls -> string

說明: 給面板添加一個Css Class

headerCls -> string

說明: 給面板頭部添加一個Css Class

bodyCls -> string

說明: 給面板主體添加一個Css Class

style -> object

說明: 給面板添加一個自定義格式樣式

<div id="p" class="easyui-panel"  data-options="width:500,height:150,cls:'p_panel',headerCls:'p_panel_header',iconCls:'icon-save',title:'測試',bodyCls:'p_panel_body'">
</div>

注意: 在data-options中使用style屬性其實是應用在整個panel上,且寫法必須是style:{padding: 10},而單獨使用標簽的style內聯樣式竟然應用在panel-body上,這個還是挺有意思~

collapsiable -> boolean

說明: 定義是否顯示折疊按鈕

minimizable -> boolean

說明: 定義是否顯示最小化按鈕

maximizable -> boolean

說明: 定義是否顯示最大化按鈕

closable -> boolean

說明: 定義是否顯示關閉按鈕

<div id="p" class="easyui-panel" data-options="width:500,height:150,iconCls:'icon-save',title:'面板 - 標題',collapsible:true,minimizable:true,maximizable:true,closable:true">
</div>

fit -> boolean

說明: 當為true時,面板尺寸適應其父元素

<div >
    <div id="p" class="easyui-panel" data-options="fit:true,width:250,height:150,iconCls:'icon-save',title:'面板 - 標題',closable:true">
    </div>
</div>

border -> boolean

說明: 定義是否顯示面板的邊框

doSize -> boolean

說明: 定義是否允許調整尺寸

noheader -> boolean

說明: 如果為true,面板的頭部不會被創建,會忽略title/width/height等屬性

<div id="p" class="easyui-panel" data-options="width:500,height:150,iconCls:'icon-save',title:'面板 - 標題',closable:true,border:true,doSize:true,noheader:true">
</div>

tools -> array/selector

說明: 定義工具組,數組每個對象必須包含iconCls和handler屬性,還支持選擇器,創建的新工具圖表自動添加到默認工具左邊

<div id="p" class="easyui-panel" data-options="width:500,height:150,iconCls:'icon-save',title:'面板-標題',closable:true,tools:[{iconCls:'icon-add', handler:function(e){alert('add')}},{iconCls:'icon-edit', handler:function(e){alert('edit')}}]">
</div>

<div id="p" class="easyui-panel" data-options="width:500,height:150,iconCls:'icon-save',title:'面板-標題',closable:true,tools:'#p_tools'">
</div>
<div id="p_tools">
    <a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>

collpsed -> boolean

說明: 定義初始化面板是不是折疊的.

minimized -> boolean

說明: 定義初始化面板是不是最小化

maxmized -> boolean

說明: 定義初始化面板是不是最大化

closed -> boolean

說明: 定義初始化面板是不是關閉的

href -> string

說明: 一個URL,用它加載遠程數據并且顯示在面板中,需要注意的是面板必須是打開時才會被加載,否則內容不會被加載,可用于創建惰性加載面板.

cache -> boolean

說明: 設置為true時就緩存從href加載的面板內容.

loadingMessage -> string

說明: 當加載遠程數據時在面板中顯示一條消息

extractor -> function

說明: 從Ajax響應中提取數據,處理函數接收data參數,常用于過濾數據返回作為結果.

<div id="p" class="easyui-panel" data-options="region:'center',width:800,height:300,iconCls:'icon-ok',title:'面板 - 標題',closable:true,href:'/easyui/data.json',cache:false,closed:true,loadingMessage:'Loading…',extractor: function(data){var d = JSON.parse(data);var s = JSON.stringify(d);return s;}">
</div>

容器事件:

onLoad -> function

說明: 當遠程數據被加載時觸發

onBeforeOpen -> function

說明: 面板打開前觸發,返回false就停止打開

onOpen() -> function

說明: 面板打開后觸發

onBeforeClose -> function

說明: 面板被關閉前觸發,返回false就取消關閉

onClose -> function

說明: 面板被關閉后觸發

onBeforeDestory -> function

說明: 面板銷毀前觸發,返回false就取消銷毀

onDestory -> function

說明: 面板被銷毀后觸發

onBeforeCollapse -> function

說明: 面板折疊后觸發,返回false被停止折疊

onCollapse -> function

說明: 面板折疊之后觸發

onBeforeExpand -> function

說明: 面板展開前被觸發,返回false被停止展開

onExpaned -> function

說明: 面板展開后被觸發

onResize -> function

說明: 面板調整尺寸后被觸發,處理函數接收width和height參數

onMove -> function

說明: 面板調整位置后被觸發,處理函數接收left和top參數

onMaximize -> function

說明: 窗口最大化時被觸發

onRestore -> function

說明: 窗口還原為他原始尺寸時被觸發

onMinimize -> function

說明: 窗口最小化時被觸發.

<div id="p" class="easyui-panel" data-options="width:500,height:150,iconCls:'icon-save',title:'面板 - 標題',collapsible:true,minimizable:true,maximizable:true,closable:true,href:'/easyui/data.json',cache:'false',onBeforeOpen:function(){
    alert('notice: exec before panel open');
},onOpen:function(){
    alert('notice: exec after panel open');
},onBeforeCollapse:function(){
    alert('notife: exec before panel collapse');
},onCollapse:function(){
    alert('notice: exec after panel collapse');
},onBeforeExpand:function(){
    alert('notice: exec before panel expand');
},onExpand:function(){
    alert('notice: exec after panel expand');
},onMaximize:function(){
    alert('notice: panel is maximizied');
},onMinimize:function(){
    alert('notice: panel is minimizied');
},onRestore:function(){
    alert('notice: panel is restored');
},onResize:function(width, height){
    alert('notice: panel width: '+width+' height: '+height);
},onMove:function(left, top){
    alert('notice: panel left: '+left+' top: '+top);
},onLoad:function(){
    alert('notice: panel start load remove data.')
}"></div>

容器接口:

options -> object

說明: 返回選項屬性

panel -> object

說明: 返回外面板對象

header -> object

說明: 返回面板頭部對象

body -> obejct

說明: 返回面板主體對象

setTitle -> property

說明: 設置頭部的標題文本,需要傳入title參數

open -> property

說明: 設置是否強制打開,需要傳入forceOpen為true時可繞開onBeforeOpen回調函數打開面板

close -> property

說明: 設置是否強制關閉,需要傳入forceClose為true時可繞開onBeforeClose回調函數關閉面板

destory -> property

說明: 設置是否強制銷毀,需要傳入forceDestory為true時可繞開onBeforeDestory回調函數銷毀面板

refresh -> property

說明: 刷新pannel加載遠程數據,可傳遞href參數將重寫舊的href屬性

resize -> property

說明: 設置面板尺寸并且做布局,需要傳入包含width/height/left/top的對象

move -> property

說明: 移動面板到新的位置,需要傳入包含left/top的對象

maximize -> property

說明: 面板適應它容器的尺寸

minimize ->  property

說明: 最小化面板

restore -> property

說明: 將最大化的面板還原為它原來的尺寸和位置

collapse -> property

說明: 折疊面板主體

expend -> property

說明: 展開面板主體

<fieldset>
    <legend>操作區</legend>
    <a href="#" class="easyui-linkbutton" onclick="javascript:console.log($('#p').panel('options'))">獲取選項</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:console.log($('#p').panel('panel'))">獲取面板</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:console.log($('#p').panel('header'))">獲取頭部</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:console.log($('#p').panel('body'))">獲取主體</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打開</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">關閉</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('refresh','/easyui/data.json')">刷新</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('maximize')">最大化</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('minimize')">最小化</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('restore')">還原</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('collapse')">折疊</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('expand')">展開</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('setTitle', '標題 - 面板')">改名</a>
</fieldset>
<!-- 注意: 必須添加easyui-panel類,不然在有些瀏覽器顯示不完整 -->
<div id="p" class="easyui-panel"></div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    var options = {
        width:500,
        height:150,
        iconCls:'icon-ok',
        title:'面板 - 標題',
        closed: true,
        closable: true,
    };
    var $p = $('#p').panel(options);
</script>