jQuery UI Dialog 参数使用

简介:

欢迎加入QQ群技术交流:466355109,技术不全没关系,只要有交流的心就尽管来吧!!!

jQuery UI Dialog常用的参数有:

  1. autoOpen:默认true,即dialog方法创建就显示对话框
  2. buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式:
    1. {"确定":function(){},"取消":function(){}}
    2. [{text:"确定", click: function(){}},{text:"取消",click:function(){}}]
  3. modal:默认false,是否模态对话框,如果设置为true则会创建一个遮罩层把页面其他元素遮住
  4. title:标题
  5. draggable:是否可手动,默认true
  6. resizable:是否可调整大小,默认true
  7. width:宽度,默认300
  8. height:高度,默认"auto"

其他一些不太常用的参数:

  1. closeOnEscape:默认true,按esc键关闭对话框
  2. show:打开对话框的动画效果
  3. hide:关闭对话框的动画效果
  4. position:对话框显示的位置,默认"center",可以设置成字符串或数组:
    1. 'center', 'left', 'right', 'top', 'bottom'  如果要组合,一定要按顺序写,比如要右下角,要写:['right','bottom']
    2. ['right','top'],通过上面的几个字符串组合(x,y)
    3. [350,100],绝对的数值(x,y)
  5. minWidth:默认150,最小宽度
  6. minHeight:默认150,最小高度
[javascript]  view plain copy print ?
  1. <script language="javascript">  
  2.     $(document).ready(function() {  
  3.       
  4.         //$("#dialog").dialog({ modal: true },{title:"ssss"});  
  5.         //$("#dialog").dialog({ show: { effect: 'drop', direction: "up" } });  
  6.         $("#dialog").dialog(  
  7.             {modal:true},  
  8.             {title:"登录提示"},  
  9.             {show:{effect:'drop', direction:'up'}},  
  10.             {hide:{effect:'drop', direction:'down'}},  
  11.             {position:['right','bottom']},  
  12.             {draggable:false},  
  13.             {resizable:false}  
  14.         );  
  15.     });  
  16.     </script>  
以下这种写法更规范!
[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.       
  3.         //$("#dialog").dialog({ modal: true },{title:"ssss"});  
  4.         //$("#dialog").dialog({ show: { effect: 'drop', direction: "up" } });  
  5.         $("#dialog").dialog({  
  6.             modal:true,  
  7.             title:"登录提示",  
  8.             show:{effect:'drop', direction:'up'},  
  9.             hide:{effect:'drop', direction:'down'},  
  10.             position:['right','bottom'],  
  11.             draggable:false,  
  12.             resizable:false  
  13.         });  
  14.         $("#dialog").css({color:"red","font-size":"12px"});  
  15.     });  
  16.     </script>  
目录
相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1197 0
|
8月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
27 0
|
5月前
|
JavaScript
jQuery带参跳转新页面,新页面获取url多个参数的办法
jQuery带参跳转新页面,新页面获取url多个参数的办法
25 0
|
5月前
|
JavaScript
jQuery带参数跳转,新页面获取url的参数id
jQuery带参数跳转,新页面获取url的参数id
23 0
|
5月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
6月前
|
安全 网络安全
SAP CRM WebClient UI 支持的一些 url 参数
SAP CRM WebClient UI 支持的一些 url 参数
69 0
|
7月前
|
XML Web App开发 API
关于 SAP UI5 参数 $$updateGroupId 前面两个 $ 符号的含义
关于 SAP UI5 参数 $$updateGroupId 前面两个 $ 符号的含义
33 0
|
8月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能3
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能3
30 0
|
8月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能1
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能1
25 0
|
8月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能6
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能6
45 0

相关课程

更多