r2710 - + Adding demo pages for positionTo.
Author: vtGavin
Date: Thu Jun 11 14:37:55 2009
New Revision: 2710
Added:
branches/dev/positionTo/demos/positionTo/
branches/dev/positionTo/demos/positionTo/default.html
branches/dev/positionTo/demos/positionTo/index.html
Modified:
branches/dev/positionTo/demos/index.html
branches/dev/positionTo/ui/utils.positionTo.js
Log:
+ Adding demo pages for positionTo.
Modified: branches/dev/positionTo/demos/index.html
==============================================================================
--- branches/dev/positionTo/demos/index.html (original)
+++ branches/dev/positionTo/demos/index.html Thu Jun 11 14:37:55 2009
@@ -32,6 +32,7 @@
<script type="text/javascript" src="../ui/effects.shake.js"></script>
<script type="text/javascript" src="../ui/effects.slide.js"></script>
<script type="text/javascript" src="../ui/effects.transfer.js"></script>
+ <script type="text/javascript"
src="../ui/utils.positionTo.js"></script>
<script type="text/javascript"
src="../ui/i18n/ui.datepicker-ar.js"></script>
<script type="text/javascript"
src="../ui/i18n/ui.datepicker-az.js"></script>
<script type="text/javascript"
src="../ui/i18n/ui.datepicker-bg.js"></script>
@@ -262,6 +263,8 @@
<dd><a href="toggle/index.html">Toggle</a></dd>
<dd><a href="animate/index.html">Animate</a></dd>
<dd><a href="effect/index.html">Effect</a></dd>
+ <dt>Utilities</dt>
+ <dd><a href="positionTo/index.html">Position
To</a></dd>
<dt>About jQuery UI</dt>
<dd><a href="http://jqueryui.com/docs/Getting_Started">Getting
Started</a></dd>
<dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade
Guide</a></dd>
Added: branches/dev/positionTo/demos/positionTo/default.html
==============================================================================
--- (empty file)
+++ branches/dev/positionTo/demos/positionTo/default.html Thu Jun 11
14:37:55 2009
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI PositionTo - 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/utils.positionTo.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+
+ <style type="text/css">
+ div#positionTo_parent
+ {
+ width: 60%;
+ margin: 10px auto;
+ padding: 5px;
+
+ border: 1px solid #777;
+ background-color: #fbca93;
+ text-align: center;
+ }
+
+ div#positionTo_positionable
+ {
+ width: 75px;
+ height: 75px;
+ display: block;
+ position: fixed;
+ right: 0;
+ bottom: 0;
+
+ background-color: #e2edf4;
+ text-align: center;
+ }
+ </style>
+
+ <script type="text/javascript">
+ $(function() {
+ $('div#positionTo_positionable').positionTo(
+ $('div#positionTo_parent')[0],
+ {}
+ );
+ });
+ </script>
+
+</head>
+<body>
+
+<div class="demo">
+
+<div id="positionTo_parent">
+
+ This is the positionTo parent element. Whee!
+
+</div>
+
+<div id="positionTo_positionable">
+
+ whee!
+
+</div>
+
+<!-- Sample page content -->
+<div class="hiddenInViewSource" style="padding:20px;">
+Sed vel diam id libero <a href="http://example.com">rutrum
convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus
ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies
neque, sit amet auctor elit eros a lectus.
+<form>
+ <input value="text input" /><br />
+ <input type="checkbox" />checkbox<br />
+ <input type="radio" />radio<br />
+ <select>
+ <option>select</option>
+ </select><br /><br />
+ <textarea>textarea</textarea><br />
+</form>
+</div>
+<!-- End sample page content -->
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+
+ !!! positionTo description here !!!
+
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Added: branches/dev/positionTo/demos/positionTo/index.html
==============================================================================
--- (empty file)
+++ branches/dev/positionTo/demos/positionTo/index.html Thu Jun 11 14:37:55
2009
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI PositionTo 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>
+ </ul>
+</div>
+
+</body>
+</html>
Modified: branches/dev/positionTo/ui/utils.positionTo.js
==============================================================================
--- branches/dev/positionTo/ui/utils.positionTo.js (original)
+++ branches/dev/positionTo/ui/utils.positionTo.js Thu Jun 11 14:37:55 2009
@@ -10,14 +10,39 @@
* Depends:
* ui.core.js
*/
-$.fn.positionAround = function(event, o) {
-
- var options = $.extend({
+$.fn.positionTo = function(parentElem, options)
+{
+ var $parentElem = $(parentElem),
+ parentOffset = $parentElem.offset();
+
+ // calculate parent element coordinates and pad accordingly for any
border styling
+ var parentElem_coords = {
+ left: parentOffset.left -
parseInt($parentElem.css('border-left-width').replace(/px/, '')),
+ right: parentOffset.left + $parentElem.width() +
parseInt($parentElem.css('border-right-width').replace(/px/, '')),
+ top: parentOffset.top -
parseInt($parentElem.css('border-top-width').replace(/px/, '')),
+ bottom: parentOffset.top + $parentElem.height() +
parseInt($parentElem.css('border-bottom-width').replace(/px/, ''))
+ };
+
+ // pad the parent boundaries depending on whether any borders have
been applied
+ /*parentElem_coords = $.extend({
+ left:
+ }, parentElem_coords);*/
+
+ // prep this element for being positioned
+ this.css('display', 'block')
+ .css('position', 'fixed')
+ .css('margin', '0');
+
+ this.css('left', parentElem_coords.right + 'px')
+ .css('top', parentElem_coords.top + 'px');
+
+ /**
+ var _options = $.extend({
around: 'mouse',
direction: 'default',
forceDirection: false,
offset: [0, 0]
- }, o);
+ }, options);
var leftOffset = 0,
topOffset = 0,
@@ -81,6 +106,5 @@
top: event.pageY - opOffset.top - opBorderTop + topOffset +
options.offset[1]
});
- }
-
+ }*/
};