summaryrefslogtreecommitdiff
path: root/src/main/webapp/jquery-ui-1.9pre/demos/popup
diff options
context:
space:
mode:
authorLeif Johansson <leifj@sunet.se>2011-11-25 21:18:19 +0100
committerLeif Johansson <leifj@sunet.se>2011-11-25 21:18:19 +0100
commit3909e6d89e01e4cd8777377c63037896bb95aa2f (patch)
tree59679df287c2bee55087fb5afb8d42e7f93a44fb /src/main/webapp/jquery-ui-1.9pre/demos/popup
parente5f94e9be5017f627c1ccd8c6306c5cc2e200432 (diff)
new jq layout
Diffstat (limited to 'src/main/webapp/jquery-ui-1.9pre/demos/popup')
-rw-r--r--src/main/webapp/jquery-ui-1.9pre/demos/popup/animation.html84
-rw-r--r--src/main/webapp/jquery-ui-1.9pre/demos/popup/default.html69
-rw-r--r--src/main/webapp/jquery-ui-1.9pre/demos/popup/index.html20
-rw-r--r--src/main/webapp/jquery-ui-1.9pre/demos/popup/popup-menu-table.html108
-rw-r--r--src/main/webapp/jquery-ui-1.9pre/demos/popup/popup-menu.html92
-rw-r--r--src/main/webapp/jquery-ui-1.9pre/demos/popup/tooltip.html61
6 files changed, 434 insertions, 0 deletions
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/popup/animation.html b/src/main/webapp/jquery-ui-1.9pre/demos/popup/animation.html
new file mode 100644
index 0000000..7df89d3
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/popup/animation.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery UI Popup - Animation 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.7.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.effects.core.js"></script>
+ <script src="../../ui/jquery.effects.blind.js"></script>
+ <script src="../../ui/jquery.effects.scale.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({
+ show: {
+ effect: "blind",
+ direction: "up",
+ mode: "show",
+ duration: "fast"
+ },
+ hide: {
+ effect: "scale",
+ percent: 0,
+ duration: "fast"
+ }
+ })
+ .find(":submit").button().click(function(event) {
+ event.preventDefault();
+ });
+ });
+ </script>
+ <style type="text/css">
+ .ui-popup { position: absolute; z-index: 5000; }
+
+ #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 class="ui-widget-content" id="login-form" aria-label="Login options">
+ <div>
+ <label for="un">Username</label>
+ <input type="text" id="un" />
+ </div>
+ <div>
+ <label for="pw">Password</label>
+ <input type="password" id="pw" />
+ </div>
+ <div>
+ <input type="submit" value="Login" class="submit" />
+ </div>
+ </div>
+</div>
+
+<div class="demo-description">
+
+<p>A link to a login form that opens as a popup. Open and close animations have been used.</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/popup/default.html b/src/main/webapp/jquery-ui-1.9pre/demos/popup/default.html
new file mode 100644
index 0000000..f0ff9a5
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/popup/default.html
@@ -0,0 +1,69 @@
+<!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.7.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.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; }
+
+ #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 class="ui-widget-content" id="login-form" aria-label="Login options">
+ <div>
+ <label for="un">Username</label>
+ <input type="text" id="un" />
+ </div>
+ <div>
+ <label for="pw">Password</label>
+ <input type="password" id="pw" />
+ </div>
+ <div>
+ <input type="submit" value="Login" class="submit" />
+ </div>
+ </div>
+</div>
+
+<div class="demo-description">
+
+<p>A link to a login form that opens as a popup.</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/popup/index.html b/src/main/webapp/jquery-ui-1.9pre/demos/popup/index.html
new file mode 100644
index 0000000..6363624
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/popup/index.html
@@ -0,0 +1,20 @@
+<!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="tooltip.html">Popup on hover (tooltip)</a></li>
+ <li><a href="animation.html">Popup - show/hide effects</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/src/main/webapp/jquery-ui-1.9pre/demos/popup/popup-menu-table.html b/src/main/webapp/jquery-ui-1.9pre/demos/popup/popup-menu-table.html
new file mode 100644
index 0000000..c79c305
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/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.7.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/src/main/webapp/jquery-ui-1.9pre/demos/popup/popup-menu.html b/src/main/webapp/jquery-ui-1.9pre/demos/popup/popup-menu.html
new file mode 100644
index 0000000..89d17c0
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/popup/popup-menu.html
@@ -0,0 +1,92 @@
+<!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.7.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 = function( event, ui ) {
+ log( "Selected: " + ui.item.text() );
+ $(this).popup( "close" );
+ }
+
+ $("#button1").button().next().menu( {select: selected, trigger: $("#button1")} );
+
+ $( "#rerun" )
+ .button()
+ .click(function() {
+ log( "Selected: " + $( this ).text() );
+ })
+ .next()
+ .button({
+ text: false,
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ }
+ })
+ .next()
+ .menu( {select: selected, 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>
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/popup/tooltip.html b/src/main/webapp/jquery-ui-1.9pre/demos/popup/tooltip.html
new file mode 100644
index 0000000..c955a3c
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/popup/tooltip.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery UI Popup - Tooltip style 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.7.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.popup.js"></script>
+ <script>
+ $(function() {
+ $("#more-info").popup({
+ position: {
+ of: "#info-link"
+ }
+ });
+
+ $( "#info-link" ).mouseover( function( event ) {
+ $("#more-info").popup( "open" );
+ });
+ });
+ </script>
+ <style type="text/css">
+ .ui-icon {
+ display: inline-block;
+ }
+ #more-info {
+ width: 11em;
+ 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;
+ position: absolute;
+ z-index: 5000;
+ display: none;
+ }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+ <div>
+ <textarea>More info about me to the right -></textarea> <span id="info-link" class="ui-icon ui-icon-info"></span>
+ <div id="more-info">This is some more info and there is even more info on <a href="#">this page</a>.</div>
+ </div>
+</div>
+
+<div class="demo-description">
+
+<p>A "more info" popup that works on mouseover (tooltip).</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
generated by cgit v1.1 at 2024-10-17 00:32:07 +0000