😭 ⏭️ 👩🏿‍🤝‍👨🏾 HTML5 संदर्भ मेनू आ गए हैं और वे सहन करने योग्य लगते हैं 👩‍👩‍👧‍👧 🤞🏻 👰🏻

Habrahabr पर कई बार मैंने पहले ही ([ 1 ], [ 2 ]) उल्लेख किया है कि फ़ायरफ़ॉक्स 8 HTML5 में लिखे संदर्भ मेनू का समर्थन करेगा। इसीलिए, जैसे ही बीटा चैनल में मेरे फ़ायरफ़ॉक्स को 8 बीटा संस्करण में अपडेट किया गया, मुझे लग रहा था कि ये मेनू कैसे दिखेंगे। यह मेरे लिए " डेवलपर्स के लिए फ़ायरफ़ॉक्स 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>

जैसा कि आप देख सकते हैं, मेनू की सामग्री नए मेनूइटम तत्व की विशेषताओं में है, जो पिछले ब्राउज़रों को नहीं पता है - और इसलिए उन्हें इसे पूरी तरह से अनदेखा करना चाहिए।

मुझे यकीन है कि समय के साथ, प्रमुख जावास्क्रिप्ट पुस्तकालयों के लिए प्लग-इन के लेखक (मुख्य रूप से, जाहिरा तौर पर, jQuery) कुछ ऐसे "बैसाखी" की रचना और अनुकूलन करेंगे जो ब्राउज़र प्रदान करते हैं जो अभी तक एचटीएमएल 5 मानक के इस उप-भाग को नहीं समझते हैं, एक वैकल्पिक विकल्प संदर्भ मेनू का जावास्क्रिप्ट रूपांतरण है एचटीएमएल 5 इस प्रकार के अति-स्क्रिप्टेड संदर्भ मेनू में हैं जो इस वर्तमान नवीनता से पहले के वर्षों में उपयोग किए गए थे।

HTML5 संदर्भ मेनू आ गए हैं और वे सहन करने योग्य लगते हैं

More articles: