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