第一百九十九節，jQuery EasyUI，Panel(面板)組件

jQuery EasyUI，Panel(面板)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

 

本節課重點了解EasyUI中Panel(面板)組件的使用方法，這個組件不依賴於其他組件。

 

一．加載方式

//class 加載方式
<div class="easyui-panel" data-options="closable:true"title="My Panel" style="width:500px;">
　　<p>內容區域</p>
</div>

panel()將元素執行面板方法

//JS 加載調用
$('#box').panel({
　　width:500,
　　height:150,
　　title : '面板',
　　closable : true,
});

 

 

二．屬性列表

 

id  string 面板的 ID 值。默認為 null。設置面板的id

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        id:'pox'           //設置面板的id
    });
});

 

title  string 面板顯示的標題文本。默認為 null。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板'     //面板顯示的標題
    });
});

 

iconCls  string 設置一個 16x16 圖標的 CSS 類 ID 顯示在面板左上角。默認為 null。設置面板標題左邊圖標

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit'  //設置面板標題左邊圖標
    });
});

 

width  number 設置面板寬度。默認值 auto。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150         //設置面板高度
    });
});

 

height  number 設置面板高度。默認值 auto。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150         //設置面板高度
    });
});

 

left  number 設置面板距離左邊的位置（即 X 軸位置）。默認為null。，結合定位使用

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        left:200,           //設置面板距離左邊的位置（即 X 軸位置）
        top:200             //設置面板距離頂部的位置（即 Y 軸位置）
    });
    $('#box').panel('panel').css('position','absolute'); //獲取面板對象，設置定位
});

 

top  number 設置面板距離頂部的位置（即 Y 軸位置）。默認為null。結合定位使用

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        left:200,           //設置面板距離左邊的位置（即 X 軸位置）
        top:200             //設置面板距離頂部的位置（即 Y 軸位置）
    });
    $('#box').panel('panel').css('position','absolute'); //獲取面板對象，設置定位
});

 

cls  string 添加一個 CSS 類 ID 到面板。默認為 null。給面板添加一個class來設置css

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        cls:'pppox'         //給面板添加一個class來設置css
    });
});

 

headerCls  string 添加一個 CSS 類 ID 到面板頭部。默認為 null。給面板頭部添加一個class來設置css

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        headerCls:'pppox'         //給面板頭部添加一個class來設置css
    });
});

 

bodyCls  string 添加一個 CSS 類 ID 到面板正文部分。默認為null。給面板正文添加一個class來設置css

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        bodyCls:'pppox'         //給面板正文添加一個class來設置css
    });
});

 

style  subject 添加一個當前指定樣式到面板。默認為{}。添加一個指定css樣式到面板，注意如果給內置的樣式有沖突可以沒有效果

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        bodyCls:'pppox',         //給面板正文添加一個class來設置css
        style: {                //添加一個指定css樣式到面板，注意如果給內置的樣式有沖突可以沒有效果
            'min-height': '250px'
        }
    });
});

 

fit  boolean 當設置為 true 的時候面板大小將自適應父容器。默認為 false。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        bodyCls:'pppox',         //給面板正文添加一個class來設置css
        fit:true                //當設置為 true 的時候面板大小將自適應父容器。默認為 false。
    });
});

 

border  boolean 定義是否顯示面板邊框。默認為 true

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        border:false         //定義是否顯示面板邊框。默認為 true
    });
});

 

doSize  boolean 如果設置為 true，在面板被創建的時候將重置大小和重新布局。默認為 true。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        doSize:true           //如果設置為 true，在面板被創建的時候將重置大小和重新布局。默認為 true。
    });
});

 

noheader  boolean 如果設置為 true。將不會創建面板標題。默認為false。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        noheader:true         //如果設置為 true。將不會創建面板標題。默認為false。
    });
});

 

content  string 面板主體內容。默認為 null。，設置面板主體內容

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        content :'這是修改后的主體內容'         //設置面板主體內容
    });
});

 

collapsible  boolean 定義是否顯示可折疊按鈕。默認為 false。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true         //定義是否顯示可折疊按鈕。默認為 false。
    });
});

 

minimizable  boolean 定義是否顯示最小化按鈕。默認為 false。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        minimizable :true     //定義是否顯示最小化按鈕。默認為 false。
    });
});

 

maximizable  boolean 定義是否顯示最大化按鈕。默認為 false。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        maximizable :true     //定義是否顯示最大化按鈕。默認為 false。
    });
});

 

closable  boolean 定義是否顯示關閉按鈕。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        closable :true     //定義是否顯示關閉按鈕。
    });
});

 

tools   array,selector自定義工具菜單，可用值：(1)數 組 ， 每 個 元 素 都 包 含 ’iconCls’ 和’handler’屬性。(2)指向工具菜單的選擇器。默認為[]。

自定義根據按鈕接收一個數組，數組里接收對象，以鍵值對的方式設置iconCls圖標，和handler點擊后的操作，要設置多個圖標數組里就接收多個對象

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        closable :true,     //定義是否顯示關閉按鈕。
        tools:[{            //自定義工具菜單
            iconCls:'icon-edit',    //iconCls圖標
            handler:function () {
                alert('點擊后的操作');    //handler點擊后的操作
            }
        }]
    });
});

 

collapsed  boolean 定義是否在初始化的時候折疊面板。默認值為false。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        collapsed :true     //定義是否在初始化的時候折疊面板。默認值為false。
    });
});

 

minimized  boolean 定義是否在初始化的時候最小化面板。默認值為false。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        minimized :true     //定義是否在初始化的時候最小化面板。默認值為false。
    });
});

 

maximized  boolean 定義是否在初始化的時候最大化面板。默認值為false。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        maximized :true     //定義是否在初始化的時候最大化面板。默認值為false。
    });
});

 

closed  boolean 定義是否在初始化的時候關閉面板。默認為false。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        closed :true     //定義是否在初始化的時候關閉面板。默認為false。
    });
});

 

href  string 從 URL 讀取遠程數據並且顯示到面板。默認為null。，值為要加載的文件地址采用的ajax加載

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/'     //URL 讀取遠程數據並且顯示到面板。默認為null。
    });
});

 

cache  boolean 如果為 true，在超鏈接載入時緩存面板內容。默認為 true。，也就是緩存遠程數據

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        cache:true          //如果為 true，在超鏈接載入時緩存面板內容。默認為 true。，也就是緩存遠程數據
    });
});

 

loadingMessage   string 在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。設置遠程加載時的內容

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中'     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
    });
});

 

extractor   function 定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板，data接收遠程數據

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        }
    });
});

 

 

三．事件列表

 

onBeforeLoad  none 在加載遠程數據之前觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeLoad:function () {
            alert('在加載遠程數據之前觸發。');
        }
    });
});

 

onLoad  none 在加載遠程數據時觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onLoad:function () {
            alert('在加載遠程數據時觸發。');
        }
    });
});

 

onBeforeOpen  none在打開面板之前觸發，返回 false 可以取消打開操作。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeOpen:function () {
            alert('在打開面板之前觸發，返回 false 可以取消打開操作。');
            // return false;  //返回false時，打開之后操作將取消
        },
        onOpen:function () {
            alert('在打開面板之后觸發。'); }
    });
});

 

onOpen  none 在打開面板之后觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeOpen:function () {
            alert('在打開面板之前觸發，返回 false 可以取消打開操作。');
            // return false;  //返回false時，打開之后操作將取消
        },
        onOpen:function () {
            alert('在打開面板之后觸發。'); }
    });
});

 

onBeforeClose  none在關閉面板之前觸發，返回 false 可以取消關閉操作。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeClose:function () {
            alert('在關閉面板之前觸發，返回 false 可以取消關閉操作。');
            return false;
        },
        onClose:function () {
            alert('在面板關閉之后觸發。'); }
    });
});

 

onClose  none 在面板關閉之后觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeClose:function () {
            alert('在關閉面板之前觸發，返回 false 可以取消關閉操作。');
            return false;
        },
        onClose:function () {
            alert('在面板關閉之后觸發。'); }
    });
});

 

onBeforeDestroy  none在面板銷毀之前觸發，返回 false 可以取消銷毀操作。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeDestroy:function () {
            alert('在面板銷毀之前觸發，返回 false 可以取消銷毀操作。');
            return false;
        },
        onDestroy:function () {
            alert('在面板銷毀之后觸發。'); }
    });
});

 

onDestroy  none 在面板銷毀之后觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeDestroy:function () {
            alert('在面板銷毀之前觸發，返回 false 可以取消銷毀操作。');
            return false;
        },
        onDestroy:function () {
            alert('在面板銷毀之后觸發。'); }
    });
});

 

onBeforeCollapse  none在面板折疊之前觸發，返回 false 可以終止折疊操作。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeCollapse:function () {
            alert('在面板折疊之前觸發，返回 false 可以終止折疊操作。');
            // return false;
        },
        onCollapse:function () {
            alert('在面板折疊之后觸發。'); }
    });
});

 

onCollapse  none 在面板折疊之后觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeCollapse:function () {
            alert('在面板折疊之前觸發，返回 false 可以終止折疊操作。');
            // return false;
        },
        onCollapse:function () {
            alert('在面板折疊之后觸發。'); }
    });
});

 

onBeforeExpand  none在面板展開之前觸發，返回 false 可以終止展開操作。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeExpand:function () {
            alert('在面板展開之前觸發，返回 false 可以終止展開操作。');
            // return false;
        },
        onExpand:function () {
            alert('在面板展開之后觸發。'); }
    });
});

 

onExpand  none 在面板展開之后觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onBeforeExpand:function () {
            alert('在面板展開之前觸發，返回 false 可以終止展開操作。');
            // return false;
        },
        onExpand:function () {
            alert('在面板展開之后觸發。'); }
    });
});

 

onResize   width,height在面板改變大小之后觸發。width：新的寬度。height：新的高度。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onResize:function (width,height) {
            alert('在面板改變大小之后觸發。' +width+ '：新的寬度。' +height+ '：新的高度。'); }
    });
});

 

onMove   left,top在面板移動之后觸發。left：新的左邊距位置。top：新的上邊距位置。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onMove:function (left,top) {
            alert('在面板移動之后觸發。' +left+ '：新左邊位置。' +top+ '：新頭部位置。'); }
    });
});

 

onMaximize   none 在窗口最大化之后觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onMaximize:function () {
            alert('在窗口最大化之后觸發。'); }
    });
});

 

onRestore  none 在窗口恢復到原始大小以后觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onRestore:function () {
            alert('在窗口恢復到原始大小以后觸發。'); }
    });
});

 

onMinimize  none 在窗口最小化之后觸發。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        },
        onMinimize:function () {
            alert('在窗口最小化之后觸發。'); }
    });
});

 

 

三．方法列表

 

options  none 返回屬性對象。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        }
    });
    alert($('#box').panel('options'));   //返回屬性對象。
});

 

panel  none 返回面板對象。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        }
    });
    alert($('#box').panel('panel'));   //返回面板對象。
});

 

header  none 返回面板頭對象。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        }
    });
    alert($('#box').panel('header'));   //返回面板頭對象。
});

 

body  none 返回面板主體對象。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        }
    });
    alert($('#box').panel('body'));   //返回面板主體對象。
});

 

setTitle  title 設置面板頭的標題文本。

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        }
    });
    alert($('#box').panel('setTitle','設置標題'));   //設置面板頭的標題文本。
});

 

open  forceOpen 在'forceOpen'參數設置為 true 的時候，打開面板時將跳過'onBeforeOpen'回調函數。跳過在打開面板之后觸發

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        }
    });
    $('#box').panel('open', true);   //參數設置為 true 的時候，打開面板時將跳過'onBeforeOpen'回調函數
});

 

close  forceClose 在'forceClose'參數設置為 true 的時候，關閉面板時將跳過'onBeforeClose'回調函數。，跳過關閉之前觸發

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        }
    });
    $('#box').panel('close', true);   //參數設置為 true 的時候，關閉面板時將跳過'onBeforeClose'回調函數
});

 

destroy  forceDestroy在'forceDestroy'參數設置為 true 的時候，銷毀面板時將跳過'onBeforeDestory'回調函數。跳過銷毀之前觸發

/**
<div id="box">內容部分</div>
 **/

$(function () {
    $('#box').panel({
        title: '面板',     //面板顯示的標題
        width:500,          //設置面板寬度
        height:150,         //設置面板高度
        iconCls:'icon-edit',  //設置面板標題左邊圖標
        collapsible :true,         //定義是否顯示可折疊按鈕。默認為 false。
        minimizable :true,     //定義是否顯示最小化按鈕。默認為 false。
        maximizable :true,     //定義是否顯示最大化按鈕。默認為 false。
        closable :true,     //定義是否顯示關閉按鈕。
        href :'is_user.php/',     //URL 讀取遠程數據並且顯示到面板。默認為null。
        loadingMessage:'數據加載中',     //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。
        extractor:function (data) {         //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板
            return data.substring(0,2);  //加收外部數據，截取后返回
        }
    });
    $('#box').panel('destroy', true);   //參數設置為 true 的時候，銷毀面板時將跳過'onBeforeDestory'回調函數
});

 

 

refresh  href 刷新面板來裝載遠程數據。如果'href'屬性有了新配置，它將重寫舊的'href'屬性。

//刷新當前內容
$('#box').panel('refresh');

 

//刷新指定載入內容
$('#box').panel('refresh', 'content.php');

 

 

resize  options設置面板大小和布局。參數對象包含下列屬性：width：新的面板寬度。height：新的面板高度。left：新的面板左邊距位置。top：新的面板上邊距位置。

    $('#box').panel('resize', {         //設置面板大小和布局
        width : 100,
        height : 100,
        left : 100,
        top : 100
    });

 

move  options 移動面板到一個新位置。參數對象包含下列屬性：left：新的左邊距位置。top：新的上邊距位置。

    $('#box').panel('move', {         //設置移動的坐標
        left : 100,
        top : 100
    });

 

maximize  none 最大化面板到容器大小。

 $('#box').panel('maximize');    //最大化面板到容器大小。

 

minimize  none 最小化面板。

    $('#box').panel('minimize');    //最小化面板。

 

restore  none 恢復最大化面板回到原來的大小和位置。

    $('#box').panel('restore');    //恢復最大化面板回到原來的大小和位置。

 

collapse  animate 折疊面板主題。

    $('#box').panel('collapse');    //折疊面板主題。

 

expand  animate 展開面板主體。

    $('#box').panel('expand');    //展開面板主體。

 

$.fn.panel.defaults 重寫默認值對象。

$.fn.panel.defaults.border = false;