jQueryEasyUI Panel的基本使用

1、基本使用

代碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Pannel</title>
    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css"
rel="stylesheet"
type="text/css"
/>
    <link href="/jquery-easyui-1.2.4/themes/icon.css"
rel="stylesheet"
type="text/css"
/>
    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js"
type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#pnl").panel({
                title:
"標題",
                width: 300,
                height: 200
            });
        });
    </script>
</head>
<body>
    <div id="pnl">
        Content
    </div>
</body>
</html>

或

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Pannel</title>
    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css"
rel="stylesheet"
type="text/css"
/>
    <link href="/jquery-easyui-1.2.4/themes/icon.css"
rel="stylesheet"
type="text/css"
/>
    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js"
type="text/javascript"></script>
</head>
<body>
    <div id="pnl"
class="easyui-panel"
title="標題"
style="width: 300px; height: 200px;">
        Content
    </div>
</body>
</html>

效果圖：

2、icon的使用

代碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Pannel</title>
    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css"
rel="stylesheet"
type="text/css"
/>
    <link href="/jquery-easyui-1.2.4/themes/icon.css"
rel="stylesheet"
type="text/css"
/>
    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js"
type="text/javascript"></script>
    <script type="text/javascript">
        $(function
() {
            $("#pnl").panel({
                title:
"標題",
                width: 300,
                height: 200,
                iconCls:
"icon-add",
                collapsible:
true,
                minimizable:
true,
                maximizable:
true,
                closable:
true
            });
        });
    </script>
</head>
<body>
    <div id="pnl">
        Content
    </div>
</body>
</html>

效果圖：

3、Button事件

代碼：

<script type="text/javascript">
    $(function
() {
        $("#pnl").panel({
            title:
"標題",
            width: 300,
            height: 200,
            iconCls:
"icon-add",
            collapsible:
true,
            minimizable:
true,
            maximizable:
true,
            closable:
true,
            onBeforeClose:
function 
() {
                alert("Close");
            }
        });
    });
</script>

4、href屬性

代碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Pannel</title>
    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css"
rel="stylesheet"
type="text/css"
/>
    <link href="/jquery-easyui-1.2.4/themes/icon.css"
rel="stylesheet"
type="text/css"
/>
    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js"
type="text/javascript"></script>
    <script type="text/javascript">
        $(function
() {
            $("#pnl").panel({
                title:
"標題",
                width: 300,
                height: 200,
                iconCls:
"icon-add",
                collapsible:
true,
                minimizable:
true,
                maximizable:
true,
                closable:
true,
                href:
"Content.aspx"
            });
        });
    </script>
</head>
<body>
    <div id="pnl">
    </div>
</body>
</html>

Content.aspx

<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
    <title></title>
</head>
<body>
    <form
id="form1" runat="server">
    <div
style="padding: 5px;">
        <asp:Label
ID="lblUserName" runat="server" Text="用戶名"></asp:Label>:
        <asp:TextBox
ID="txtUserName" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

效果圖：

5、參數

名字	類型	描述	默認值
title	字符串	在面板頭部顯示的標題文本	null
iconCls	字符串	一個CSS類來顯示在面板中的16x16圖標	null
width	數字	設置面板的寬度	auto
height	數字	設置面板的高度	auto
left	數字	設置面板左側位置	null
top	數字	設置面板的頂部位置	null
cls	字符串	給面板添加一個CSS類	null
headerCls	字符串	給面板頭部添加一個CSS類	null
bodyCls	字符串	給面板主體添加一個CSS類	null
style	對象	給面板自定義樣式	{}
fit	布爾	當設置爲true，面板尺寸將適合它的父容器。	false
border	布爾	定義面板的邊框	true
doSize	布爾	當設置爲true，面板載創建的時候將被調整和重新佈局	true
collapsible	布爾	定義是否顯示可摺疊定義按鈕	false
minimizable	布爾	定義是否顯示最小化按鈕	false
maximizable	布爾	定義是否顯示最大化按鈕	false
closable	布爾	定義是否顯示關閉按鈕	false
tools	數組	自定義工具，每個工具可以包含兩個屬性：iconCls and handler	[]
collapsed	布爾	定義在初始化的時候摺疊面板	false
minimized	布爾	定義在初始化的時候最小化面板	false
maximized	布爾	定義在初始化的時候最大化面板	false
closed	布爾	定義在初始化的時候關閉面板	false
href	字符串	一個遠程的URL加載數據，然後顯示在面板中	null
loadingMessage	字符串	當加載遠程數據時，在面板中顯示的信息	Loading…

6、事件

名字	參數	描述
onLoad	none	當遠程數據加載時觸發
onBeforeOpen	none	當面板打開之前觸發
onOpen	none	當面板打開之後觸發
onBeforeClose	none	當面板關閉之前觸發
onClose	none	當面板關閉之後觸發
onBeforeDestroy	none	當面板銷燬之前觸發
onDestroy	none	當面板關閉之後觸發
onBeforeCollpase	none	當面板摺疊之前觸發
onCollapse	none	當面板摺疊之後觸發
onBeforeExpand	none	當面板展開之前觸發
onExpand	none	當面板展開之後觸發
onResize	width, height	當面板調整大小之後觸發width: 新的寬度;height: 新的高度
onMove	left,top	當面板移動之後觸發left: 新的左側位置top: 新的頂部位置
onMaximize	none	當窗口最大化的時候被觸發
onRestore	none	當窗口恢復到原來的大小時被觸發
onMinimize	none	當窗口最小化的時候被觸發

7、方法

名字	參數	描述
options	none	返回設置的屬性值
panel	none	返回面板對象
header	none	返回面板頭部對象
body	none	返回面板主體對象
setTitle	title	設置面板頭部標題
open	forceOpen	當forceOpen設置爲true，面板被打開的時候忽略onBeforeOpen回調函數
close	forceClose	當forceClose設置爲true，面板被關閉的時候忽略onBeforeClose回調函數
destroy	forceDestroy	當forceDestroy設置爲true，面板被銷燬的時候忽略onBeforeDestroy回調函數
refresh	none	當設置了href值時，刷新面板來加載遠程數據
resize	options	設置面板的大小和佈局，這些選項包含以下的屬性：width: 新面板的寬度; height: 新面板的高度; left: 新面板的左側位置; top: 新面板的頂部位置
move	options	移動面板到一個新的位置，這些選項包含以下屬性: left: 新面板的左側位置;top: 新面板的頂部位置