jQuery UI 進階dialog應用

是說dialog的UI真的是好物，CSS熟一點的話就可以把UI變成自己的了。

首先準備html

view plaincopy to clipboardprint

1. <button id="create-user">Create new user</button>  
2. <div id="dialog" title="Dialog">  
3.     <form>  
4.     <fieldset>  
5.     <label for="name">Name</label>  
6.     <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />  
7.     <label for="email">Email</label>  
8.     <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />  
9.        
10.     </fieldset>  
11.     </form>  
12. </div>  

把內容先放到dialog內，再用一個button把dialog叫出來。

寫一些程式，如果按cancel就把dialog關掉，如果按Ok則會alert輸入的名稱跟e-mail。

view plaincopy to clipboardprint

1. var name = $( "#name" ),   
2.     email = $( "#email" );   
3.  $( "#dialog" ).dialog({   
4.         autoOpen: false,   
5.         height: 300,   
6.         width: 350,   
7.         modal: true,   
8.         buttons: {   
9.             "Ok": function() {   
10.                 alert("name: "+name.val()+", email: "+email.val());   
11.             },   
12.             Cancel: function() {   
13.                 $( this ).dialog( "close" );   
14.             }   
15.         },   
16.         close: function() {   
17.             allFields.val( "" ).removeClass( "ui-state-error" );   
18.         }   
19. });  

最後寫把dialog叫出來的程式

view plaincopy to clipboardprint

1. $( "#create-user" )   
2.     .button()   
3.     .click(function() {   
4.     $( "#dialog" ).dialog( "open" );   
5. });  

Demo
jQuey UI 的dialog有更多用法可以參考
jQuey UI dialog