aboutsummaryrefslogtreecommitdiffstats
path: root/demos/position
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2009-07-24 18:24:13 +0000
committerScott González <scott.gonzalez@gmail.com>2009-07-24 18:24:13 +0000
commiteff793d014dfaeb4e601dbd97cf7b33352b05ce5 (patch)
tree9b3bed79e91895f21b2ccab876a973850544b541 /demos/position
parentbfca009321a9be73c7b4fa042f0cfe5fd39ca8a4 (diff)
downloadjquery-ui-eff793d014dfaeb4e601dbd97cf7b33352b05ce5.tar.gz
jquery-ui-eff793d014dfaeb4e601dbd97cf7b33352b05ce5.zip
Copied position plugin from /branches/dev/positionTo r2971.
Diffstat (limited to 'demos/position')
-rw-r--r--demos/position/cycler.html124
-rw-r--r--demos/position/default.html158
-rw-r--r--demos/position/images/earth.jpgbin0 -> 35007 bytes
-rw-r--r--demos/position/images/flight.jpgbin0 -> 35234 bytes
-rw-r--r--demos/position/images/rocket.jpgbin0 -> 51070 bytes
-rw-r--r--demos/position/index.html18
6 files changed, 300 insertions, 0 deletions
diff --git a/demos/position/cycler.html b/demos/position/cycler.html
new file mode 100644
index 000000000..9bf90d9cc
--- /dev/null
+++ b/demos/position/cycler.html
@@ -0,0 +1,124 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Position - Default functionality</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.position.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+
+ <style type="text/css">
+ html, body {
+ margin: 0;
+ padding: 0
+ }
+ </style>
+
+ <script type="text/javascript">
+ $(function() {
+
+ $.fn.position2 = function(options) {
+ return this.position($.extend({
+ of: window,
+ by: function(to) {
+ $(this).css({
+ top: to.top,
+ left: to.left
+ })
+ },
+ collision: "none"
+ }, options));
+ }
+
+ $.fn.left = function(by) {
+ return this.position2({
+ my: "right middle",
+ at: "left middle",
+ offset: "25 0",
+ by: by
+ });
+ }
+ $.fn.right = function(by) {
+ return this.position2({
+ my: "left middle",
+ at: "right middle",
+ offset: "-25 0",
+ by: by
+ });
+ }
+ $.fn.center = function(by) {
+ return this.position2({
+ my: "center middle",
+ at: "center middle",
+ by: by
+ });
+ };
+
+ $("img:eq(0)").left();
+ $("img:eq(1)").center();
+ $("img:eq(2)").right();
+
+ $("body").css({
+ overflow: "hidden"
+ })
+ $(".demo").css({
+ position: "relative",
+ });
+ $(".demo img").css({
+ position: "absolute",
+ });
+
+ function animate(to) {
+ $(this).animate(to);
+ }
+ function next() {
+ $("img:eq(2)").center(animate);
+ $("img:eq(1)").left(animate)
+ $("img:eq(0)").right().appendTo(".demo");
+ }
+ function previous() {
+ $("img:eq(0)").center(animate);
+ $("img:eq(1)").right(animate);
+ $("img:eq(2)").left().prependTo(".demo");
+ }
+ $("#previous").click(previous);
+ $("#next").click(next);
+
+ $(".demo img").click(function() {
+ $(".demo img").index(this) == 0 ? previous() : next();
+ });
+
+ $(window).resize(function() {
+ $("img:eq(0)").left(animate);
+ $("img:eq(1)").center(animate);
+ $("img:eq(2)").right(animate);
+ })
+ });
+ </script>
+
+</head>
+<body>
+
+<div class="demo">
+
+ <img src="images/earth.jpg" />
+ <img src="images/flight.jpg" />
+ <img src="images/rocket.jpg" />
+
+ <a id="previous" href="#">Previous</a>
+ <a id="next" href="#">Next</a>
+</div>
+
+<div class="demo-description">
+
+<p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them.
+<br/>Use the links at the top to cycle, or click on the images on the left and right.
+<br/>Note how the images are repositioned when resizing the window.
+<br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/position/default.html b/demos/position/default.html
new file mode 100644
index 000000000..ff378cd0e
--- /dev/null
+++ b/demos/position/default.html
@@ -0,0 +1,158 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Position - Default functionality</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.position.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+
+ <style type="text/css">
+ div#parent
+ {
+ width: 60%;
+ margin: 10px auto;
+ padding: 5px;
+
+ border: 1px solid #777;
+ background-color: #fbca93;
+ text-align: center;
+ }
+
+ div.positionable
+ {
+ width: 75px;
+ height: 75px;
+ display: block;
+ position: fixed;
+ right: 0;
+ bottom: 0;
+
+ background-color: #bcd5e6;
+ text-align: center;
+ }
+
+ select, input
+ {
+ margin-left: 15px;
+ }
+ </style>
+
+ <script type="text/javascript">
+ $(function() {
+
+ function position(by) {
+ $('.positionable').position({
+ of: $('#parent'),
+ my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
+ at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(),
+ offset: $('#offset').val(),
+ by: by,
+ collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val()
+ });
+ }
+
+ $('.positionable').css("opacity", 0.5);
+
+ $(':input').bind('click keyup change', position);
+
+ $("#parent").draggable({
+ drag: position
+ });
+
+ $('.positionable').draggable({
+ drag: function(event, ui) {
+ // reset offset before calculating it
+ $("#offset").val("0");
+ position(function(result) {
+ $("#offset").val("" + (ui.offset.left - result.left) + " " + (ui.offset.top - result.top));
+ position();
+ });
+ }
+ });
+
+ position();
+ });
+ </script>
+
+</head>
+<body>
+
+<div class="demo">
+
+<div id="parent">
+ <p>
+ This is the position parent element.
+ </p>
+</div>
+
+<div class="positionable">
+ <p>
+ to position
+ </p>
+</div>
+
+<div class="positionable" style="width:120px; height: 40px;">
+ <p>
+ to position 2
+ </p>
+</div>
+
+<div style="padding: 20px; margin-top: 75px;">
+ position...
+ <div style="padding-bottom: 20px;">
+ <b>my:</b>
+ <select id="my_horizontal">
+ <option value="left">left</option>
+ <option value="center">center</option>
+ <option value="right">right</option>
+ </select>
+ <select id="my_vertical">
+ <option value="top">top</option>
+ <option value="middle">center</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </div>
+ <div style="padding-bottom: 20px;">
+ <b>at:</b>
+ <select id="at_horizontal">
+ <option value="left">left</option>
+ <option value="center">center</option>
+ <option value="right">right</option>
+ </select>
+ <select id="at_vertical">
+ <option value="top">top</option>
+ <option value="middle">center</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </div>
+ <div style="padding-bottom: 20px;">
+ <b>offset:</b>
+ <input id="offset" type="text" size="15"/>
+ </div>
+ <div style="padding-bottom: 20px;">
+ <b>collision:</b>
+ <select id="collision_horizontal">
+ <option value="flip">flip</option>
+ <option value="fit">fit</option>
+ <option value="none">none</option>
+ </select>
+ <select id="collision_vertical">
+ <option value="flip">flip</option>
+ <option value="fit">fit</option>
+ <option value="none">none</option>
+ </select>
+ </div>
+</div>
+
+<div class="demo-description">
+
+<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
+<br/>Drag around the parent element to see collision detection in action.</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/position/images/earth.jpg b/demos/position/images/earth.jpg
new file mode 100644
index 000000000..87ea48803
--- /dev/null
+++ b/demos/position/images/earth.jpg
Binary files differ
diff --git a/demos/position/images/flight.jpg b/demos/position/images/flight.jpg
new file mode 100644
index 000000000..9721986c0
--- /dev/null
+++ b/demos/position/images/flight.jpg
Binary files differ
diff --git a/demos/position/images/rocket.jpg b/demos/position/images/rocket.jpg
new file mode 100644
index 000000000..d3bff6123
--- /dev/null
+++ b/demos/position/images/rocket.jpg
Binary files differ
diff --git a/demos/position/index.html b/demos/position/index.html
new file mode 100644
index 000000000..1d7ae3255
--- /dev/null
+++ b/demos/position/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Position Demo</title>
+ <link type="text/css" 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="cycler.html">Cycling images</a></li>
+ </ul>
+</div>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-05 21:06:04 +0000