JQuery EasyUI 对话框的使用方法
更新时间:2010年10月24日 16:19:34 作者:
jQuery EasyUI 对话框(Dialog)用法与EasyUI的窗口用法极为相似,最终的效果图也只与窗口的效果图差几个按钮
下面看一下EasyUI的对话框效果图
js代码:
<script language="javascript" type="text/javascript">
function Open_Dialog() {
$('#mydialog').show();
$('#mydialog').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加数据')
}
},{
text: '保存',
iconCls: 'icon-save',
handler: function() {
alert('保存数据')
}
}],
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
alert('提交数据');
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('取消');
}
}]
});
}
</script>
HTML代码
<span onclick="Open_Dialog()">弹框</span>
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="弹框练习">
<input id="txRoleID" type="hidden" runat="server" value="0" />
<label class="lbInfo">角色名称:</label>
<input id="txRolename" type="text" class="easyui-validatebox" required="true" runat="server" /><br />
<label class="lbInfo"> </label><input type="submit" onserverclick="saveRole" value="保存" runat="server" />
<label id="lbmsg" runat="server"></label>
</div>
下面来介绍Window的具体用法,首先来看属性大多数的属性和窗口(Window)的属性是相同的,下面列出一些 Dialog私有的属性:
事件
Dialog的事件和窗口(Window)的事件相同。
方法
除了”header”和”body”以外,Dialog的函数方法和窗口(Window)的相同
js代码:
复制代码 代码如下:
<script language="javascript" type="text/javascript">
function Open_Dialog() {
$('#mydialog').show();
$('#mydialog').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加数据')
}
},{
text: '保存',
iconCls: 'icon-save',
handler: function() {
alert('保存数据')
}
}],
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
alert('提交数据');
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('取消');
}
}]
});
}
</script>
HTML代码
复制代码 代码如下:
<span onclick="Open_Dialog()">弹框</span>
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="弹框练习">
<input id="txRoleID" type="hidden" runat="server" value="0" />
<label class="lbInfo">角色名称:</label>
<input id="txRolename" type="text" class="easyui-validatebox" required="true" runat="server" /><br />
<label class="lbInfo"> </label><input type="submit" onserverclick="saveRole" value="保存" runat="server" />
<label id="lbmsg" runat="server"></label>
</div>
下面来介绍Window的具体用法,首先来看属性大多数的属性和窗口(Window)的属性是相同的,下面列出一些 Dialog私有的属性:
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
title | 字符串 | 对话框的标题文本 | New Dialog |
collapsible | 布尔 | 定义是否显示可折叠按钮 | false |
minimizable | 布尔 | 定义是否显示最小化按钮 | false |
maximizable | 布尔 | 定义是否显示最大化按钮 | false |
resizable | 布尔 | 定义对话框是否可编辑大小 | false |
toolbar | 数组 | 对话框上的工具条,每个工具条包括: text, iconCls, disabled, handler etc. | null |
buttons | 数组 | 对话框底部的按钮,每个按钮包括: text, iconCls, handler etc. | null |
Dialog的事件和窗口(Window)的事件相同。
方法
除了”header”和”body”以外,Dialog的函数方法和窗口(Window)的相同
相关文章
jQuery操作CheckBox的方法介绍(选中,取消,取值)
本篇文章主要是对jQuery操作CheckBox的方法(选中,取消,取值)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助2014-02-02jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Slider Revolution插件是一款非常强大的插件了,我们可以利用它来制作出各种效果并且还支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器等等效果,具体我们来看看。2015-06-06
最新评论