Permalink
Browse files

Popup and Menubar demos

  • Loading branch information...
jzaefferer committed May 8, 2011
1 parent 24c0d91 commit e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054
View
@@ -129,8 +129,7 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
.normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; }
.normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; }
-.normal a:link,
-.normal a:visited { color:#1b75bb; text-decoration:none; }
+#demo-notes a, #demo-link a, #demo-source a { color:#1b75bb; text-decoration:none; }
.normal a:hover,
.normal a:active { color:#0b559b; }
View
@@ -20,6 +20,8 @@
<script src="../ui/jquery.ui.draggable.js"></script>
<script src="../ui/jquery.ui.droppable.js"></script>
<script src="../ui/jquery.ui.menu.js"></script>
+ <script src="../ui/jquery.ui.menubar.js"></script>
+ <script src="../ui/jquery.ui.popup.js"></script>
<script src="../ui/jquery.ui.position.js"></script>
<script src="../ui/jquery.ui.progressbar.js"></script>
<script src="../ui/jquery.ui.resizable.js"></script>
@@ -279,6 +281,8 @@
<dd><a href="datepicker/index.html">Datepicker</a></dd>
<dd><a href="dialog/index.html">Dialog</a></dd>
<dd><a href="menu/index.html">Menu</a></dd>
+ <dd><a href="menubar/index.html">Menubar</a></dd>
+ <dd><a href="popup/index.html">Popup</a></dd>
<dd><a href="progressbar/index.html">Progressbar</a></dd>
<dd><a href="slider/index.html">Slider</a></dd>
<dd><a href="spinner/index.html">Spinner</a></dd>
@@ -3,44 +3,28 @@
<head>
<meta charset="UTF-8" />
<title>jQuery UI Menu - Contextmenu demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script src="../../jquery-1.5.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.popup.js"></script>
+ <link href="../demos.css" rel="stylesheet" />
+ <script>
$(function() {
$(".demo button").button({
icons: {
primary: "ui-icon-home",
secondary: "ui-icon-triangle-1-s"
}
- }).each(function() {
- $(this).next().menu({
- select: function(event, ui) {
- $(this).hide();
- $("#log").append("<div>Selected " + ui.item.text() + "</div>");
- }
- }).hide();
- }).click(function(event) {
- var menu = $(this).next();
- if (menu.is(":visible")) {
- menu.hide();
- return false;
+ }).next().menu({
+ select: function(event, ui) {
+ $(this).hide();
+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");
}
- menu.menu("blur").show().position({
- my: "left top",
- at: "right top",
- of: this
- });
- $(document).one("click", function() {
- menu.hide();
- });
- return false;
- })
+ }).popup();
});
</script>
<style>
@@ -69,7 +53,7 @@
<div class="demo-description">
-<p>A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p>
+<p>TODO update - A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p>
<p>The keyboard handling is part of the menu. Using the input option to menu is configured to add the key event handlers to the button, as that button gets focused when clicked.</p>
View
@@ -4,12 +4,12 @@
<meta charset="UTF-8" />
<title>jQuery UI Menu - Default demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <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.menu.js"></script>
+ <link href="../demos.css" rel="stylesheet" />
+ <script>
$(function() {
$(".demo ul").menu();
});
View
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<title>jQuery UI Menu Demos</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link href="../demos.css" rel="stylesheet" />
</head>
<body>
<div class="demos-nav">
@@ -1,27 +1,18 @@
<!DOCTYPE html>
<html>
<head>
- <title>Menu Visual Test: Default</title>
- <link rel="stylesheet" href="../visual.css" type="text/css" />
- <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
- <script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.menubar.js"></script>
- <!--
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
- -->
- <script type="text/javascript">
+ <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() {
- $.fn.themeswitcher && $('<div/>').css({
- position: "absolute",
- right: 10,
- top: 10
- }).appendTo(document.body).themeswitcher();
-
$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
$("#bar1, .menubar").menubar({
@@ -40,7 +31,6 @@
});
</script>
<style type="text/css">
- body { font-size:62.5%; }
#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; }
@@ -64,18 +54,20 @@
.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>
@@ -168,6 +160,7 @@
</li>
</ul>
+<!--
<table id="movies" class="ui-widget">
<thead>
<tr>
@@ -222,11 +215,20 @@
</tr>
</tbody>
</table>
+-->
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Log:
- <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+ <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>
View
@@ -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>
View
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery UI Popup - Default demo</title>
+ <link rel="stylesheet" href="../demos.css" />
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.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.popup.js"></script>
+ <script>
+ $(function() {
+ var selected = {
+ select: function( event, ui ) {
+ $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
+ $(this).popup("close");
+ }
+ };
+
+ $("#login-form").popup()
+ .find(":submit").button().click(function(event) {
+ event.preventDefault();
+ });
+ });
+ </script>
+ <style type="text/css">
+ .ui-popup { position: absolute; z-index: 5000; }
+ .ui-menu { width: 200px; }
+
+ /*
+ table {
+ border-collapse: collapse;
+ }
+ th, td {
+ padding: 0.5em;
+ border: 1px solid black;
+ }
+ */
+
+ #login-form {
+ width: 16em; border: 1px solid gray; border-radius: 5px;
+ padding: 1em;
+ box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
+ background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
+ font-size: 1.3em; outline: none;
+ }
+ #login-form label { display: inline-block; width: 5em; }
+ #login-form .submit { margin-left: 5em; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+ <a href="#login-form">Log In</a>
+ <div id="login-form" class="ui-widget-content" tabIndex="0">
+ <form>
+ <div>
+ <label>Username</label>
+ <input type="username" />
+ </div>
+ <div>
+ <label>Password</label>
+ <input type="password" />
+ </div>
+ <div>
+ <input type="submit" class="submit" value="Login" />
+ </div>
+ </form>
+ </div>
+</div>
+
+<div class="demo-description">
+
+<p>A link to a login form that opens as a popup. [Not quite functional, focus handling needs to get better]</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
View
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Popup 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>
+ <li><a href="popup-menu.html">Menu's as popup</a></li>
+ <li><a href="popup-menu-table.html">Menu's as popup in a table</a></li>
+ </ul>
+ </div>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit e6d1ab7

Please sign in to comment.