aboutsummaryrefslogtreecommitdiffstats
path: root/demos/menubar
diff options
context:
space:
mode:
authorJörn Zaefferer <joern.zaefferer@gmail.com>2011-05-08 20:41:21 +0200
committerJörn Zaefferer <joern.zaefferer@gmail.com>2011-05-08 20:41:21 +0200
commite6d1ab7bf40e7ecaaaea0d53407dc98a416cc054 (patch)
tree6c4f5f12864949eab4aa176cccb3411942b3c81a /demos/menubar
parent24c0d9195a3ae84bf6fe4698926fafafa55b2bdf (diff)
downloadjquery-ui-e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054.tar.gz
jquery-ui-e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054.zip
Popup and Menubar demos
Diffstat (limited to 'demos/menubar')
-rw-r--r--demos/menubar/default.html234
-rw-r--r--demos/menubar/index.html16
2 files changed, 250 insertions, 0 deletions
diff --git a/demos/menubar/default.html b/demos/menubar/default.html
new file mode 100644
index 000000000..be49b4589
--- /dev/null
+++ b/demos/menubar/default.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery UI Menubar - Default demo</title>
+ <link rel="stylesheet" href="../demos.css" type="text/css" />
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+ <script src="../../jquery-1.5.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.menubar.js"></script>
+ <script>
+ $(function() {
+ $("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
+
+ $("#bar1, .menubar").menubar({
+ select: function(event, ui) {
+ $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+ }
+ });
+
+ $(".menubar-icons").menubar({
+ menuIcon: true,
+ buttons: true,
+ select: function(event, ui) {
+ $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+ }
+ });
+ });
+ </script>
+ <style type="text/css">
+ #bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */
+ .ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; }
+ .ui-menu .ui-icon { float: right; }
+ .ui-menu li.ui-state-disabled {
+ font-weight: bold;
+ padding: .0em .4em;
+ margin: .4em 0 .2em;
+ line-height: 1.5;
+ }
+
+ /* menubar styles */
+ .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
+ .ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
+
+ .ui-menubar {
+ list-style: none;
+ margin: 0;
+ padding-left: 0;
+ }
+
+ .ui-menubar-item {
+ float: left;
+ }
+ /*
+ table {
+ border-collapse: collapse;
+ }
+ th, td {
+ padding: 0.5em;
+ border: 1px solid black;
+ }
+ */
+ </style>
+</head>
+<body>
+
+<div class="demo">
+<ul id="bar1" class="menubar">
+ <li>
+ <a href="#">File</a>
+ <ul>
+ <li><a href="#">Open...</a></li>
+ <li class="ui-state-disabled">Open recent...</li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Save as...</a></li>
+ <li><a href="#">Close</a></li>
+ <li><a href="#">Quit</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Edit</a>
+ <ul>
+ <li><a href="#">Copy</a></li>
+ <li><a href="#">Cut</a></li>
+ <li class="ui-state-disabled">Paste</li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">View</a>
+ <ul>
+ <li><a href="#">Fullscreen</a></li>
+ <li><a href="#">Fit into view</a></li>
+ <li>
+ <a href="#">Encoding</a>
+ <ul>
+ <li><a href="#">Auto-detect</a></li>
+ <li><a href="#">UTF-8</a></li>
+ <li>
+ <a href="#">UTF-16</a>
+ <ul>
+ <li><a href="#">Option 1</a></li>
+ <li><a href="#">Option 2</a></li>
+ <li><a href="#">Option 3</a></li>
+ <li><a href="#">Option 4</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Customize...</a></li>
+ </ul>
+ </li>
+</ul>
+
+<ul id="bar2" class="menubar-icons">
+ <li>
+ <a href="#">File</a>
+ <ul>
+ <li><a href="#">Open...</a></li>
+ <li class="ui-state-disabled">Open recent...</li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Save as...</a></li>
+ <li><a href="#">Close</a></li>
+ <li><a href="#">Quit</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Edit</a>
+ <ul>
+ <li><a href="#">Copy</a></li>
+ <li><a href="#">Cut</a></li>
+ <li class="ui-state-disabled">Paste</li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">View</a>
+ <ul>
+ <li><a href="#">Fullscreen</a></li>
+ <li><a href="#">Fit into view</a></li>
+ <li>
+ <a href="#">Encoding</a>
+ <ul>
+ <li><a href="#">Auto-detect</a></li>
+ <li><a href="#">UTF-8</a></li>
+ <li>
+ <a href="#">UTF-16</a>
+ <ul>
+ <li><a href="#">Option 1</a></li>
+ <li><a href="#">Option 2</a></li>
+ <li><a href="#">Option 3</a></li>
+ <li><a href="#">Option 4</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Customize...</a></li>
+ </ul>
+ </li>
+</ul>
+
+<!--
+<table id="movies" class="ui-widget">
+ <thead>
+ <tr>
+ <th data-field="Name" class="ui-widget-header">Name</th>
+ <th data-field="ReleaseYear" class="ui-widget-header">Release Year</th>
+ <th data-field="AverageRating" class="ui-widget-header">Average Rating</th>
+ <th class="ui-widget-header"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td>
+ <td class="ui-widget-content">1993</td>
+ <td class="ui-widget-content">3.6</td>
+ <td class="ui-widget-content">
+ <ul class="menubar">
+ <li>
+ <a href="#">Options</a>
+ <ul>
+ <li><a href="#">Order...</a></li>
+ <li class="ui-state-disabled">Write a Review...</li>
+ <li><a href="#">Find Similar Movies...</a></li>
+ <li>
+ <a href="#">Rate</a>
+ <ul>
+ <li><a href="#">5 stars</a></li>
+ <li><a href="#">4 stars</a></li>
+ <li><a href="#">3 stars</a></li>
+ <li><a href="#">2 stars</a></li>
+ <li><a href="#">1 stars</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
+ <td class="ui-widget-content">1991</td>
+ <td class="ui-widget-content">3.1</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
+ <td class="ui-widget-content">1991</td>
+ <td class="ui-widget-content">3.9</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">Spike and Mike's Sick &amp; Twisted Festival of Animation</td>
+ <td class="ui-widget-content">1997</td>
+ <td class="ui-widget-content">2.6</td>
+ </tr>
+ </tbody>
+</table>
+-->
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+ Log:
+ <div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+</div>
+
+<div class="demo-description">
+
+<p>TODO</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
diff --git a/demos/menubar/index.html b/demos/menubar/index.html
new file mode 100644
index 000000000..3eebda2d0
--- /dev/null
+++ b/demos/menubar/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Menubar Demos</title>
+ <link href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+ <div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+ </ul>
+ </div>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-19 17:51:53 +0000