aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorFelix Nagel <info@felixnagel.com>2011-09-24 19:49:22 +0200
committerFelix Nagel <info@felixnagel.com>2011-09-24 19:49:22 +0200
commit55184e1e077a4a39292b9985f47aa2abc1c32702 (patch)
treeb123c4584692e40a4be6526b8000aa537c92ee37 /demos
parent17c8ec587dbf41079cf833d22983ebe1d6d16094 (diff)
parentcf3e655be19c6a64d21c494a2adbba6526cb6e86 (diff)
downloadjquery-ui-55184e1e077a4a39292b9985f47aa2abc1c32702.tar.gz
jquery-ui-55184e1e077a4a39292b9985f47aa2abc1c32702.zip
Merge branch 'master' of github.com:jquery/jquery-ui into selectmenu
Diffstat (limited to 'demos')
-rw-r--r--demos/popup/animation.html84
-rw-r--r--demos/popup/default.html12
-rw-r--r--demos/popup/index.html1
-rw-r--r--demos/position/default.html15
-rw-r--r--demos/spinner/latlong.html9
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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-13 13:51:53 +0000