👩🏼‍🏫 🧝🏻 🕴🏼 HTML5コンテキストメニューが到着し、容認できるように見えます 🍊 👩🏿‍💼 ⚰️

Habrahabrについては、Firefox 8がHTML5で記述されたコンテキストメニューをサポートすることを既に述べました（[ 1 ]、[ 2 ]）。だからこそ、私のベータ版チャンネルの Firefox がバージョン8ベータ版に更新されるとすぐに、私はこれらのメニューがどのように見えるかを感じに行きました。「開発者向けFirefox 8 」の記事から、ハイパーリンクを対応するデモページにジャンプしてマウスの右ボタンをクリックするだけで十分でした。これが私の目に見えたものです。

[コンテキストメニューのスクリーンショット]

ご覧のとおり、サイトのコンテキストメニューは、通常のブラウザーのコンテキストメニューのすぐ上にあり、水平の区切り記号で区切られています。サイトのコンテキストメニューには、個々のアイテムとサブメニュー全体を含めることができ、色付きのアイコンで装飾することもできます。

デモページコードの完全なリストを次に示します。

<!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>testing menu</title> <style> .rotate { -moz-transform: rotate(90deg); } .resize { -moz-transform: scale(0.7); } </style> </head><body><div contextmenu="supermenu"> <h1>Yo. Look at the source code.</h1> <img src="http://people.mozilla.com/~prouget/bugs/context-menu-test/b.gif"> </div> <menu type="context" id="supermenu"> <menuitem label="rotate" onclick="rotate()" icon="http://cdn1.iconfinder.com/data/icons/silk2/arrow_rotate_clockwise.png"></menuitem> <menuitem label="resize" onclick="resize()" icon="http://cdn3.iconfinder.com/data/icons/fugue/icon/image-resize.png"></menuitem> <menu label="share"> <menuitem label="twitter" onclick="alert('foo')"></menuitem> <menuitem label="facebook" onclick="alert('bar')"></menuitem> </menu> </menu> <script> function rotate() { document.querySelector("img").classList.toggle("rotate"); } function resize() { document.querySelector("img").classList.toggle("resize"); } </script> <style>@import url("http://paulrouget.com/style/pure.css")</style> </body></html>

ご覧のとおり、メニューの内容は新しいmenuitem要素の属性にあります。これは以前のブラウザーには知られていないため、完全に無視する必要があります。

時間の経過とともに、主要なJavaScriptライブラリ（主に、jQuery）のプラグインの作成者は、HTML5標準のこのサブセクションをまだ理解していないブラウザーを提供する何らかの種類の「松葉杖」を作成および適合させると確信しています。この現在の目新しさの前に近年使用されたこれらのタイプのオーバースクリプトコンテキストメニューのHTML5。

HTML5コンテキストメニューが到着し、容認できるように見えます

More articles: