jQuery-EasyUI基础教程之Dialog.docx

jQuery-EasyUI基础教程之Dialog课程目标 掌握Dialog的使用 学会easyUI的几种实现方式DialogDialog简介对话框是一种特殊类型的窗口，在现在的系统中使用越来越多。如，添加，修改，删除的提示等功能，使用对话框更加贴近用户的要求，开发人员开发程序也更加简单。它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮，用户可以配置对话框的行为来显示其他工具，如collapsible,minimizable,maximizable工具等。默认情况下，对话框（Dialog）不能改变大小，但是用户可以设置 resizable 属性为 true，使其可以改变大小。 效果如下图：开发Dialog程序方式一：使用纯HTML代码1. 2. 3. 4. dialog01.html 5. 6. 7. 8. 9. 10. 11. 12. Dialog Content. 13. 14. 15. Tip: Dialog所需的属性可以类似于以上代码放到data-options属性中，此外也可以像HTML属性一样直接跟在开始标签内。强烈建议放到data-options属性中。方式二：使用JS代码设置1. 2. 3. 4. dialog02.html 5. 6. 7. 8. 9. 10. $(function() 11. easyloader.load(dialog,function() 12. $(#dd).dialog( 13. title: My Dialog, 14. width: 400, 15. height: 200, 16. closed: false, 17. modal: true 18. ); 19. ); 20. ); 21. 22. 23. 24. 25. Dialog Content. 26. 27. 28. 此外，也可以不引入easyloader.js文件，引入具体所需的js文件。代码如下：1. 2. 3. 4. 5. 6. 7. 8. 9. $(function() 10. $(#dd).dialog( 11. title: My Dialog, 12. iconCls:icon-save, 13. width: 400, 14. height: 200, 15. closed: false,16. modal: true 17. ); 18. ); 19. 20. 21. 22. 23. Dialog Content. 24. 25. 26. Dialog常用属性属性名属性值类型描述默认值titlestring对话框窗口标题文本New Dialogclosableboolean定义是否显示关闭按钮truedraggableboolean定义是否能够拖拽窗口trueshadowbooleantrue表示在窗体显示的时候显示阴影trueiconClsstring设置图标显示在面板左上角nullwidthnumber设置面板宽度autoheightnumber设置面板高度autoleftnumber设置面板距离左边的位置nulltopnumber设置面板距离顶部的位置nullfitboolean面板大小是否自适应父容器falseborderboolean定义是否显示面板边框truehrefstring从URL读取远程数据并且显示到面板nullcacheboolean如果为true，在超链接载入时缓存面板内容trueloadingMessagestring在加载远程数据的时候在面板内显示一条消息Loadingmethodstring使用HTTP的哪一种方法读取内容页。可用值：get,postgetqueryParamsobject在加载内容页的时候添加的请求参数loaderfunction定义了如何从远程服务器加载内容页nullcollapsibleboolean定义是否显示可折叠按钮falseminimizableboolean定义是否显示最小化按钮falsemaximizableboolean定义是否显示最大化按钮falseresizableboolean定义是否可以改变对话框窗口大小falsetoolbararray,selector定义工具栏nullbuttonsarray,selector定义对话框窗口底部按钮null参考jQuery EasyUI的API。使用案例1：1. 2. $(function() 3. $(#dd).dialog( 4. title : First Dialog, /设置标题 5. iconCls : icon-ok,/面板左上角显示的图片，定义在themes/icon.css文件中 6. closable : false,/定义是否显示关闭按钮 7. draggable : false,/定义是否能够拖拽窗口 8. width : 400, /定义宽 9. height : 200, /定义高 10. shadow : false, /true表示在窗体显示的时候显示阴影 11. modal : true,/定义是否将窗体显示为模式化窗口 12. left : 150px,/设置面板距离左边的位置 13. top : 50px,/设置面板距离顶部的位置 14. border : true,/定时是否显示面板边框 15. loadingMessage : 正在加载，请稍后.,/在加载远程数据的时候在面板内显示一条消息 16. /href:,/从URL读取远程数据并且显示到面板 17. method : post,/使用HTTP的哪一种方法读取内容页。可用值：get,post|get 18. collapsible : true,/定义是否显示可折叠按钮 19. minimizable : true,/定义是否显示最小化按钮 20. maximizable : true,/定义是否显示最大化按钮 21. resizable : true,/定义是否可以改变对话框窗口大小 22. toolbar : 23. text : 编辑, 24. iconCls : icon-edit, 25. handler : function() 26. alert(edit); 27. 28. , 29. text : 帮助, 30. iconCls : icon-help, 31. handler : function() 32. alert(help); 33. 34. ,/定义工具栏 35. /toolbar : #toolbar, /定义工具栏的另外一种方式，将id为toolbar的元素当作工具栏 36. buttons : #bb/定义对话框窗口底部按钮 37. ); 38. ); 39. 40. 41. Dialog Content. 42. !- 43. New User 44. Edit User 45. Remove User 46. 47. - 48. 49. 保存 50. 关闭 51. 52. 效果如下：Dialog常用方法方法名方法参数描述setTitletitle设置面板头的标题文本openforceOpen在forceOpen参数设置为true的时候，打开面板时将跳过onBeforeOpen回调函数closeforceClose在forceClose参数设置为true的时候，关闭面板时将跳过onBeforeClose回调函数refreshhref刷新面板来装载远程数据。如果href属性有了新配置，它将重写旧的href属性。Dialog常用事件事件名事件参数描述onBeforeLoadnone在加载内容页之前触发，返回false将忽略该动作。onLoadnone在加载远程数据时触发。onLoadErrornone在加载内容页发生错误时触发。onBeforeOpennone在打开面板之前触发，返回false可以取消打开操作。onOpennone在打开面板之后触发。onBeforeClosenone在关闭面板之前触发，返回false可以取消关闭操作。下列的面板将不能关闭。onClosenone在面板关闭之后触发。使用案例1：JS代码1. 2. $(function() 3. $(#dd).dialog(4. title : First Dialog,5. width : 400, 6. height : 200, 7. iconCls : icon-ok,8. loadingMessage : 正在加载，请稍后.,9. toolbar : #toolbar,10. buttons : #bb,11. onBeforeClose:function()/在关闭面板之前触发，返回false可以取消关闭操作。下列的面板将不能关闭。12. if (!confirm(关闭窗口?) 13. return false;14. 15. 16. );17. );18. function c