开发者社区> yemon> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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 plaincopyprint?
  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 plaincopyprint?
  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>  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery幻灯片播放器插件
在线演示 本地下载
740 0
jQuery焦点图插件
在线演示 本地下载
725 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1225 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
《jQuery LigerUI 插件介绍及使用》之ligerGrid
引用:http://ajava.org/article-1197-1.html 摘要: 一,简介ligerGrid的功能列表:1,支持本地数据和服务器数据(配置data或者url)2,支持排序和分页(包括Javascript排序和分页)3,支持列的“显示/隐藏”4,支持明细行(表格内嵌)5,支持汇总行6,支持单元格模板7,支持编辑表 .
1194 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1342 0
+关注
65
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载