首页>>Jquery文字>>jQuery dialog 对话框，可以改变外形和设置的dialog(2013-11-22)

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