کاربرد ContextMenu در html

منوی زمینه منويي است که با تعامل کاربر ، مانند کلیک راست ، ظاهر می شود. اکنون HTML5 به ما امکان می دهد این منو را شخصی سازی کنیم. در اینجا چند نمونه از منوهای تو در تو را مشاهده می کنید.

مثالSection
HTMLSection
<bodyextmenu = “share”>
<menu type = “ext “id =” share “>
<menu label = “share”>
<menuitem label = “Twitter” onclick = “shareViaTwitter ()”> </menuitem>
<menuitem label = “Facebook” onclick = “shareViaFacebook ()”>> </menuitem>
</menu>
</menu>
<ol>
<li>
در هر جای مثال ، می توانید صفحه را در توییتر و
فیس بوک با استفاده از منوی اشتراک گذاری از فهرست زمینه خود.
</li>
<liextmenu = “changeFont” id = “fontSizing”>
در این عنصر لیست خاص ، می توانید اندازه متن را تغییر دهید
با استفاده از اقدامات “افزایش / کاهش قلم” از فهرست زمینه خود
</li>
<menu type = “ext “id =” changeFont “>
<menuitem label = “افزایش قلم” onclick = “incFont ()”> </menuitem>
<menuitem label = “کاهش قلم” onclick = “decFont ()”> </menuitem>
</menu>
<liextmenu = “ChangeImage” id = “changeImage”>
روی تصویر زیر می توانید عمل “تغییر تصویر” را آتش بزنید
در فهرست زمینه خود. <br />
<img src = “https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png”
extmenu = “ChangeImage” id = “promoButton” />
<menu type = “ext “id =” ChangeImage “>
<menuitem label = “Change Image” onclick = “changeImage ()”> </menuitem>
</menu>
</li>
</ol>
</body>
JavaScriptSection
تابع shareViaTwitter ()
windows.open (“https://twitter.com/intent/tweet؟text=” +)
“Hureray! من ContextMenu را از MDN از طریق موزیلا یاد می گیرم”)؛
}

تابع shareViaFacebook ()
windows.open (“https://facebook.com/sharer/sharer.php؟u=” +
“https://developer.mozilla.org/fa/HTML/Element/Using_HTML_context_menus”)؛
}

تابع incFont ()
document.getElementById (“fontSize”). style.fontSize = “بزرگتر”؛
}

تابع decFont ()
document.getElementById (“fontSize”). style.fontSize = “کوچکتر”؛
}

تابع changeImage ()
var index = Math.ceil (Math.random () * 39 + 1)؛
document.images [0] .src =
“https://developer.mozilla.org/media/img/promote/promobutton_mdn” +
index + “.png”؛
}