r2865 - positionTo: default demo update to include dragging of parent and positioned; any form ch...
Author: joern.zaefferer
Date: Sun Jul 5 10:05:59 2009
New Revision: 2865
Modified:
branches/dev/positionTo/demos/positionTo/default.html
Log:
positionTo: default demo update to include dragging of parent and
positioned; any form changes apply immediately instead of a submit button
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:05:59 2009
@@ -5,6 +5,7 @@
<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.positionTo.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
@@ -41,21 +42,45 @@
<script type="text/javascript">
$(function() {
- $('input#positionTo_button').bind('click', function(){
+
+ function position(event, by) {
var positionableAnchor =
- $('select#positionTo_positionableAnchor_horizontal
option:selected').val() + ' '
- + $('select#positionTo_positionableAnchor_vertical
option:selected').val();
+ $('#positionTo_positionableAnchor_horizontal').val() + ' '
+ + $('#positionTo_positionableAnchor_vertical').val();
var targetAnchor =
- $('select#positionTo_targetAnchor_horizontal
option:selected').val() + ' '
- + $('select#positionTo_targetAnchor_vertical
option:selected').val();
+ $('#positionTo_targetAnchor_horizontal').val() + ' '
+ + $('#positionTo_targetAnchor_vertical').val();
- $('div.positionTo_positionable').positionTo({
- of: $('div#positionTo_parent')[0],
+ $('.positionTo_positionable').css("opacity", 0.5).positionTo({
+ of: $('#positionTo_parent')[0],
my: positionableAnchor,
at: targetAnchor,
- offset: $('input#positionTo_offset').val()
+ offset: $('#positionTo_offset').val(),
+ by: by
});
- });
+ }
+
+ $(':input').bind('click keyup change', position);
+
+ $("#positionTo_parent").draggable({
+ drag: function() {
+ position();
+ }
+ });
+
+ $('.positionTo_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));
+ position();
+ })
+ }
+ });
+
+ position();
});
</script>
@@ -76,15 +101,16 @@
</div>
-<div class="positionTo_positionable" style="right: 100px;">
+<div class="positionTo_positionable" style="width:90px; height: 60px;">
to position 2
</div>
<div style="padding: 20px; margin-top: 75px;">
+ position...
<div style="padding-bottom: 20px;">
- <b>positionable anchor:</b>
+ <b>my:</b>
<select id="positionTo_positionableAnchor_horizontal">
<option value="left">left</option>
<option value="center">center</option>
@@ -97,7 +123,7 @@
</select>
</div>
<div style="padding-bottom: 20px;">
- <b>target anchor:</b>
+ <b>at:</b>
<select id="positionTo_targetAnchor_horizontal">
<option value="left">left</option>
<option value="center">center</option>
@@ -113,11 +139,14 @@
<b>offset:</b>
<input id="positionTo_offset" type="text" size="15"/>
</div>
- <div>
- <input id="positionTo_button" type="button" value="Position"
- style="margin-right: 25px;"/>
- </div>
</div>
+
+<div class="demo-description">
+
+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.
+
+</div><!-- End demo-description -->
</body>
</html>