jq ui.dialog.js简介

1. ·概述   
2. 一个浮动的窗口，包含标题和内容两部分。可以移动，调整大小，以及关闭图标 '×' 。   
3. 如果内容长度超过了对话框内容区域的显示，则会自动出现滚动条。   
4. 除此之外，还有一些常用的选项，如：添加底部按钮栏、模式窗口屏蔽层等。   
5. 官方示例地址：http: //jqueryui.com/demos/dialog/   
6.   
7. ·参数（名称 : 参数类型 : 默认值）   
8. autoOpen : Boolean :  true     
9.   如果设置为 true ，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。   
10.   初始：$( '.selector' ).dialog({ autoOpen:  false  });   
11.   获取： var  autoOpen = $( '.selector' ).dialog( 'option' ,  'autoOpen' );   
12.   设置：$( '.selector' ).dialog( 'option' ,  'autoOpen' ,  false );   
13.   
14. bgiframe : Boolean :  false     
15.   如果设置为 true ，则调用bgiframe插件，用于修复在IE6浏览器中无法显示于其它控件（select,flash）之上的问题。   
16.   初始：$( '.selector' ).dialog({ bgiframe:  true  });   
17.   获取： var  bgiframe = $( '.selector' ).dialog( 'option' ,  'bgiframe' );   
18.   设置：$( '.selector' ).dialog( 'option' ,  'bgiframe' ,  true );   
19.   
20. buttons : Object : { }   
21.   为对话框添加相应的按钮及处理函数。   
22.   初始：$( '.selector' ).dialog({ buttons: {  "Ok" :  function () { $( this ).dialog( "close" ); } } });   
23.   获取： var  buttons = $( '.selector' ).dialog( 'option' ,  'buttons' );   
24.   设置：$( '.selector' ).dialog( 'option' ,  'buttons' , {  "Ok" :  function () { $( this ).dialog( "close" ); } });   
25.   
26. closeOnEscape : Boolean :  true   
27.   设置当对话框打开的时候，用户按ESC键是否关闭对话框。   
28.   初始：$( '.selector' ).dialog({ closeOnEscape:  false  });   
29.   获取： var  closeOnEscape = $( '.selector' ).dialog( 'option' ,  'closeOnEscape' );   
30.   设置：$( '.selector' ).dialog( 'option' ,  'closeOnEscape' ,  false );   
31.   
32. dialogClass : String :  ''   
33.   设置指定的类名称，它将显示于对话框的标题处。   
34.   初始：$( '.selector' ).dialog({ dialogClass:  'alert'  });   
35.   获取： var  dialogClass = $( '.selector' ).dialog( 'option' ,  'dialogClass' );   
36.   设置：$( '.selector' ).dialog( 'option' ,  'dialogClass' ,  'alert' );   
37.   
38. draggable : Boolean :  true   
39.   如果设置为 true ，则允许拖动对话框的标题栏移动窗口。   
40.   初始：$( '.selector' ).dialog({ draggable:  false  });   
41.   获取： var  draggable = $( '.selector' ).dialog( 'option' ,  'draggable' );   
42.   设置：$( '.selector' ).dialog( 'option' ,  'draggable' ,  false );   
43.   
44. height : Number :  'auto'   
45.   设置对话框的高度（单位：像素）。   
46.   初始：$( '.selector' ).dialog({ height: 530 });   
47.   获取： var  height = $( '.selector' ).dialog( 'option' ,  'height' );   
48.   设置：$( '.selector' ).dialog( 'option' ,  'height' , 530);   
49.   
50. hide : String :  null   
51.   使对话框关闭（隐藏），可添加动画效果。   
52.   初始：$( '.selector' ).dialog({ hide:  'slide'  });   
53.   获取： var  hide = $( '.selector' ).dialog( 'option' ,  'hide' );   
54.   设置：$( '.selector' ).dialog( 'option' ,  'hide' ,  'slide' );   
55.   
56. maxHeight : Number :  false   
57.   设置对话框的最大高度（单位：像素）。   
58.   初始：$( '.selector' ).dialog({ maxHeight: 400 });   
59.   获取： var  maxHeight = $( '.selector' ).dialog( 'option' ,  'maxHeight' );   
60.   设置：$( '.selector' ).dialog( 'option' ,  'maxHeight' , 400);   
61.   
62. maxWidth : Number :  false   
63.   设置对话框的最大宽度（单位：像素）。   
64.   初始：$( '.selector' ).dialog({ maxWidth: 600 });   
65.   获取： var  maxWidth = $( '.selector' ).dialog( 'option' ,  'maxWidth' );   
66.   设置：$( '.selector' ).dialog( 'option' ,  'maxWidth' , 600);   
67.   
68. minHeight : Number : 150   
69.   设置对话框的最小高度（单位：像素）。   
70.   初始：$( '.selector' ).dialog({ minHeight: 300 });   
71.   获取： var  minHeight = $( '.selector' ).dialog( 'option' ,  'minHeight' );   
72.   设置：$( '.selector' ).dialog( 'option' ,  'minHeight' , 300);   
73.   
74. minWidth : Number : 150   
75.   设置对话框的最小宽度（单位：像素）。   
76.   初始：$( '.selector' ).dialog({ minWidth: 400 });   
77.   获取： var  minWidth = $( '.selector' ).dialog( 'option' ,  'minWidth' );   
78.   设置：$( '.selector' ).dialog( 'option' ,  'minWidth' , 400);   
79.   
80. modal : Boolean :  false   
81.   是否为模式窗口。如果设置为 true ，则在页面所有元素之前有个屏蔽层。   
82.   初始：$( '.selector' ).dialog({ modal:  true  });   
83.   获取： var  modal = $( '.selector' ).dialog( 'option' ,  'modal' );   
84.   设置：$( '.selector' ).dialog( 'option' ,  'modal' ,  true );   
85.   
86. position : String, Array :  'center'   
87.   设置对话框的初始显示位置。可选值:  'center' ,  'left' ,  'right' ,  'top' ,  'bottom' , 或是一个数组[ 'right' , 'top' ]   
88.   初始：$( '.selector' ).dialog({ position:  'top'  });   
89.   获取： var  position = $( '.selector' ).dialog( 'option' ,  'position' );   
90.   设置：$( '.selector' ).dialog( 'option' ,  'position' ,  'top' );   
91.   
92. resizable : Boolean :  true   
93.   设置对话框是否可以调整大小。   
94.   初始：$( '.selector' ).dialog({ resizable:  false  });   
95.   获取： var  resizable = $( '.selector' ).dialog( 'option' ,  'resizable' );   
96.   设置：$( '.selector' ).dialog( 'option' ,  'resizable' ,  false );   
97.   
98. show : String :  null   
99.   用于显示对话框。   
100.   初始：$( '.selector' ).dialog({ show:  'slide'  });   
101.   获取： var  show = $( '.selector' ).dialog( 'option' ,  'show' );   
102.   设置：$( '.selector' ).dialog( 'option' ,  'show' ,  'slide' );   
103.   
104. stack : Boolean :  true   
105.   设置移动时对话框是否前置于其它的对话框前面。   
106.   初始：$( '.selector' ).dialog({ stack:  false  });   
107.   获取： var  stack = $( '.selector' ).dialog( 'option' ,  'stack' );   
108.   设置：$( '.selector' ).dialog( 'option' ,  'stack' ,  false );   
109.   
110. title : String :  ''   
111.   指定对话框的标题，也可以在对话框附加元素的title属性中设置标题。   
112.   初始：$( '.selector' ).dialog({ title:  'Dialog Title'  });   
113.   获取： var  title = $( '.selector' ).dialog( 'option' ,  'title' );   
114.   设置：$( '.selector' ).dialog( 'option' ,  'title' ,  'Dialog Title' );   
115.   
116. width : Number : 300   
117.   设置对话框的宽度（单位：像素）。   
118.   $( '.selector' ).dialog({ width: 460 });   
119.   获取： var  width = $( '.selector' ).dialog( 'option' ,  'width' );   
120.   设置：$( '.selector' ).dialog( 'option' ,  'width' , 460);   
121.   
122. zIndex : Integer : 1000   
123.   设置对话框的zindex值。   
124.   初始：$( '.selector' ).dialog({ zIndex: 3999 });   
125.   获取： var  zIndex = $( '.selector' ).dialog( 'option' ,  'zIndex' );   
126.   设置：$( '.selector' ).dialog( 'option' ,  'zIndex' , 3999);   
127.   
128.   
129. ·事件   
130. beforeclose : dialogbeforeclose   
131.   当对话框关闭之前，触发此事件。如果返回 false ，则对话框仍然显示。   
132.   初始：$( '.selector' ).dialog({ beforeclose:  function (event, ui) { ... } });   
133.   绑定：$( '.selector' ).bind( 'dialogbeforeclose' ,  function (event, ui) { ... });   
134.   
135. open : dialogopen   
136.   当对话框打开后，触发此事件。   
137.   初始：$( '.selector' ).dialog({ open:  function (event, ui) { ... } });   
138.   绑定：$( '.selector' ).bind( 'dialogopen' ,  function (event, ui) { ... });   
139.   
140. focus : dialogfocus   
141.   当对话框获取焦点时，触发此事件。   
142.   初始：$( '.selector' ).dialog({ focus:  function (event, ui) { ... } });   
143.   绑定：$( '.selector' ).bind( 'dialogfocus' ,  function (event, ui) { ... });   
144.   
145. dragStart : dragStart   
146.   当开始拖拽对话框移动时，触发此事件。   
147.   初始：$( '.selector' ).dialog({ dragStart:  function (event, ui) { ... } });   
148.   绑定：$( '.selector' ).bind( 'dragStart' ,  function (event, ui) { ... });   
149.   
150. drag : drag   
151.   当拖拽对话框移动时，触发此事件。   
152.   初始：$( '.selector' ).dialog({ drag:  function (event, ui) { ... } });   
153.   绑定：$( '.selector' ).bind( 'drag' ,  function (event, ui) { ... });   
154.   
155. dragStop : dragStop   
156.   当拖拽对话框动作结束时，触发此事件。   
157.   初始：$( '.selector' ).dialog({ dragStop:  function (event, ui) { ... } });   
158.   绑定：$( '.selector' ).bind( 'dragStop' ,  function (event, ui) { ... });   
159.   
160. resizeStart : resizeStart   
161.   当开始改变对话框大小时，触发此事件。   
162.   初始：$( '.selector' ).dialog({ resizeStart:  function (event, ui) { ... } });   
163.   绑定：$( '.selector' ).bind( 'resizeStart' ,  function (event, ui) { ... });   
164.   
165. resize : resize   
166.   当对话框大小改变时，触发此事件。   
167.   初始：$( '.selector' ).dialog({ resize:  function (event, ui) { ... } });   
168.   绑定：$( '.selector' ).bind( 'resize' ,  function (event, ui) { ... });   
169.   
170. resizeStop : resizeStop   
171.   当对话框大小改变结束时，触发此事件。   
172.   初始：$( '.selector' ).dialog({ resizeStop:  function (event, ui) { ... } });   
173.   绑定：$( '.selector' ).bind( 'resizeStop' ,  function (event, ui) { ... });   
174.   
175. close : dialogclose   
176.   当对话框关闭后，触发此事件。   
177.   初始：$( '.selector' ).dialog({ close:  function (event, ui) { ... } });   
178.   绑定：$( '.selector' ).bind( 'dialogclose' ,  function (event, ui) { ... });   
179.   
180.   
181. ·属性   
182. destroy   
183.   销毁对话框对象。   
184.   用法：.dialog(  'destroy'  )   
185.   
186. disable   
187.   禁用对话框。   
188.   用法：.dialog(  'disable'  )   
189.   
190. enable   
191.   启用对话框。   
192.   用法：.dialog(  'enable'  )   
193.   
194. option   
195.   获取或设置对话框的属性。   
196.   用法：.dialog(  'option'  , optionName , [value] )   
197.   
198. close   
199.   关闭对话框。   
200.   用法：.dialog(  'close'  )   
201.   
202. isOpen   
203.   用于判断对话框是否处理打开状态。   
204.   用法：.dialog(  'isOpen'  )   
205.   
206. moveToTop   
207.   将对话框移至最顶层显示。   
208.   用法：.dialog(  'moveToTop'  )   
209.   
210. open   
211.   打开对话框。   
212.   用法：.dialog(  'open'  )