WebAPI/Softkey through context menu: Difference between revisions
< WebAPI
Jump to navigation
Jump to search
Luke-chang (talk | contribs) mNo edit summary |
Luke-chang (talk | contribs) m (→Concept) |
||
Line 6: | Line 6: | ||
== Concept == | == Concept == | ||
<pre> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<style> | |||
html, body { | |||
height: 100%; | |||
margin: 0; | |||
} | |||
#div1, #div2 { | |||
float: left; | |||
margin: 10px; | |||
padding: 10px; | |||
background-color: aqua; | |||
} | |||
</style> | |||
<script> | |||
window.addEventListener('load', function() { | |||
function menu_handler(evt) { | |||
console.log(this.dataset.menuid); | |||
} | |||
var menuitems = document.getElementsByTagName('menuitem'); | |||
Array.from(menuitems).forEach(function(menuitem) { | |||
menuitem.addEventListener('click', menu_handler); | |||
}); | |||
}); | |||
</script> | |||
</head> | |||
<body contextmenu="menu1"> | |||
<div id="div1">Div 1</div> | |||
<div id="div2" contextmenu="menu2">Div 2</div> | |||
<menu type="context" id="menu1"> | |||
<menuitem data-menuid="lsk" label="LSK" icon="icon_lsk.png"></menuitem> | |||
<menuitem data-menuid="rsk" label="RSK" icon="icon_rsk.png"></menuitem> | |||
</menu> | |||
<menu type="context" id="menu2"> | |||
<menuitem data-menuid="lsk" label="LSK" icon="icon_lsk.png"></menuitem> | |||
<menuitem data-menuid="div_rsk_1" label="Div RSK item 1"></menuitem> | |||
<menuitem data-menuid="div_rsk_2" label="Div RSK item 2"></menuitem> | |||
<menuitem data-menuid="div_rsk_3" label="Div RSK item 3"></menuitem> | |||
</menu> | |||
</body> | |||
</html> | |||
</pre> | |||
== Proposed API == | == Proposed API == |
Revision as of 16:17, 14 March 2015
Idea
Relevant bugs: bug 1142855 (meta)
On simple phone, there are several (two, usually) softkeys on the screen. Sometimes a drop menu will show when clicking one of them. The functionality and caption of these softkeys may vary under different apps but should have the same look across the system. We may need an interface which can let each app easily customize their own softkeys without being aware of how they are rendered.
Concept
<!DOCTYPE html> <html> <head> <style> html, body { height: 100%; margin: 0; } #div1, #div2 { float: left; margin: 10px; padding: 10px; background-color: aqua; } </style> <script> window.addEventListener('load', function() { function menu_handler(evt) { console.log(this.dataset.menuid); } var menuitems = document.getElementsByTagName('menuitem'); Array.from(menuitems).forEach(function(menuitem) { menuitem.addEventListener('click', menu_handler); }); }); </script> </head> <body contextmenu="menu1"> <div id="div1">Div 1</div> <div id="div2" contextmenu="menu2">Div 2</div> <menu type="context" id="menu1"> <menuitem data-menuid="lsk" label="LSK" icon="icon_lsk.png"></menuitem> <menuitem data-menuid="rsk" label="RSK" icon="icon_rsk.png"></menuitem> </menu> <menu type="context" id="menu2"> <menuitem data-menuid="lsk" label="LSK" icon="icon_lsk.png"></menuitem> <menuitem data-menuid="div_rsk_1" label="Div RSK item 1"></menuitem> <menuitem data-menuid="div_rsk_2" label="Div RSK item 2"></menuitem> <menuitem data-menuid="div_rsk_3" label="Div RSK item 3"></menuitem> </menu> </body> </html>