This article gives you all you need to implement a v2.0 Object Menu (Context Menu) in your own app.
Live sample
The following gives you an idea of what the rendered menu would look like (the vertical scroll bar would not appear on the actual device.)
Code
Here is the code you'll need.
CSS
<link href="(your styles folder)/style/object_menu.css" rel="stylesheet" type="text/css">
The CSS can be found in the Gaia project 2.0 branch under shared/style/object_menu.css. Copy this into your own project, along with the .
HTML
Note: The CSS inside the <style> element isn't needed for the implementation: it is just for the purposes of this example.
<!doctype html>
<html>
<head>
<link href="https://mdn.github.io/gaia-2.0-bb/switches.css" rel="stylesheet" type="text/css">
<link href="https://mdn.github.io/gaia-2.0-bb/input_areas.css" rel="stylesheet" type="text/css">
<link href="https://mdn.github.io/gaia-2.0-bb/object_menu.css" rel="stylesheet" type="text/css">
<link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
<style>
html, body {
font-family: sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
}
body {
background: none;
}
</style>
</head>
<body role="application">
<p dir="ltr">
<label>
<input type="checkbox"
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
RTL mode
</label>
</p>
<form role="dialog" data-type="object">
<header>Title</header> <!-- this header is optional -->
<section>
<ul>
<li>First item</li>
<li><p>One Paragraph</p></li>
<li>
<p>Two</p>
<p>Paragraphs</p>
</li>
<li>
<p>Two Paragraphs (one empty)</p>
<p></p>
</li>
</ul>
<h2>Buttons</h2>
<ul>
<li><button>Button</button></li>
<li><a href="#">Anchor</a></li>
<li>
<a href="#">
<p>Paragraph inside anchor</p>
</a>
</li>
<li>
<a href="#">
<p>Two Paragraphs</p>
<p>inside anchor</p>
</a>
</li>
</ul>
<h2>inputs</h2>
<ul class="skin-dark">
<li class="input">
<p>
<input type="text" placeholder="disabled">
<button type="reset"></button>
</p>
<p>
<textarea placeholder="disabled"></textarea>
</p>
</li>
</ul>
</section>
<menu type="toolbar">
<button>Cancel</button>
<button class="recommend">Ok</button>
</menu>
</form>
</body>
</html>
Note: Use <button type="button"> if you don't want your form to be submitted.
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills
Last updated by:
chrisdavidmills,