aboutsummaryrefslogtreecommitdiffstats
path: root/demos/popup
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/popup
parent24c0d9195a3ae84bf6fe4698926fafafa55b2bdf (diff)
downloadjquery-ui-e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054.tar.gz
jquery-ui-e6d1ab7bf40e7ecaaaea0d53407dc98a416cc054.zip
Popup and Menubar demos
Diffstat (limited to 'demos/popup')
-rw-r--r--demos/popup/default.html83
-rw-r--r--demos/popup/index.html18
-rw-r--r--demos/popup/popup-menu-table.html108
-rw-r--r--demos/popup/popup-menu.html98
4 files changed, 307 insertions, 0 deletions
diff --git a/demos/popup/default.html b/demos/popup/default.html
new file mode 100644
index 000000000..71b3c8dd2
--- /dev/null
+++ b/demos/popup/default.html
@@ -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>
diff --git a/demos/popup/index.html b/demos/popup/index.html
new file mode 100644
index 000000000..e69365c98
--- /dev/null
+++ b/demos/popup/index.html
@@ -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>
diff --git a/demos/popup/popup-menu-table.html b/demos/popup/popup-menu-table.html
new file mode 100644
index 000000000..a06a38434
--- /dev/null
+++ b/demos/popup/popup-menu-table.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery UI Popup - Menu as Popup in table 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");
+ }
+ };
+
+ $(".demo td:has(.menubar)").clone().appendTo(".demo tbody tr:not(:first)");
+ $("table .menubar > ul").menu(selected).popup().prev().button();
+ });
+ </script>
+ <style type="text/css">
+ .ui-popup { position: absolute; z-index: 5000; }
+ .ui-menu { width: 200px; }
+
+ .demo table {
+ border-collapse: collapse;
+ }
+ .demo th, .demo td {
+ padding: 0.5em;
+ }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <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">
+ <div class="menubar">
+ <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>
+ </div>
+ </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 id="log"></div>
+</div>
+
+
+<div class="demo-description">
+
+<p>Poup menu in a table. Works okay standalone, not so much in the scrolling demo view. For that to work better, position() would have to take the closest scrolled parent into account for collision detection.</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
diff --git a/demos/popup/popup-menu.html b/demos/popup/popup-menu.html
new file mode 100644
index 000000000..7152d85bc
--- /dev/null
+++ b/demos/popup/popup-menu.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery UI Popup - Popup Menu</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() {
+ function log( msg ) {
+ $( "<div/>" ).text( msg ).appendTo( "#log" );
+ }
+ var selected = {
+ select: function( event, ui ) {
+ log( "Selected: " + ui.item.text() );
+ $(this).popup("close");
+ }
+ };
+
+ $("#button1").button()
+ .next().menu(selected).popup();
+
+ $( "#rerun" )
+ .button()
+ .click(function() {
+ log( "Selected: " + $( this ).text() );
+ })
+ .next()
+ .button({
+ text: false,
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ }
+ })
+ .next()
+ .menu(selected)
+ .popup({
+ trigger: $("#select")
+ })
+ .parent()
+ .buttonset({
+ items: "button"
+ });
+ });
+ </script>
+ <style type="text/css">
+ .ui-popup { position: absolute; z-index: 5000; }
+ .ui-menu { width: 200px; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <button id="button1">Show context menu 1</button>
+ <ul>
+ <li><a href="#">Amsterdam</a></li>
+ <li><a href="#">Anaheim</a></li>
+ <li><a href="#">Cologne</a></li>
+ <li><a href="#">Frankfurt</a></li>
+ <li><a href="#">Magdeburg</a></li>
+ <li><a href="#">Munich</a></li>
+ <li><a href="#">Utrecht</a></li>
+ <li><a href="#">Zurich</a></li>
+ </ul>
+
+
+ <div>
+ <div>
+ <button id="rerun">Run last action</button>
+ <button id="select">Select an action</button>
+ <ul>
+ <li><a href="#">Open...</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Delete</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div id="log"></div>
+</div>
+
+
+<div class="demo-description">
+
+<p>Make the popup a menu (or the menu a popup) and you get context menus.</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-11 11:28:33 +0000