diff options
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/popup/animation.html | 84 | ||||
| -rw-r--r-- | demos/popup/default.html | 12 | ||||
| -rw-r--r-- | demos/popup/index.html | 1 | ||||
| -rw-r--r-- | demos/position/default.html | 15 | ||||
| -rw-r--r-- | demos/spinner/latlong.html | 9 |
5 files changed, 101 insertions, 20 deletions
diff --git a/demos/popup/animation.html b/demos/popup/animation.html new file mode 100644 index 000000000..d14a12cd7 --- /dev/null +++ b/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.6.2.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/demos/popup/default.html b/demos/popup/default.html index 97fc01fb2..26c4d19a0 100644 --- a/demos/popup/default.html +++ b/demos/popup/default.html @@ -9,7 +9,6 @@ <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() { @@ -28,17 +27,6 @@ </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; diff --git a/demos/popup/index.html b/demos/popup/index.html index e69365c98..961585268 100644 --- a/demos/popup/index.html +++ b/demos/popup/index.html @@ -10,6 +10,7 @@ <h4>Examples</h4> <ul> <li class="demo-config-on"><a href="default.html">Default functionality</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> diff --git a/demos/position/default.html b/demos/position/default.html index f7cba888d..f5caf3bc1 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -14,6 +14,7 @@ <style> #parent { width: 60%; + height: 40px; margin: 10px auto; padding: 5px; border: 1px solid #777; @@ -21,8 +22,6 @@ text-align: center; } .positionable { - width: 75px; - height: 75px; position: absolute; display: block; right: 0; @@ -30,6 +29,14 @@ background-color: #bcd5e6; text-align: center; } + #positionable1 { + width: 75px; + height: 75px; + } + #positionable2 { + width: 120px; + height: 40px; + } .ui-flipped-top { border-top: 3px solid #000000; } @@ -93,13 +100,13 @@ </p> </div> -<div class="positionable"> +<div class="positionable" id="positionable1"> <p> to position </p> </div> -<div class="positionable" style="width:120px; height: 40px;"> +<div class="positionable" id="positionable2"> <p> to position 2 </p> diff --git a/demos/spinner/latlong.html b/demos/spinner/latlong.html index d1dc612b4..149d16103 100644 --- a/demos/spinner/latlong.html +++ b/demos/spinner/latlong.html @@ -21,8 +21,9 @@ map.setCenter( latlong() ); } $( "#lat, #lng" ).spinner({ - precision: 6, - change: position + step: .001, + change: position, + stop: position }); var map = new google.maps.Map( $("#map")[0], { @@ -44,10 +45,10 @@ <div class="demo"> <label for="lat">Latitude</label> -<input id="lat" name="lat" value="44.797916"> +<input id="lat" name="lat" value="44.797"> <br> <label for="lng">Longitude</label> -<input id="lng" name="lng" value="-93.278046"> +<input id="lng" name="lng" value="-93.278"> <div id="map"></div> |