20151215jquery学习笔记--jqueryUI --dialog（对话框）

对话框（dialog），是 jQuery UI 非常重要的一个功能。它彻底的代替了 JavaScript 的 alert()、prompt()等方法，也避免了新窗口或页面的繁杂冗余

一．开启多个 dialog 我们可以同时打开多个 dialog，只要设置不同的 id 即可实现。 

?

1 2	$('#reg').dialog();  $('#login').dialog();

　　二．修改 dialog 样式

在弹出的 dialog 对话框中，在火狐浏览器中打开 Firebug 或者右击->查看元素。这样， 我们可以看看 dialog 的样式，根据样式进行修改。我们为了和网站主题符合，对 dialog 的标 题背景进行修改。 

//无须修改 ui 里的 CSS，直接用 style.css 替代掉 

?

1 2 3

.ui-widget-header{  background:url(../img/ui_header_bg.png); }

　　

注意：其他修改方案类似。

三．dialog()方法的属性

对话框方法有两种形式：

1.dialog(options)，options 是以对象键值对的形式传参，每个 键值对表示一个选项；

2.dialog('action',param)，action 是操作对话框方法的字符串，param 则是 options 的某个选项。

?

1 2 3 4 5 6 7

$('#reg').dialog({         title:'注册知问',        buttons:{               '按钮': function(){                                      }                     } });

　　

?

1 2 3

$('#reg').dialog({  position:'lefttop' });

　　

?

1 2 3 4 5 6 7 8

$('#reg').dialog({ height: 500,  width:500,  minWidth:300,  minHeight :300, maxWidth: 800, maxHeight: 600  });

　　

?

1 2 3 4

$('#reg').dialog({  show:true,  hide:true });

　　注意：设置 true 后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字 符串参数

?

1 2 3 4

$('#reg').dialog({  show:'blind', hide:'blind' });

　　

?

1 2 3 4 5 6 7

$('#reg').dialog({ autoOpen:false, draggable:false,  resizable: false,  modal: true,  closeText:'关闭' });

　　

四．dialog()方法的事件

除了属性设置外，dialog()方法也提供了大量的事件。这些事件可以给各种不同状态时 提供回调函数。这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

//当对话框获得焦点后  $('#reg').dialog({  focus:function(e,ui) {  alert('获得焦点'); }  });   //当创建对话框时 $('#reg').dialog({  create: function(e,ui){  alert('创建对话框');  } }); //当将要关闭时  $('#reg').dialog({  beforeClose:function(e,ui){  alert('关闭前做的事！'); returnflag; } }); //关闭对话框时 $('#reg').dialog({  close:function(e,ui){  alert('关闭！'); } }); //对话框移动时  $('#reg').dialog({ drag:function(e,ui){ alert('top:'+ui.position.top+ '\n' +'left:'+ ui.position.left); } }); //对话框开始移动时 $('#reg').dialog({  dragStart: function(e,ui){  alert('top:'+ui.position.top+ '\n' +'left:'+ ui.position.left);  }  }); //对话框结束移动时 $('#reg').dialog({  dragStop: function(e,ui){  alert('top:'+ui.position.top+ '\n' +'left:'+ ui.position.left);  } }); //调整对话框大小时  $('#reg').dialog({  resize:function(e,ui){  alert('size:'+ui.size.width+ '\n' +'originalSize:' +ui.originalSize.width); } }); //开始调整对话框大小时  $('#reg').dialog({  resizeStart :function(e,ui){  alert('size:'+ui.size.width+ '\n' +'originalSize:' +ui.originalSize.width); } }); //结束调整对话框大小时  $('#reg').dialog({  resizeStop:function(e,ui) {  alert('size:'+ui.size.width+ '\n' +'originalSize:' +ui.originalSize.width); } });

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

//初始隐藏对话框  $('#reg').dialog({  autoOpen:false  }); //打开对话框  $('#reg_a').click(function(){  $('#reg').dialog('open'); }); //关闭对话框 $('#reg').click(function(){  $('#reg').dialog('close'); }); //判断对话框打开或关闭状态 $(document).click(function() { alert($('#reg').dialog('isOpen'));  }); //将指定对话框置前  $(document).click(function() {  $('#reg').dialog('moveToTop');  }); //获取某个 options 的 param 选项的值  vartitle=$('#reg').dialog('option', 'title');  alert(title); //设置某个 options 的 param 选项的值 $('#reg').dialog('option','title', '注册知问');

　　

五．dialog 中使用 on()

在 dialog 的事件中，提供了使用 on()方法处理的事件方法。

?

1 2 3

$('#reg').on('dialogclose',function(){ alert('关闭'); });