整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
認功能
基本的對話框窗口是一個定位于視區中的覆蓋層，同時通過一個 iframe 與頁面內容分隔開（就像 select 元素）。它由一個標題欄和一個內容區域組成，且可以移動，調整尺寸，默認可通過 'x' 圖標關閉。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 默認功能</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <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" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <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" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <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 >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" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <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 >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" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <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-\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>所有的表單字段都是必填的。</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" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <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 >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>之前寫的一篇文章《我的Vue組件庫之進度條(progressbar)組件》中，講解了如何通過自己的方式寫出一個進度條組件。之前看到有的人說，我們可以直接用已經存在的Vue組件，為什么還要自己寫呢？其實，自己造輪子的過程會讓你對Vue的理解更加透徹，還是鼓勵大家自己造輪子。
運行效果圖
首先我們看下運行效果圖
dialog運行結果
實現過程
項目搭建
dialog組件是一個可以獨立運行的npm包，通過Yeoman進行構建，再通過Gulp+Webpack構建工具，生成的工作目錄如下，其中各個文件夾的內容如之前文章中描述的一樣
項目目錄結構
dialog組件之template
dialog組件以.vue的文件形式存在，其中的template部分內容如下
dialog組件之template
我們來分析一下，dialog組件的幾個屬性
類型，利用type參數去控制，表示的對話框的類型，取值為alert或者confirm
消息頭，利用title參數去控制
消息體，利用message參數去控制
確認按鈕提示信息，利用confirmButtonText參數控制
取消按鈕提示信息，利用cancelButtonText參數控制
dialog組件之script
dialog組件內部的初始化方法
初始化方法
組件的alert與confirm方法
alert與confirm方法
dialog組件之style
由于style部分的內容比較多，這里選取比較重要的部分，首先是基本的dialog樣式
基本的dialog樣式
然后是dialog的消息體和消息底部以及button的樣式
消息體和消息底的樣式
然后看下dialog結合css3樣式的部分
dialog結合css3樣式
示例
在完成上述步驟后，便可完成一個dialog組件，接下來看dialog組件的使用，如果能運行出來，就會看到文章開始的效果
例子中的template部分
例子的script部分
總結
本文詳細的介紹了編寫dialog組件的過程，希望能對大家有幫助
如果喜歡的話，記得關注小編噢，小編后續會堅持出更多技術性的文章，如果有任何問題，也歡迎提問，小編都會盡力解答的。
另外小編開通了微博賬號，以后的文章都會同步到微博上，感興趣的可以關注下我的微博賬號噢，賬號是：CodingShare
文由掘金@天行天忌授權發布，前端晚間課對其內容進行微改。
HTML，超文本標記語言，是一種用于創建網頁的標準標記語言。自從引入 HTML 以來，它就一直用于構建互聯網。與 JavaScript 和 CSS 一起，HTML 構成前端開發的三劍客。
盡管許多新技術使網站創建過程變得更簡單、更高效，但 HTML 始終是核心。隨著 HTML5 的普及，在 2014 年，這種標記語言發生了很多變化，變得更加友好，瀏覽器對新標準的支持熱度也越來越高。而HTML并不止于此，還在不斷發生變化，并且可能會獲得一些特性來證明對 HTML6 的命名更改是合理的。
該元素<dialog> 將隨 HTML6 一起提供。它被認為等同于用 JavaScript 開發的模態，并且已經標準化，但只有少數瀏覽器完全支持。但這種現象會改變，很快它將在所有瀏覽器中得到支持。
這個元素在其默認格式下，只會將光標顯示在它所在的位置上，但可以使用 JavaScript 打開模式。
<dialog>
<form method="dialog">
<input type="submit" value="確定" />
<input type="submit" value="取消" />
</form>
</dialog>在默認形式下，該元素創建一個灰色背景，其下方是非交互式內容。
可以在 <dialog> 其中的表單上使用一種方法，該方法將發送值并將其傳遞回自身 <dialog>。
總的來說，這個標簽在用戶交互和改進的界面中變得有益。
可以通過更改 <dialog> 標簽的 open 屬性以控制打開和關閉。
<dialog open>
<p>組件內容</p>
</dialog>FutureClaw 雜志主編 Bobby Mozumder 建議：
將錨元素鏈接到 JSON/XML、API 端點，讓瀏覽器在內部將數據加載到新的數據結構中，然后瀏覽器將 DOM 元素替換為根據需要加載的任何數據。初始數據（以及標準錯誤響應）可以放在標題裝置中，如果需要，可以稍后替換。
據他介紹，這是單頁應用程序網頁設計模式，可以提高響應速度和加載時間，因為不需要加載 JavaScript。
這個是一個比較有意思的提案，就有點類似我們以前沒有做前后端分離之前的混合編程的模式，HTML變成模板語言，通過JSON API請求數據，不一樣的是變成瀏覽器來默認解析，瀏覽器內部加載數據到新的數據結構中，然后瀏覽器將按需加載到的數據替換成 DOM 元素。
大家可以看一下InfoQ上的這篇文章《針對非正式 HTML6 提案“無需 JavaScript 的單頁應用”引發的論戰》，了解更多！
https://www.infoq.cn/article/2015/03/html6-without-javascript
HTML6 愛好者相信即將到來的更新將允許瀏覽器調整圖像大小以獲得更好的觀看體驗。
每個瀏覽器都難以呈現相對于設備和屏幕尺寸的最佳圖像尺寸，不幸的是，src 標簽 img 在處理這個問題時不是很有效。
這個問題可以通過一個新標簽 <srcset> 來解決，它使瀏覽器在多個圖像之間進行選擇的工作變得更加容易。
將可用庫引入 HTML6 絕對是提高開發效率的重要一步。
很多時候，需要在互聯網上定義一般信息，而這些一般信息可以是任何公開的信息，例如電話號碼、姓名、地址等。微格式是能夠定義一般數據的標準。微格式可以增強設計者的能力，并可以減少搜索引擎推斷公共信息所需的努力。
盡管標簽<ul>、<ol>非常有用，但在某些情況下仍有一些不足之處。可以處理交互元素的標簽將是一個不錯的選擇。
這就是創建標簽 <menu> 的驅動力，它可以處理按鈕驅動的列表元素。
<menu type="toolbar">
<li><button>個人信息</button></li>
<li><button>系統設置</button></li>
<li><button>賬號注銷</button></li>
</menu>因此 <menu>，除了能夠像普通列表一樣運行之外，還可以增強 HTML 列表的功能。
雖然HTML5在安全性方面還不錯，瀏覽器和網絡技術也提供了合理的保護。毫無疑問，在身份驗證和安全領域還有很多事情可以做。如密鑰可以異地存儲；這將防止不受歡迎的人訪問并支持身份驗證。使用嵌入式密鑰而不是 cookie，使數字簽名更好等。
HTML6 允許以更好的方式使用設備上的相機和媒體。將能夠控制相機、它的效果、模式、全景圖像、HDR 和其他屬性。
沒有什么是完美的，HTML 也不是完美的，所以 HTML 規范可以做很多事情來使它更好。應該對一些有用的規范進行標準化，以增強 HTML 的能力。小的變化已經開始推出。如增強藍牙支持、p2p 文件傳輸、惡意軟件保護、云存儲集成，下一個 HTML 版本可以考慮一下。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
