摘要:桌面應用通常使用工具條菜單或者上下文菜單來展現各種任務。使用元素在一個容器中,元素用于創建上下文工具欄和彈出菜單。本地解決方案和一起使用,將把新的菜單合并到本地的上下文菜單。添加子菜單和圖標子菜單由一組相似或相互的菜單項組成。
原文:Introducing the HTML5 “Menu” and “Menuitem” Elements
譯文:HTML 5中Menu和Menuitem的元素介紹
譯者:dwqs
今天向你介紹HTML 5中的兩個元素:Menu和Menuitem,這兩個元素是W3C交互元素中的一部分。現在Web的演變已經不僅僅局限于文檔之間的鏈接,在APPs中,頁面的行為越來越多,因此,是時候形成一個Web交互的標準了。
Menu和Menuitem是在開發者中談論最熱門的兩個元素,可能是由于主流瀏覽器對其缺乏足夠的支持。在我寫這篇文章的時候,FireFox已經實現了這個元素。
Menu和Nav的對比當談到Menu時,難免不和Nav元素混淆。區分這兩個元素,文檔規范是一個不錯的工具。
Nav元素是HTML導航元素,代表著Web頁面的導航塊,一般包含一個links集合,允許用戶在頁面內跳轉或者跳轉到其它網站頁面。
Menu是一系列菜單命令的集合,跟桌面或者手機應用有點相似。桌面應用通常使用工具條菜單或者上下文菜單來展現各種任務。Nav和Menu最根本的不同之處在于:Nav元素包含導航鏈接去幫助用戶在Web頁面之間跳轉,而Menu應該讓用戶執行特定的任務。
使用Menu元素在一個容器中,Menu元素用于創建上下文、工具欄和彈出菜單。然而,后面的兩個功能還沒有瀏覽器實現,包括FireFox。此刻,很難去猜測瀏覽會怎么實現他們以及看起來會是什么樣子。不過對于toolbar和popup菜單的規范在下一代交互設計中做些改變也是一個不錯的機會。
對于現在,我們將集中注意力到上下文。
上下文
當我們右擊一個應用時,會出現一個上下文菜單。顯示的選項取決于用戶在哪里點擊。
JavaScript 選項通過JavaScript和JQuery插件在Web頁面上添加上下文菜單是可以實現的。問題是這種方法需要額外的標記,并且腳本會刪除瀏覽器本地的菜單,如果處理不當,將會使用戶感到失望。
本地解決方案Menu和Menuitem一起使用,將把新的菜單合并到本地的上下文菜單。例如,給body添加一個叫“Hello World”的菜單
在上述代碼片段中,包含的基本屬性有id,type和contextmenu—它指定了菜單類型是context,同時也指定了新的菜單項應該被顯示的區域。
在示例中,當右擊鼠標時,新的菜單項將出現在文檔的任何地方,因為我們指定它的作用區域是body。
當然,你可以通過在特定的元素上給contextmenu賦值,例如div,main,section等等,來限制新菜單項的作用區域。
當在FireFox中查看時,會發現新添加的菜單項被添加到最頂部。
添加子菜單和圖標
子菜單由一組相似或相互的菜單項組成。PS中的Image Rotation就是一個典型的例子。使用Menu添加子菜單是非常容易和直觀的。查看下面的示例代碼:
在支持Menu元素的瀏覽器中運行時,將看到新菜單中添加的四個子菜單:
圖標介紹一個新的屬性:icon,使用這個屬性可以在菜單的旁邊添加圖標。值得一提的是,icon屬性只能在menuitem元素中使用。示例代碼:
結果如你所見的:
在菜單中添加功能我們已經構建了一些看起來像菜單的示例,但是是沒有任何功能都的。當點擊菜單時,用戶期待一些事情發生。例如點擊Copy應該要復制文本或鏈接,點擊New Folder應該創建一個新的文件夾。可以用JavaScript實現這些功能。
注意:在開始之前,我建議你在JavaScript Fundamentals 看一看Jeremy McPeak’s的課程,對于任何想學習JavaScript的人都是一個不錯的開始。
利用上面的“Image Rotation”為例,讓我們添加一個當點擊時旋轉圖像的功能。CSS 3的Transform and Transition可以在瀏覽器中為我們實現這個功能。將圖像旋轉90度的樣式如下:
.rotate-90 { transform: rotate(90deg); }
為了使用這個樣式,需要寫一個函數將它應用到圖像。
function imageRotation(name) { document.getElementById("image").className = name; }
把這個函數和每一個menuitem的onclick屬性關聯,并且傳遞一個參數:rotate-90
完成這個之后,再創建將圖片旋轉180度和裁剪圖片的樣式,將每一個函數添加到獨立的menuitem中,記得傳參數 。查看效果:in the demo page.
查看更多關于Menu元素的信息:Interactive Element: The Menu Element
查看我的示例:http://jsfiddle.net/Web_Code/15pc5zfv/1/embedded/result/
原文首發:http://www.ido321.com/1293.html
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49558.html
摘要:使用自定義菜單此系列文章的應用示例已發布于可以或下載后運行查看歡迎使用和模塊可用于創建自定義本地菜單有兩種菜單應用程序頂部菜單和上下文右鍵單擊菜單在瀏覽器中打開完整的文檔創建應用程序菜單支持進程使用和模塊可以自定義你的應用程序菜單如果 使用 Electron 自定義菜單 此系列文章的應用示例已發布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone ...
摘要:感謝你看到這里,迭代器模式上部分到這里就結束了,本人文筆隨便,若有不足或錯誤之處望給予指點,度彎腰很快我會補全這個內容,生命不息,編程不止參考書籍設計模式 有許多種方法可以把對象堆起來成為一個集合 好消息,當地的餐廳和煎餅屋合并了,但是兩者實現的方式卻不同,這就造成了分歧。讓我們一起去看看把。showImg(https://segmentfault.com/img/bVV5sB?w=...
閱讀 4149·2021-09-22 15:34
閱讀 2765·2021-09-22 15:29
閱讀 490·2019-08-29 13:52
閱讀 3351·2019-08-29 11:30
閱讀 2259·2019-08-26 10:40
閱讀 832·2019-08-26 10:19
閱讀 2256·2019-08-23 18:16
閱讀 2311·2019-08-23 17:50