jQueryEasyUI Panel的基本使用
来源:互联网 发布:淘宝客贷入口在哪儿 编辑:程序博客网 时间:2024/05/18 15:27
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: 新面板的顶部位置
转载来自:http://www.cnblogs.com/libingql/archive/2011/09/26/2190704.html
- jQueryEasyUI Panel的基本使用
- jQueryEasyUI Panel的基本使用
- jQueryEasyUI DateBox的基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- 常用Mysql语句
- CS224D Lecture2 札记
- java 比较数据大小
- 夜神云手机技术正式发布,App试玩时代开启
- Android之Handler用法总结
- jQueryEasyUI Panel的基本使用
- android中的内存优化
- java源代码分析----jvm.dll装载过程
- JQuery 运行原理分析
- Ubuntu查看内存条信息
- hdu 5510 -Bazinga(kmp)
- TreeMap利用Comparator接口排序
- React-native ListView不滚动
- jar包与lib包的区别