夏日博客

A-A+

jquery dialog弹出对话框插件使用方法

2016年01月11日 前端设计 暂无评论 阅读 7 views 次

jquery的dialog插件我相信用过的人不少了，自从有了dialog插件之后我们的弹出提示都用到了jquery dialog了，下面小编来为各位介绍jquery dialog弹出对话框插件使用方法，希望文章能够帮助到各位。

使用方法:

2.1、默认参数

  1. // 1. 对话框默认参数  
  2. // 标注【*】的项目表示可以重复修改的，即多次初始化  
  3. $.fn.dialog.defaults = {  
  4.  // css样式链接地址  
  5.  css: "http://static.qianduanblog.com/css/jquery-dialog/default.min.css?v=" + Math.ceil(Date.now() / 86400000),  
  6.  // 对话框标题【*】  
  7.  title: "Untitled",  
  8.  // 是否自动打开（即是否初始化完成就打开）  
  9.  autoOpen: false,  
  10.  // 对话框宽度【*】  
  11.  width: 600,  
  12.  // 对话框高度【*】  
  13.  height: "auto",  
  14.  // 层级【*】  
  15.  zIndex: 2000,  
  16.  // 在给定高度的时候，对话框内容超过样式【*】  
  17.  overflow: "scroll",  
  18.  // 动画时间【*】  
  19.  duration: 123,  
  20.  // 是否可以拖动（需引用jquery.drag.js）  
  21.  draggable: true,  
  22.  // 是否可以按esc关闭【*】  
  23.  closeOnEsc: true,  
  24.  // 是否可以单击背景关闭【*】  
  25.  closeOnBg: true,  
  26.  // 是否允许关闭【*】（设置为false，将导致 closeOnEsc 和 closeOnBg 失效）  
  27.  canHide: true,  
  28.  // 加载一个url【*】  
  29.  url: "",  
  30.  // 打开回调  
  31.  onopen: function () {},  
  32.  // 关闭回调  
  33.  onclose: function () {}  
  34. };  

2.2、初始化

  1. // 2、对话框初始化  
  2. // 如果不预先初始化，将使用默认参数自动初始化  
  3. $("#dialog").dialog({  
  4.  width: 600,  
  5.  title: "对话框标题"  
  6. });  
  7. // 多次初始化会覆盖掉前一次初始化内容，可以多次初始化覆盖的参数参照2.1  
  8. $("#dialog").dialog({  
  9.  title: "重新初始化对话框标题"  
  10. });  

2.3、打开

  1. // 3、打开对话框  
  2. // 打开对话框  
  3. $("#dialog").dialog("open");  
  4. // 打开对话框并回调  
  5. $("#dialog").dialog("open", function () {});  
  6. // 打开对话框并重置参数  
  7. $("#dialog").dialog("open", {  
  8.  title: "改变了对话框标题"  
  9. });  
  10. // 打开对话框并打开远程url  
  11. $("#dialog").dialog("open", {  
  12.  title: "远程url",  
  13.  url: "http://www.111cn.net/"  
  14. });  
  15. // 打开对话框并重置参数并回调  
  16. $("#dialog").dialog("open", {  
  17.  title: "改变了对话框标题"  
  18. }, function () {});  

2.4、重定位

  1. // 4、定位对话框  
  2. // 手动重新定位对话框到居中位置，用于对话框内容改变的时候  
  3. $("#dialog").dialog("position");  

2.5、关闭

  1. // 5、关闭对话框  
  2. $("#dialog").dialog("close");  
  3. // 关闭对话框并且回调  
  4. $("#dialog").dialog("close", function () {});  
标签：

给我留言