jQueryEasyUI Panel的基本使用

最新推荐文章于 2024-11-11 23:26:32 发布

weixin_34357887

最新推荐文章于 2024-11-11 23:26:32 发布

阅读量56

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/libingql/archive/2011/09/26/2190704.html

版权

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: 新面板的顶部位置