diff options
Diffstat (limited to 'src/main/webapp/jquery-ui-1.9pre/demos/popup')
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 & 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> |