jQuery dialog 对话框，可以改变外形跟设置的dialog

jQuery dialog 对话框，可以改变外形和设置的dialog

jQuery dialog 对话框，可以改变外形和设置的dialog?演示

?

?

XML/HTML Code

1. <form?id="my-form">??
2. <h2>配置参数</h2>??
3. <div?style="float:?left;">??
4. <fieldset?id="config-button">??
5. <legend>Buttons</legend>??
6. <div>??
7. <input?type="checkbox"?id="button-close"?checked="checked"?/>??
8. <label?for="button-close">Close?button</label>??
9. </div>??
10. <div>??
11. <input?type="checkbox"?id="button-maximize"?checked="checked"?/>??
12. <label?for="button-maximize">Maximize?button</label>??
13. </div>??
14. <div>??
15. <input?type="checkbox"?id="button-minimize"?checked="checked"?/>??
16. <label?for="button-minimize">Minimize?button</label>??
17. </div>??
18. <div>??
19. <input?type="checkbox"?id="button-collapse"?checked="checked"?/>??
20. <label?for="button-collapse">Collapse?button</label>??
21. </div>??
22. </fieldset>??
23. <fieldset?id="config-icon">??
24. <legend>Icons</legend>??
25. <div?class="wrapper">?<ins?class="ui-state-default?ui-corner-all"></ins>??
26. <label?for="icon-close">Close:</label>??
27. <select?id="icon-close"?name="icon"?rel="close">??
28. <option?value="ui-icon-closethick">(default)</option>??
29. <option?value="ui-icon-close">ui-icon-close</option>??
30. <option?value="ui-icon-cancel">ui-icon-cancel</option>??
31. <option?value="ui-icon-circle-close">ui-icon-circle-close</option>??
32. </select>??
33. </div>??
34. <div?class="wrapper">?<ins?class="ui-state-default?ui-corner-all"></ins>??
35. <label?for="icon-maximize">Maximize:</label>??
36. <select?id="icon-maximize"?name="icon"?rel="maximize">??
37. <option?value="ui-icon-extlink">(default)</option>??
38. <option?value="ui-icon-carat-1-ne">ui-icon-carat-1-ne</option>??
39. <option?value="ui-icon-arrow-4-diag">ui-icon-arrow-4-diag</option>??
40. <option?value="ui-icon-circle-plus">ui-icon-circle-plus</option>??
41. </select>??
42. </div>??
43. <div?class="wrapper">?<ins?class="ui-state-default?ui-corner-all"></ins>??
44. <label?for="icon-minimize">Minimize:</label>??
45. <select?id="icon-minimize"?name="icon"?rel="minimize">??
46. <option?value="ui-icon-minus">(default)</option>??
47. <option?value="ui-icon-carat-1-sw">ui-icon-carat-1-sw</option>??
48. <option?value="ui-icon-arrowstop-1-s">ui-icon-arrowstop-1-s</option>??
49. <option?value="ui-icon-circle-minus">ui-icon-circle-minus</option>??
50. </select>??
51. </div>??
52. <div?class="wrapper">?<ins?class="ui-state-default?ui-corner-all"></ins>??
53. <label?for="icon-restore">Restore:</label>??
54. <select?id="icon-restore"?name="icon"?rel="restore">??
55. <option?value="ui-icon-newwin">(default)</option>??
56. <option?value="ui-icon-carat-2-n-s">ui-icon-carat-2-n-s</option>??
57. <option?value="ui-icon-refresh">ui-icon-refresh</option>??
58. <option?value="ui-icon-circle-arrow-n">ui-icon-circle-arrow-n</option>??
59. </select>??
60. </div>??
61. </fieldset>??
62. </div>??
63. <div?style="float:?left;">??
64. <fieldset?id="config-dblclick">??
65. <legend>Double-click</legend>??
66. <div>??
67. <input?type="radio"?name="dblclick"?id="dblclick-default"?value=""?/>??
68. <label?for="dblclick-default">(none)</label>??
69. </div>??
70. <div>??
71. <input?type="radio"?name="dblclick"?id="dblclick-collapse"?value="collapse"?checked="checked"?/>??
72. <label?for="dblclick-collapse">collapse</label>??
73. </div>??
74. <div>??
75. <input?type="radio"?name="dblclick"?id="dblclick-maximize"?value="maximize"?/>??
76. <label?for="dblclick-maximize">maximize</label>??
77. </div>??
78. <div>??
79. <input?type="radio"?name="dblclick"?id="dblclick-minimize"?value="minimize"?/>??
80. <label?for="dblclick-minimize">minimize</label>??
81. </div>??
82. </fieldset>??
83. <fieldset>??
84. <legend>Minimize?location</legend>??
85. <div>??
86. <input?type="radio"?name="minimizeLocation"?id="minimizeLocation-left"?value="left"?checked="checked"?/>??
87. <label?for="minimizeLocation-left">left</label>??
88. </div>??
89. <div>??
90. <input?type="radio"?name="minimizeLocation"?id="minimizeLocation-right"?value="right"?/>??
91. <label?for="minimizeLocation-left">right</label>??
92. </div>??
93. </fieldset>??
94. <fieldset?id="config-titlebar">??
95. <legend>Title?bar</legend>??
96. <div>??
97. <input?type="radio"?name="titlebar"?id="titlebar-default"?value=""?checked="checked"?/>??
98. <label?for="titlebar-default">(default)</label>??
99. </div>??
100. <div>??
101. <input?type="radio"?name="titlebar"?id="titlebar-none"?value="none"?/>??
102. <label?for="titlebar-none">none</label>??
103. </div>??
104. <div>??
105. <input?type="radio"?name="titlebar"?id="titlebar-transparent"?value="transparent"?/>??
106. <label?for="titlebar-transparent">transparent</label>??
107. </div>??
108. </fieldset>??
109. </div>??
110. <div?style="float:?left;">??
111. <fieldset?id="config-event">??
112. <legend>Events</legend>??
113. <div>??
114. <input?type="checkbox"?name="event"?id="event-load"?rel="load"?checked="checked"?/>??
115. <label?for="event-load">load</label>??
116. </div>??
117. <div>??
118. <input?type="checkbox"?name="event"?id="event-b4collapse"?rel="beforeCollapse"?checked="checked"?/>??
119. <label?for="event-b4collapse">beforeCollapse</label>??
120. </div>??
121. <div>??
122. <input?type="checkbox"?name="event"?id="event-b4maximize"?rel="beforeMaximize"?checked="checked"?/>??
123. <label?for="event-b4maximize">beforeMaximize</label>??
124. </div>??
125. <div>??
126. <input?type="checkbox"?name="event"?id="event-b4minimize"?rel="beforeMinimize"?checked="checked"?/>??
127. <label?for="event-b4minimize">beforeMinimize</label>??
128. </div>??
129. <div>??
130. <input?type="checkbox"?name="event"?id="event-b4restore"?rel="beforeRestore"?checked="checked"?/>??
131. <label?for="event-b4restore">beforeRestore</label>??
132. </div>??
133. <div>??
134. <input?type="checkbox"?name="event"?id="event-collapse"?rel="collapse"?checked="checked"?/>??
135. <label?for="event-collapse">collapse</label>??
136. </div>??
137. <div>??
138. <input?type="checkbox"?name="event"?id="event-maximize"?rel="maximize"?checked="checked"?/>??
139. <label?for="event-maximize">maximize</label>??
140. </div>??
141. <div>??
142. <input?type="checkbox"?name="event"?id="event-minimize"?rel="minimize"?checked="checked"?/>??
143. <label?for="event-minimize">minimize</label>??
144. </div>??
145. <div>??
146. <input?type="checkbox"?name="event"?id="event-restore"?rel="restore"?checked="checked"?/>??
147. <label?for="event-restore">restore</label>??
148. </div>??
149. </fieldset>??
150. </div>??
151. <div?style="float:?left;">??
152. <fieldset?id="config-method">??
153. <legend>Methods?<small><em>(apply?to?last?dialog)</em></small></legend>??
154. <div>??
155. <button?type="button"?id="method-collapse">collapse</button>??
156. <button?type="button"?id="method-maximize">maximize</button>??
157. <button?type="button"?id="method-minimize">minimize</button>??
158. <button?type="button"?id="method-restore">restore</button>??
159. <button?type="button"?id="method-state">state</button>??
160. </div>??
161. </fieldset>??
162. <fieldset?id="config-dialog">??
163. <legend>Dialog</legend>??
164. <div>??
165. <input?type="checkbox"?id="is-modal"?/>??
166. <label?for="is-modal">Modal?Dialog</label>??
167. </div>??
168. <div>??
169. <input?type="checkbox"?id="button-cancel"?checked="checked"?/>??
170. <label?for="button-cancel">Cancel?Button</label>??
171. </div>??
172. <div>??
173. <input?type="checkbox"?id="is-resizable"?checked="checked"?/>??
174. <label?for="is-resizable">Resizable</label>??
175. </div>??
176. <div>??
177. <input?type="checkbox"?id="is-draggable"?checked="checked"?/>??
178. <label?for="is-draggable">Draggable</label>??
179. </div>??
180. </fieldset>??
181. </form>??
182. </section>??
183. <br?clear="both"?/>??
184. ??
185. <button?type="button"?id="new-dialog">New?dialog</button>??
186. <button?type="button"?id="reopen-dialog">Reopen?last?dialog</button>??
187. ??
188. <script>??
189. $(function(){??
190. ??var?last;??
191. ??
192. ??//?preview?icon??
193. ??$("#config-icon?select")??
194. ????.change(function(){??
195. ??????var?icon?=?"<span?class='ui-icon?"+$(this).val()+"'></span>";??
196. ??????$(this).parents(".wrapper").find("ins").html(icon);??
197. ????})??
198. ????.trigger("change");??
199. ??
200. ??
201. ??//?click?to?open?dialog??
202. ??$("#new-dialog").click(function(){??
203. ????//dialog?options??
204. ????var?dialogOptions?=?{??
205. ??????"title"?:?"dialog@"?+?new?Date().getTime(),??
206. ??????"width"?:?400,??
207. ??????"height"?:?300,??
208. ??????"modal"?:?$("#is-modal").is(":checked"),??
209. ??????"resizable"?:?$("#is-resizable").is(":checked"),??
210. ??????"draggable"?:?$("#is-draggable").is(":checked"),??
211. ??????"close"?:?function(){??
212. ????????if(last[0]?!=?this){??
213. ??????????$(this).remove();???
214. ????????}??
215. ??????}??
216. ????};??
217. ????if?(?$("#button-cancel").is(":checked")?)?{??
218. ??????dialogOptions.buttons?=?{?"Cancel"?:?function(){?$(this).dialog("close");?}?};??
219. ????}??
220. ????//?dialog-extend?options??
221. ????var?dialogExtendOptions?=?{??
222. ??????"closable"?:?$("#button-close").is(":checked"),??
223. ??????"maximizable"?:?$("#button-maximize").is(":checked"),??
224. ??????"minimizable"?:?$("#button-minimize").is(":checked"),??
225. ??????"minimizeLocation"?:?$("#my-form?[name=minimizeLocation]:checked").val()?||?false,??
226. ??????"collapsable"?:?$("#button-collapse").is(":checked"),??
227. ??????"dblclick"?:?$("#my-form?[name=dblclick]:checked").val()?||?false,??
228. ??????"titlebar"?:?$("#my-form?[name=titlebar]:checked").val()?||?false??
229. ????};??
230. ????$("#my-form?[name=icon]").each(function(){??
231. ??????if?(?$(this).find("option:selected").html()?!=?"(default)"?)?{??
232. ????????dialogExtendOptionsdialogExtendOptions.icons?=?dialogExtendOptions.icons?||?{};??
233. ????????dialogExtendOptions.icons[$(this).attr("rel")]?=?$(this).val();??
234. ??????}??
235. ????});??
236. ????$("#my-form?[name=event]").each(function(){??
237. ??????if?(?$(this).is(":checked")?)?{??
238. ????????dialogExtendOptions[$(this).attr("rel")]?=?function(evt,?a,b,c)?{??
239. ??????????$(evt.target).prepend(evt.type+"@"+evt.timeStamp+"<br?/>");??
240. ????????};??
241. ??????}??
242. ????});??
243. ????//?open?dialog??
244. ????last?=?$("<div?/>").dialog(dialogOptions).dialogExtend(dialogExtendOptions);??
245. ??});??
246. ????
247. ??//click?to?reopen?dialog??
248. ??$('#reopen-dialog').click(function(){??
249. ????last.dialog('open');??
250. ??});??
251. ??//?click?to?invoke?method??
252. ??$("#config-method?button").click(function(){??
253. ????var?command?=?$(this).text();??
254. ????var?dialog?=?$(".ui-dialog:last").find(".ui-dialog-content");??
255. ????if?(?$(dialog).length?)?{??
256. ??????if?(?command?==?'state'?)?{??
257. ????????alert(?$(dialog).dialogExtend(command)?);??
258. ??????}?else?{??
259. ????????$(dialog).dialogExtend(command);??
260. ??????}??
261. ????}??
262. ??});??
263. ??
264. });??
265. </script>??

?

原文地址:http://www.freejs.net/article_jquerywenzi_124.html