diff options
| author | TJ VanToll <tj.vantoll@gmail.com> | 2014-09-19 15:12:35 -0400 |
|---|---|---|
| committer | TJ VanToll <tj.vantoll@gmail.com> | 2014-09-19 15:16:38 -0400 |
| commit | 1c08e882ab7d4be90c2f08a3876f34141ab478c8 (patch) | |
| tree | 9a0631981defea6ac7d3c8ff53d61c34cf9096cd /demos | |
| parent | da02b2ea4c1208c7a8590f676b92e19d9d88e963 (diff) | |
| download | jquery-ui-1c08e882ab7d4be90c2f08a3876f34141ab478c8.tar.gz jquery-ui-1c08e882ab7d4be90c2f08a3876f34141ab478c8.zip | |
Menu: Adding a demo showing how to create category headers
Closes gh-1347
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/menu/categories.html | 42 | ||||
| -rw-r--r-- | demos/menu/index.html | 1 |
2 files changed, 43 insertions, 0 deletions
diff --git a/demos/menu/categories.html b/demos/menu/categories.html new file mode 100644 index 000000000..c0e55d05a --- /dev/null +++ b/demos/menu/categories.html @@ -0,0 +1,42 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Menu - Categories</title> + <link rel="stylesheet" href="../../themes/base/all.css"> + <script src="../../external/jquery/jquery.js"></script> + <script src="../../ui/core.js"></script> + <script src="../../ui/widget.js"></script> + <script src="../../ui/position.js"></script> + <script src="../../ui/menu.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "#menu" ).menu({ + items: "> :not(.ui-widget-header)" + }); + }); + </script> + <style> + .ui-menu { width: 200px; } + .ui-widget-header { padding: 0.2em; } + </style> +</head> +<body> + +<ul id="menu"> + <li class="ui-widget-header">Category 1</li> + <li>Option 1</li> + <li>Option 2</li> + <li>Option 3</li> + <li class="ui-widget-header">Category 2</li> + <li>Option 4</li> + <li>Option 5</li> + <li>Option 6</li> +</ul> + +<div class="demo-description"> +<p>By using the <code>items</code> option, you can configure which elements are converted into selectable menu items. Here this technique is used to create category headers.</p> +</div> +</body> +</html> diff --git a/demos/menu/index.html b/demos/menu/index.html index 6e1969883..431926d35 100644 --- a/demos/menu/index.html +++ b/demos/menu/index.html @@ -10,6 +10,7 @@ <ul> <li><a href="default.html">Default functionality</a></li> <li><a href="icons.html">Icons</a></li> + <li><a href="categories.html">Categories</a></li> </ul> </body> |