JQuery EasyUI 对话框的用法
来源:互联网 发布:燕山大学 双一流 知乎 编辑:程序博客网 时间:2024/06/05 15:36
jQuery EasyUI 对话框(Dialog)用法与EasyUI的窗口用法极为相似,最终的效果图也只与窗口的效果图差几个按钮,下面看一下EasyUI的对话框效果图
js代码:
代码
1 <script language="javascript" type="text/javascript">
2 function Open_Dialog() {
3 $('#mydialog').show();
4 $('#mydialog').dialog({
5 collapsible: true,
6 minimizable: true,
7 maximizable: true,
8 toolbar: [{
9 text: '添加',
10 iconCls: 'icon-add',
11 handler: function() {
12 alert('添加数据')
13 }
14 },{
15 text: '保存',
16 iconCls: 'icon-save',
17 handler: function() {
18 alert('保存数据')
19 }
20 }],
21 buttons: [{
22 text: '提交',
23 iconCls: 'icon-ok',
24 handler: function() {
25 alert('提交数据');
26 }
27 }, {
28 text: '取消',
29 handler: function() {
30 $('#mydialog').dialog('取消');
31 }
32 }]
33 });
34 }
35 </script>
2 function Open_Dialog() {
3 $('#mydialog').show();
4 $('#mydialog').dialog({
5 collapsible: true,
6 minimizable: true,
7 maximizable: true,
8 toolbar: [{
9 text: '添加',
10 iconCls: 'icon-add',
11 handler: function() {
12 alert('添加数据')
13 }
14 },{
15 text: '保存',
16 iconCls: 'icon-save',
17 handler: function() {
18 alert('保存数据')
19 }
20 }],
21 buttons: [{
22 text: '提交',
23 iconCls: 'icon-ok',
24 handler: function() {
25 alert('提交数据');
26 }
27 }, {
28 text: '取消',
29 handler: function() {
30 $('#mydialog').dialog('取消');
31 }
32 }]
33 });
34 }
35 </script>
HTML代码
代码
1 <span onclick="Open_Dialog()">弹框</span>
2 <div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="弹框练习">
3 <input id="txRoleID" type="hidden" runat="server" value="0" />
4 <label class="lbInfo">角色名称:</label>
5 <input id="txRolename" type="text" class="easyui-validatebox" required="true" runat="server" /><br />
6 <label class="lbInfo"> </label><input type="submit" onserverclick="saveRole" value="保存" runat="server" />
7 <label id="lbmsg" runat="server"></label>
8 </div>
2 <div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="弹框练习">
3 <input id="txRoleID" type="hidden" runat="server" value="0" />
4 <label class="lbInfo">角色名称:</label>
5 <input id="txRolename" type="text" class="easyui-validatebox" required="true" runat="server" /><br />
6 <label class="lbInfo"> </label><input type="submit" onserverclick="saveRole" value="保存" runat="server" />
7 <label id="lbmsg" runat="server"></label>
8 </div>
下面来介绍Window的具体用法,首先来看属性大多数的属性和窗口(Window)的属性是相同的,下面列出一些 Dialog私有的属性:
事件
Dialog的事件和窗口(Window)的事件相同。
方法
除了”header”和”body”以外,Dialog的函数方法和窗口(Window)的相同
分类: juery
posted @ 2010-10-24 14:51 小桥流水--逍遥 阅读(1906) 评论(0) 编辑 收藏
- JQuery EasyUI 对话框的用法
- jQuery EasyUI NumberBox(数字框)的用法
- jQuery easyui 日历控件的用法:
- 关于Jquery-easyUi的常用用法
- Jquery EasyUI学习(一)之dialog对话框的学习
- JQuery EasyUI window 用法
- JQuery EasyUI window 用法
- jquery easyui datagrid 用法
- JQuery EasyUI window 用法
- JQuery EasyUI window 用法
- JQUERY EASYUI 分页(PAGINATION)用法
- jquery EasyUI中的MenuButton用法
- jQuery EasyUI 的截图插件(imgAreaSelect)用法
- 关于jquery easyui 中treegrid的用法例子
- jquery easyui tree异步加载的简单用法
- jQuery EasyUI详解-EasyUI消息框、对话框和窗体
- easyUI 对话框的关闭事件
- easyui对话框注意的地方
- android中adb不是内部或者外部指令以及丢失adbwinapi.dll问题 的处理
- const、volatile、mutable的用法(转载)
- 关于结构体对齐(转载)
- Android 应用开发笔记 - Preface
- Android 打造自己的个性化应用(三):应用程序的插件化
- JQuery EasyUI 对话框的用法
- 不错的文章
- unrecognized command line option \"-fno-keep-inline-dllexport\"
- [线段树] hdu 3255 Farming#求体积并
- Java之运行时异常与编译时异常区别
- 【js与jquery】jquery对服务器端返回xml格式数据的解析和处理
- 地图开发常用代码
- 基于Swing的MP3 音乐播放器
- 'wxCHANGE_DIR' was not declared in this scope