习惯上，我们播放一条简短的信息，或向浏览者询问一个问题，都会用到dialog。
- 创建一个基本的dialog
- 使用dialog 选项
- 形式
- 启用内置动画
- 给dialog添加按钮
- 使用dialog回调函数
- 编码的形式控制dialog
1 创建一个基本的dialog
1 < div id ="myDialog" title ="This is the title!" > 2 hello 3 </ div > 4 < script src ="development-bundle/jquery-1.4.4.js" ></ script > 5 < script src ="development-bundle/ui/jquery.ui.core.js" ></ script > 6 < script src ="development-bundle/ui/jquery.ui.widget.js" ></ script > 7 < script src ="development-bundle/ui/jquery.ui.position.js" ></ script > 8 < script src ="development-bundle/ui/jquery.ui.dialog.js" ></ script > 9 < script src ="development-bundle/ui/jquery.ui.mouse.js" ></ script > 10 < script src ="development-bundle/ui/jquery.ui.draggable.js" ></ script > 11 < script src ="development-bundle/ui/jquery.ui.resizable.js" ></ script > 12 < script > 13 $( function (){ 14 $( " #myDialog " ).dialog(); 15 }); 16 </ script >
使用 jquery.ui.position.js后，dialog会自动居中。
使用 jquery.ui.draggable.js后，可以拖拽。
使用 jquery.ui.resizable.js后，可以重设大小。
1 dialog的选项
| Option | Default value | Used to… |
| autoOpen | true | 当设为true时，dialog()方法一被调用就显示 |
| buttons | {} | 支持一个包含button的对象。每个key会成为<button>的text，每个value会成为button点击时执行的回调函数 |
| closeOnEscape | true | 如果设为true，按下ESC键能关闭dialog |
| closeText | close | 设置关闭按钮的text |
| dialogClass | “” | 出于主题的目的，为dialog设置额外的classnames |
| disable | false | 禁用控件 |
| draggable | true | 在使用 jquery.ui.draggable.js 的情况下，使得dialog可以拖拽 |
| height | auto | 设置dialog的初始高度 |
| hide | null | 设置dialog被关闭时的效果 |
| maxHeight | false | 设置最大高度 |
| maxWidth | false | 设置最大宽度 |
| minHeight | 150 | 设置最小高度 |
| minwidth | 150 | 设置最小宽度 |
| modal | false | 当dialog打开期间启用遮罩层 |
| position | center | 在使用 jquery.ui.position.js 时，设置dialog在 viewport中的起始位置。可以接受一个字符串，一个字符串数组，一个包含相对于viewport的top 和left的精准坐标的数组， |
| resizable | true | 在使用 jquery.ui.resizable.js时，可调整大小 |
| show | null | 设置dialog打开时的效果 |
| stack | true | 当多个dialog打开时，时focused的dialog处于最前端 |
| title | “” | 制定一个 title属性，可选地 |
| width | 300 | 设置dialog的其实宽度 |
| zIndex | 1000 | 设置空间起始的CSS z-index。当使用多个dialog，并且 stack选项设为true，每个dialog移动到stack前面时，z-index会改变 |
1.1 显示dialog
1 var dialogOpts = { 2 autoOpen: false 3 };
当autoOpen设为false时，页面加载后，dialog不会自动打开。
1.2 dialog的title
默认地，dialog的 title text 不能被选择，在操作系统的默认 tool tip style中，不会显示。给下层的元素使用 title 属性，text会出现在<span>元素中，这个<span>外层的<div>有 ui-dialog-titlebar 的classnames。这些属性会出现在控件的header中。
如果我们想给dialog 的DOM结构注入额外的元素，来展现额外的样式或不同的行为，我们可以使用title选项。
1 var dialogOpts = { 2 title: ' < a href ="#" > A link title! </ a > ' 3 };
建议系统会播放OS tooltip，如果 title属性以这种方式被指定给一个控件的新元素。
1.3 遮罩层
dialog最伟大的资产之一是遮罩层。这个特性创建一个覆盖层，覆盖住下面的页面。当dialog打开时，任何页面上的东西都不能被交互。当dialog关闭时，覆盖层被移除。这个特性最有益的是，需要关闭dialog才能使得页面再次可以被交互。并且为访问者提供了一个清晰的可视化指示器，在他们继续之前，dialog必须被交互。
1 var dialogOpts={ 2 modal:true 3 };
完全由CSS framework创建的覆盖层，所以可以通过 ThemmeRoller 进行配置主题。我们也能使用自己的图片。ui-widget-overlay被加载覆盖层上，这个选择器是自定义时必须的。
1.4 添加按钮组
button 选项接受一个对象，用来指定不同的 button 元素如何呈现。每个 property:value pair代表一个单独的按钮。
1 var dialogOpts={ 2 modal:true, 3 buttons:{ 4 "OK":function(){}, 5 "Cancel":function(){} 6 } 7 };
buttons对象中的 key 是 button的文本， value是按钮点击后，所执行的回调函数的名字。
1.5 启用dialog动画
1 var dialogOpts = { 2 show: true, 3 hide: true 4 };
启用内置的效果，会优雅地减小dialog的尺寸，并 透明知道它优雅地小时。
1.6 配置dialog的规模大小
1 var dialogOpts = { 2 width: 500, 3 height: 300, 4 minWidth: 150, 5 minHeight: 150, 6 maxWidth: 600, 7 maxHeight: 450 8 }
1.7 堆积
堆积属性被默认设为true，后最后调用dialog()方法的 对话框，会用友较高的 z-index，自动地处于前方。
2 dialog的事件模型
| Event | Fired when… |
| beforeclose | dialog将要被关闭 |
| close | dialog被关闭 |
| create | dialog 被初始化 |
| drag | dialog被拖拽 |
| dragStart | dialog开始被拖拽 |
| dragStop | 停止被拖拽 |
| focus | 得到焦点 |
| open | 被打开 |
| resize | |
| resizeStart | |
| resizeStop |
1 < div id ="status" class ="ui-widget ui-dialog ui-corner-all 2 ui-widget-content" > 3 < div class ="ui-widget-header ui-dialog-titlebar 4 ui-corner-all" > Dialog Status 5 </ div > 6 < div class ="ui-widget-content ui-dialog-content" > 7 </ div > 8 </ div > 9 < script > 10 $( function (){ 11 var dialogOpts = { 12 open: function (){ 13 $( " #status " ).children( " :last " ).text( " The dialog is open " ); 14 }, 15 close: function (){ 16 $( " #status " ).children( " :last " ).text( " The dialog is closed " ); 17 }, 18 beforeclose: function (){ 19 if (parseInt($( " .ui-dialog " ).css( " width " ), 10 ) > 300 ){ 20 return false ; 21 } 22 } 23 }; 24 $( " #myDialog " ).dialog(dialogOpts); 25 }); 26 </ script >
此处parseInt($(".ui-dialog").css("width"),10) 并不能获得 最终的 width。
dialog控件只传递一个单一的对象（原始事件对象）给回调函数，不传递第二个ui对象给handler函数。
3 以编码的方式控制dialog
| Method | Used to.. |
| close | 关闭或隐藏dialog |
| destroy | 永远禁用dialog。destroy方法轻微的不同。与其他控件的destroy将下层HTML返回到原始状态相比，dialog的destroy方法仅仅是隐藏它 |
| disable | 临时禁用 |
| enable | 如果被禁用，启用它 |
| isOpen | 检测有没有打开 |
| moveToTop | 将指定dialog移动到stack的顶部 |
| open | |
| option | dialog初始化后，get 或 set 其配置选项 |
| widget | 返回调用 dialog() 方法的外层元素 |
3.1 切换dialog的状态
1 < div id ="myDialog" title ="This is the title!" > 2 hello 3 </ div > 4 < button type ="button" id ="button" > toggle </ button > 5 < script > 6 $( function (){ 7 var dialogOpts = { 8 autoOpen: false 9 }; 10 $( " #myDialog " ).dialog(dialogOpts); 11 $( " #button " ).click( function (){ 12 if ($( " #myDialog " ).dialog( " isOpen " )){ 13 $( " #myDialog " ).dialog( " close " ) 14 } 15 else { 16 $( " #myDialog " ).dialog( " open " ) 17 } 18 }); 19 }); 20 </ script >
4 从dialog获取数据
因为控件是下层页面的一部分，所以传递和接收数据都很简单。
1 < p > Please answer the opinion poll: 2 </ p > 3 < div id ="myDialog" title ="Best Widget Library" > 4 < p > Is jQuery UI the greatest JavaScript widget library? 5 </ p > 6 < label for ="yes" > Yes! 7 </ label > 8 < input type ="radio" id ="yes" 9 value ="yes" name ="question" checked ="checked" >< br > 10 < label for ="no" > No! 11 </ label > 12 < input type ="radio" id ="no" value ="no" name ="question" > 13 </ div > 14 < button type ="button" id ="button" > toggle </ button > 15 < script > 16 $( function (){ 17 var dialogOpts = { 18 buttons:{ 19 " OK " : function (){ 20 var answer = $( " #myDialog " ).find( " input:checked " ).val(); 21 $( " <p> " ).text( " Thanks for selecting " + answer).appendTo($( " body " )); 22 $( " #myDialog " ).dialog( " close " ); 23 }, 24 " Cancel " : function (){ 25 $( " #myDialog " ).dialog( " close " ); 26 } 27 } 28 }; 29 $( " #myDialog " ).dialog(dialogOpts); 30 }); 31 </ script >
5 创建一个动态的基于图片的dialog
1 < style > 2 #thumbs { 3 width : 342px ; padding : 10px 0 10px 10px ; 4 border : 1px solid #ccc ; background-color : #eee ; 5 } 6 #thumbs p { 7 width : 330px ; font-family : Verdana ; font-size : 9px ; 8 text-align : center ; 9 } 10 .thumb { 11 width : 310px ; height : 114px ; padding : 10px ; 12 border : 1px solid #ccc ; border-bottom : none ; 13 } 14 .last { border-bottom : 1px solid #ccc ; } 15 .thumb img { 16 border : 1px solid #ccc ; margin-right : 10px ; float : left ; 17 cursor : pointer ; 18 } 19 .thumb h3 { margin : 0 ; float : left ; width : 198px ; } 20 #thumbs .thumb p { 21 width : 310px ; margin : 0 ; font-family : Verdana ; font-size : 13px ; 22 text-align : left ; 23 } 24 #thumbs .ui-widget-header { width : 330px ; text-align : center ; } 25 </ style > 26 </ script > 27 28 < div id ="thumbs" class ="ui-corner-all" > 29 < div class ="ui-widget-header ui-corner-top" > 30 < h2 > Flowers </ h2 > 31 </ div > 32 < p > (click a thumbnail to view a full-size image) </ p > 33 < div class ="thumb ui-helper-clearfix ui-widget-content" > 34 < a href ="img/nnFull.jpg" title ="Helianthus annuus" > 35 < img src ="img/nnThumb.jpg" alt ="Helianthus annuus" > 36 </ a > 37 < h3 > Helianthus annuus </ h3 > 38 < p > sfasfsafs </ p > 39 </ div > 40 < div > 41 < div id ="dialog" > 42 43 </ div > 44 45 < script > 46 $( function (){ 47 var filename, 48 titleText, 49 dialogOpts = { 50 modal: true , 51 width: 388 , 52 height: 470 , 53 autoOpen: false , 54 open: function (){ 55 $( " #dialog " ).empty(); 56 $( " <img /> " ).attr( " src " ,filename).appendTo( " #dialog " ); 57 $( " #dialog " ).dialog( " option " , " title " ,titleText); 58 } 59 }; 60 $( " #dialog " ).dialog(dialogOpts); 61 $( " #thumbs " ).find( " a " ).click( function (e){ 62 console.log( " click " ); 63 e.preventDefault(); 64 filename = $( this ).attr( " href " ); 65 console.log(filename); 66 titleText = $( this ).attr( " title " ); 67 $( " #dialog " ).dialog( " open " ); 68 }); 69 }); 70 </ script >
首先，我们定义了三个变量，第一个是用来记录被点击的缩略图的全尺寸图片的路径，第二个是用来存储图片标题，作为空间的标题，第三个是dialog的配置对象。
open 选项的回调函数，会在dialog被打开前触发，所以我们可以把全尺寸图片加到dialog。
从<a>元素里取出其src时，应该用 attr(“href”)。用attr(“src”)的话取不到。