jQuery UI 進階dialog應用

dialog

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

首先準備html
  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。
  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叫出來的程式
  1. $( "#create-user" )   
  2.     .button()   
  3.     .click(function() {   
  4.     $( "#dialog" ).dialog( "open" );   
  5. });  

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

留言