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>  
上一篇:H2数据库攻略


下一篇:高性能 React 组件