r2866 - positionTo: further demo code refactoring
Author: joern.zaefferer
Date: Sun Jul 5 10:10:44 2009
New Revision: 2866
Modified:
branches/dev/positionTo/demos/positionTo/default.html
Log:
positionTo: further demo code refactoring
Modified: branches/dev/positionTo/demos/positionTo/default.html
==============================================================================
--- branches/dev/positionTo/demos/positionTo/default.html (original)
+++ branches/dev/positionTo/demos/positionTo/default.html Sun Jul 5
10:10:44 2009
@@ -10,7 +10,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- div#positionTo_parent
+ div#parent
{
width: 60%;
margin: 10px auto;
@@ -21,7 +21,7 @@
text-align: center;
}
- div.positionTo_positionable
+ div.positionable
{
width: 75px;
height: 75px;
@@ -43,40 +43,32 @@
<script type="text/javascript">
$(function() {
- function position(event, by) {
- var positionableAnchor =
- $('#positionTo_positionableAnchor_horizontal').val() + ' '
- + $('#positionTo_positionableAnchor_vertical').val();
- var targetAnchor =
- $('#positionTo_targetAnchor_horizontal').val() + ' '
- + $('#positionTo_targetAnchor_vertical').val();
-
- $('.positionTo_positionable').css("opacity", 0.5).positionTo({
- of: $('#positionTo_parent')[0],
- my: positionableAnchor,
- at: targetAnchor,
- offset: $('#positionTo_offset').val(),
- by: by
+ function position(by) {
+ $('.positionable').positionTo({
+ of: $('#parent'),
+ my: $('#my_horizontal').val() + ' ' +
$('#my_vertical').val(),
+ at: $('#at_horizontal').val() + ' '+
$('#at_vertical').val(),
+ offset: $('#offset').val(),
+ by: $.isFunction(by) && by
});
}
+ $('.positionable').css("opacity", 0.5);
+
$(':input').bind('click keyup change', position);
- $("#positionTo_parent").draggable({
- drag: function() {
- position();
- }
+ $("#parent").draggable({
+ drag: position
});
- $('.positionTo_positionable').draggable({
+ $('.positionable').draggable({
drag: function(event, ui) {
// reset offset before calculating it
- $("#positionTo_offset").val("0");
- position(event, function(result) {
- console.log(ui, result)
- $("#positionTo_offset").val("" + (ui.offset.left - result.left) + " "
+ (ui.offset.top - result.top));
+ $("#offset").val("0");
+ position(function(result) {
+ $("#offset").val("" + (ui.offset.left - result.left) + " " +
(ui.offset.top - result.top));
position();
- })
+ });
}
});
@@ -89,19 +81,19 @@
<div class="demo">
-<div id="positionTo_parent">
+<div id="parent">
This is the positionTo parent element.
</div>
-<div class="positionTo_positionable">
+<div class="positionable">
to position
</div>
-<div class="positionTo_positionable" style="width:90px; height: 60px;">
+<div class="positionable" style="width:90px; height: 60px;">
to position 2
@@ -111,12 +103,12 @@
position...
<div style="padding-bottom: 20px;">
<b>my:</b>
- <select id="positionTo_positionableAnchor_horizontal">
+ <select id="my_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
- <select id="positionTo_positionableAnchor_vertical">
+ <select id="my_vertical">
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
@@ -124,12 +116,12 @@
</div>
<div style="padding-bottom: 20px;">
<b>at:</b>
- <select id="positionTo_targetAnchor_horizontal">
+ <select id="at_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
- <select id="positionTo_targetAnchor_vertical">
+ <select id="at_vertical">
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
@@ -137,7 +129,7 @@
</div>
<div style="padding-bottom: 20px;">
<b>offset:</b>
- <input id="positionTo_offset" type="text" size="15"/>
+ <input id="offset" type="text" size="15"/>
</div>
</div>