jQuery UI 實例 - 對話框（Dialog）(zhuan)

時間 2019-11-15

標籤 jquery 實例對話框 dialog zhuan 欄目 JQuery 简体版

原文原文鏈接

http://www.runoob.com/jqueryui/example-dialog.htmlcss

******************************************************html

在一個交互覆蓋層中打開內容。jquery

如需瞭解更多有關 dialog 部件的細節，請查看 API 文檔對話框部件（Dialog Widget）。api

默認功能

基本的對話框窗口是一個定位於視區中的覆蓋層，同時經過一個 iframe 與頁面內容分隔開（就像 select 元素）。它由一個標題欄和一個內容區域組成，且能夠移動，調整尺寸，默承認經過 'x' 圖標關閉。app

<!doctype html> <html lang="en"> <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 屬性指定一個特效來動畫顯示對話框。您必須爲想使用的特效引用獨立的特效文件。ide

<!doctype html> <html lang="en"> <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 lang="en"> <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 選項來指定主要的和次要的用戶動做。ui

<!doctype html> <html lang="en"> <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" style="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 選項來指定主要的和次要的用戶動做。this

<!doctype html> <html lang="en"> <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-九、下劃線組成，且必須以字母開頭。" ); // 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-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\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 class="validateTips">全部的表單字段都是必填的。</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" class="ui-widget"> <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）。spa

<!doctype html> <html lang="en"> <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" style="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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。