欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5.2 dialog簡介詳解

  發(fā)布時間:2018-02-27 15:19:52   作者:前端學(xué)習(xí)   我要評論
這篇文章主要介紹了html5.2 dialog簡介詳解的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

2017年12月24號, HTML5.2 標準固化,也代表著移動端進入 HTML5.3 規(guī)劃階段,雖然 HTML5.2 固化了,但內(nèi)部的一些新規(guī)范,在移動端的瀏覽器中的支持性還有待提高,這里我們來看一個算是常用的新被納入標準的標簽吧,它就是 dialog 標簽。

1. 寫在前面

說起 dialog 標簽,可能很多人都比較陌生,畢竟這個標簽直到 HTML5.2 標準固定,也只是 chrome 的瀏覽器才支持的,那至于該標簽的用處,根據(jù)語義也可以很明顯的理解到,會話。

這里我們可能會想到的是, alert , confirm 等彈窗,是的,它們是同一個家族的,都是彈出框,接下來我們就簡單的看看, dialog 標簽的一些屬性與使用場景。

2. 標簽使用

<dialog open="">      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

既然是標簽,那么其實與我們常用的 div , p 等標簽一樣,如上面的示例代碼所示,其內(nèi)部支持任意的其他元素。

這里,你可能會注意到,在上面的示例代碼中的 open 屬性,是的,這個是用來控制這個彈窗的顯示和隱藏的,當然,你也可以任性的使用 css 來控制,只是那樣在一些設(shè)備的輔助功能時(比如無障礙訪問,讀屏軟件等),就會出現(xiàn)異常了,所以建議還是使用標準中的顯示與隱藏功能。

3. 支持的默認方法

首先, dialog 標簽是 HTMLDialogElement 的一個示例,繼承自 HTMLElement ,所以,它與div這一的標簽是屬于同層次的標簽,唯一不同的是,它比div有更多的默認功能,這一小節(jié),我們就來看看, dialog 有哪些默認的方法供我們使用。

var dialog = document.getElementById("dialog");
// 假設(shè)頁面中,有一個id=dialog的dialog標簽

// 關(guān)閉dialog
dialog.close();

// 以toast的形式顯示dialog
dialog.show();

// 以模態(tài)框的形式顯示dialog
dialog.showModal();

// dialog.close()調(diào)用時傳入的參數(shù)值
dialog.returnVlaue;

// dialog的顯示狀態(tài)
dialog.open;

你可以自己先去示例中,操作一下,然后看看有哪些特色,然后再回來對比一下,接下來的總結(jié):

1: close 方法,可以多次被調(diào)用,即便是隱藏狀態(tài),也可以再次被調(diào)用。

2: close 可以傳入一個變量,這個變量必須是字符串,在 returnVlaue 中表現(xiàn)。

3: show 方法,也可以多次被調(diào)用,即便在隱藏狀態(tài),不會有任何問題。

4: show 方法,不會更改 toast 的位置,彈出框原本在什么位置, show 方法調(diào)用之后,依然在原有的位置。

5: show 方法,顯示位置緊挨著前一個元素后面,居中,沒有背后的遮罩層, z-index 的顯示方式與 relative 不設(shè)置 z-index 的類似(如果在此之前,沒有調(diào)用過 showModal 的話)。

6: 如果調(diào)用過 showModal 后,那么 show 方法后,元素顯示在 showModal 顯示的位置,不會變動(即便內(nèi)容高度變化了很多)。

7: 如果有兩個 dialog 元素,都調(diào)用 show 方法,在 html 結(jié)構(gòu)中,后面的 dialog 會永遠覆蓋在前面的那個上層(不管那個 dialog 先調(diào)用了 show 方法)。

8: showModal 的顯示,背后會有遮罩層,顯示層級是瀏覽器 webview 級別的,怎么理解呢,你可以設(shè)置一個元素,級別非常高,在使用 showModal 顯示出 dialog 屬性后, dialog 都是在最前面的,這一點特別適合做模態(tài)框,肯定不會在彈出框出現(xiàn)之后,出現(xiàn)層級混亂的情況。

9: showModal 只能調(diào)用一次,這里的一次是說,如果 dialog 在顯示狀態(tài),那么在再次調(diào)用 showModal ,就會報錯,并且不能直接執(zhí)行,或者說,只要 open 屬性存在的情況下,再次調(diào)用,都會報錯,所以還是使用默認的 open 屬性來做 dialog 的顯示隱藏更好。

10: 如果頁面上有兩個 dialog 元素,都在調(diào)用 showModal 方法的話,不論他們在 HTML 中的結(jié)構(gòu),后調(diào)用的 dialog 的層級會高于之前調(diào)用的 dialog 的層級。

11: dialog.returnVlaue 的取值,是 dialog.close(string) 調(diào)用時傳入的值,只支持字符串,只有在 dialog 的顯示的情況下,調(diào)用 dialog.close 傳入的值,才有效。

12: 如果一直沒有在 close 中傳值,那么 returnVlaue 的值為空,如果某次傳值 dialog.close("1") ,再下次 show 之后, dialog.close() 關(guān)閉, returnVlaue 依然等于“1”。

13: open 的返回值是: true/false 。

4. 支持的默認事件

dialog 還有一個好處就是,它支持出 click 等基礎(chǔ)事件之外的,額外兩個針對于 dialog 的特殊事件:

var dialog = document.getElementById("dialog");
// 假設(shè)頁面中,有一個id=dialog的dialog標簽

// 當調(diào)用close方法時
dialog.onclose = function(){};

// 當在pc端按下esc按鍵時。不過在chrome版本之后,好像不管用了。
dialog.oncancel = function(){};

現(xiàn)在來看一個示例: dialog 事件示例展示。

也有幾個問題,這里來列舉一下:

1: 只要調(diào)用 dialog.close() 來隱藏的 dialog ,才能觸發(fā) onclose 事件。

2: cancel 事件觸發(fā)之后,必定會繼續(xù)觸發(fā) close 事件, chrome64 版本之后, cancel 的觸發(fā),不是 esc 按鍵了。

3: 如果有多種關(guān)閉 dialog 的按鈕,那么在每次調(diào)用 close 的時候傳入不同的值,在 close 事件的回調(diào)里面,使用 returnVlaue 的取值,來判斷,是哪個按鈕用來觸發(fā)的關(guān)閉事件。

5. 其他

前面把 dialog 的一些表現(xiàn)進了說明,可能有不全,不準確的情況,也可能隨著時間的推移,有更新的特性出現(xiàn),歡迎提出補充。

在看前面的示例時,我們也看到了一下不足的地方,比如:樣式特別丑,關(guān)于這點,我們可以完全使用CSS把樣式reset掉,不影響語義,和其他的任何東西,放心重構(gòu)就可以了。

這里只是想說一下, dialog 的表現(xiàn),所以就不做這些了。

6. 總結(jié)

dialog 畢竟屬于彈窗對話的語義化標簽,并且有一些獨有的優(yōu)勢(比如 webview 層級的高度),雖然現(xiàn)在只是chrome支持,但對于以后的使用,依然是很看好的,甚至現(xiàn)在也可以自己兼容一下,在其他瀏覽器,自己去實現(xiàn)一套 dialog 的機制(也許已經(jīng)有這套實現(xiàn)方案了,這里就不去找了)。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及
    2025-04-21
  • HTML5表格語法格式詳解

    在HTML語法中,表格主要通過< table >、< tr >和< td >3個標簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧
    2025-04-21
  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實現(xiàn)自動換行的網(wǎng)格布局,感興趣的朋友一起看看吧
    2025-04-21
  • 基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標注出對應(yīng)的
    2025-03-11
  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標準化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11
  • HTML5中下拉框<select>標簽的屬性和樣式詳解

    在HTML5中,下拉框(<select>標簽)作為表單的重要組成部分,為用戶提供了一個從預(yù)定義選項中選擇值的方式,本文將深入探討<select>標簽的屬性、樣式,并重點介
    2025-02-27
  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器,感興趣的朋友一起看
    2025-02-17
  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標簽用于引入外部圖
    2025-02-17
  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣
    2025-02-17
  • HTML5使用details標簽:展開/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標簽的妙用,這個不用js即可實現(xiàn)展開/收縮信息,很方便用來讓用戶先才答案,然后下面點擊再給出答案的效果,這里就為大家簡單介紹一下,
    2024-11-03

最新評論