【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

习惯上，我们播放一条简短的信息，或向浏览者询问一个问题，都会用到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 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 returnfalse; 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 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”)的话取不到。