jQuery UI 實例-對話框（Dialog）
默認功能
基本的對話框窗口是一個定位於視區中的覆蓋層，同時通過一個 iframe 與頁面內容分隔開（就像 select 元素）。它由一個標題欄和一個內容區域組成，且可以移動，調整尺寸，默認可通過 "x" 圖標關閉。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 默認功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#dialog" ).dialog(); }); </script> </head> <body> <div id="dialog" title="基本的對話框"> <p>這是一個默認的對話框，用於顯示信息。對話框窗口可以移動，調整尺寸，默認可通過 "x" 圖標關閉。</p> </div> </body> </html>
查看演示
動畫
可以通過為 show/hide 屬性指定一個特效來動畫顯示對話框。您必須為想使用的特效引用獨立的特效文件。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 動畫</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); }); </script> </head> <body> <div id="dialog" title="Basic dialog"> <p>這是一個動畫顯示的對話框，用於顯示信息。對話框窗口可以移動，調整尺寸，默認可通過 "x" 圖標關閉。</p> </div> <button id="opener">打開對話框</button> </body> </html>
查看演示
基本的模態
模態對話框防止用戶與對話框以外的頁面其他部分進行交互，直到對話框關閉為止。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 基本的模態</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#dialog-modal" ).dialog({ height: 140, modal: true }); }); </script> </head> <body> <div id="dialog-modal" title="基本的模態對話框"> <p>添加模態覆蓋屏幕，讓對話框看起來更突出，因為它讓頁面上其他內容變暗。</p> </div> <p>Sed vel diam id libero <a href="http://www.w3cschool.cc">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>
查看演示
模態確認
確認一個動作可能是破壞性的也可能是有意義的。設置 modal 選項為 true，並通過 buttons 選項來指定主要的和次要的用戶動作。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 模態確認</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); }); </script> </head> <body> <div id="dialog-confirm" title="清空回收站嗎？"> <p><span class="ui-icon ui-icon-alert" stylex="float:left; margin:0 7px 20px 0;"></span>這些項目將被永久刪除，並且無法恢復。您確定嗎？</p> </div> <p>Sed vel diam id libero <a href="http://www.w3cschool.cc">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>
模態表單
使用模態對話框來請求用戶在一個多步驟過程中輸入數據。在內容區域嵌入 form 標記，設置 modal 選項為 true，並通過 buttons 選項來指定主要的和次要的用戶動作。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 模態表單</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> body { font-size: 62.5%; } label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:0; border:0; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } div#users-contain { width: 350px; margin: 20px 0; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } </style> <script> $(function() { var name = $( "#name" ), email = $( "#email" ), password = $( "#password" ), allFields = $( [] ).add( name ).add( email ).add( password ), tips = $( ".validateTips" ); function updateTips( t ) { tips .text( t ) .addClass( "ui-state-highlight" ); setTimeout(function() { tips.removeClass( "ui-state-highlight", 1500 ); }, 500 ); } function checkLength( o, n, min, max ) { if ( o.val().length > max || o.val().length < min ) { o.addClass( "ui-state-error" ); updateTips( "" + n + " 的長度必須在 " + min + " 和 " + max + " 之間。" ); return false; } else { return true; } } function checkRegexp( o, regexp, n ) { if ( !( regexp.test( o.val() ) ) ) { o.addClass( "ui-state-error" ); updateTips( n ); return false; } else { return true; } } $( "#dialog-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "創建一個帳戶": function() { var bValid = true; allFields.removeClass( "ui-state-error" ); bValid = bValid && checkLength( name, "username", 3, 16 ); bValid = bValid && checkLength( email, "email", 6, 80 ); bValid = bValid && checkLength( password, "password", 5, 16 ); bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "用戶名必須由 a-z、0-9、下劃線組成，且必須以字母開頭。" ); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ bValid = bValid && checkRegexp( email, /^((([a-z]|d|[!#$%&"*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&"*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i, "eg. ui@jquery.com" ); bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "密碼欄位只允許： a-z 0-9" ); if ( bValid ) { $( "#users tbody" ).append( "<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>" ); $( this ).dialog( "close" ); } }, Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); }); }); </script> </head> <body> <div id="dialog-form" title="創建新用戶"> <p>所有的表單欄位都是必填的。</p> <form> <fieldset> <label for="name">名字</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all"> <label for="email">郵箱</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"> <label for="password">密碼</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all"> </fieldset> </form> </div> <div id="users-contain"> <h1>已有的用戶：</h1> <table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> <th>名字</th> <th>郵箱</th> <th>密碼</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>johndoe1</td> </tr> </tbody> </table> </div> <button id="create-user">創建新用戶</button> </body> </html>
模態消息
使用模態對話框來在下一步動作執行之前確認信息和動作。設置 modal 選項為 true，並通過 buttons 選項來指定主要的動作（Ok）。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 模態消息</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#dialog-message" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); }); </script> </head> <body> <div id="dialog-message" title="下載完成"> <p> <span class="ui-icon ui-icon-circle-check" stylex="float:left; margin:0 7px 50px 0;"></span> 您的文件已經成功下載到文件夾中。 </p> <p> 當前使用存儲空間的 <b>36%</b>。 </p> </div> <p>Sed vel diam id libero <a href="http://www.w3cschool.cc">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>
TAG:程序員小新人學習 |