web/static/css/jq-css/demos/position/default.html
author veltr
Wed, 23 May 2012 18:16:27 +0200
changeset 66 37492d1ce841
parent 30 81d408373dde
permissions -rw-r--r--
Added clustering
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
30
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
<!DOCTYPE html>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
<html lang="en">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
<head>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
	<meta charset="UTF-8" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
	<title>jQuery UI Position - Default functionality</title>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
	<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
	<link type="text/css" href="../demos.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
	<style type="text/css">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
	div#parent {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
		width: 60%;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
		margin: 10px auto;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
		padding: 5px;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
		
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
		border: 1px solid #777;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
		background-color: #fbca93;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
		text-align: center;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
	}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
	div.positionable {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
		width: 75px;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
		height: 75px;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
		position: absolute;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
		display: block;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
		right: 0;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
		bottom: 0;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
		background-color: #bcd5e6;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
		text-align: center;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
	}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
	select, input {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
		margin-left: 15px;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
	}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
	</style>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
	<script type="text/javascript">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
	$(function() {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
		
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
		function position(using) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
			$('.positionable').position({
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
				of: $('#parent'),
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
				my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
				at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(),
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
				offset: $('#offset').val(),
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
				using: using,
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
				collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val()
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
			});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
		}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
		
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
		$('.positionable').css("opacity", 0.5);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
		
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
		$(':input').bind('click keyup change', function() { position(); });
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
		
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
		$("#parent").draggable({
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
			drag: function() { position(); }
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
		});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
		
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
		$('.positionable').draggable({
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
			drag: function(event, ui) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
				// reset offset before calculating it
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
				$("#offset").val("0");
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
				position(function(result) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
					$("#offset").val("" + (ui.offset.left - result.left) + " " + (ui.offset.top - result.top));
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
					position();
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
				});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
			}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
		});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
		
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
		position();
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
	});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
	</script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
	
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
</head>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
<body>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
<div class="demo">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
<div id="parent">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
	<p>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
	This is the position parent element.
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
	</p>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
</div>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    89
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    90
<div class="positionable">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    91
	<p>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
	to position
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
	</p>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
</div>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    95
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
<div class="positionable" style="width:120px; height: 40px;">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    97
	<p>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
	to position 2
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
	</p>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
</div>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
<div style="padding: 20px; margin-top: 75px;">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
	position...
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
	<div style="padding-bottom: 20px;">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   105
		<b>my:</b>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   106
		<select id="my_horizontal">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   107
			<option value="left">left</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   108
			<option value="center">center</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   109
			<option value="right">right</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   110
		</select> 
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   111
		<select id="my_vertical">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   112
			<option value="top">top</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   113
			<option value="middle">center</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   114
			<option value="bottom">bottom</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   115
		</select>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   116
	</div>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   117
	<div style="padding-bottom: 20px;">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   118
		<b>at:</b>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   119
		<select id="at_horizontal">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   120
			<option value="left">left</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   121
			<option value="center">center</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   122
			<option value="right">right</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   123
		</select>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   124
		<select id="at_vertical">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   125
			<option value="top">top</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   126
			<option value="middle">center</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   127
			<option value="bottom">bottom</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   128
		</select>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   129
	</div>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   130
	<div style="padding-bottom: 20px;">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   131
		<b>offset:</b>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   132
		<input id="offset" type="text" size="15"/>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   133
	</div>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   134
	<div style="padding-bottom: 20px;">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   135
		<b>collision:</b>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   136
		<select id="collision_horizontal">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   137
			<option value="flip">flip</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   138
			<option value="fit">fit</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   139
			<option value="none">none</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   140
		</select>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   141
		<select id="collision_vertical">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   142
			<option value="flip">flip</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   143
			<option value="fit">fit</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   144
			<option value="none">none</option>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   145
		</select>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   146
	</div>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   147
</div>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   148
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   149
</div><!-- End demo -->
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   150
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   151
<div class="demo-description">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   152
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   153
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   154
<br/>Drag around the parent element to see collision detection in action.</p>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   155
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   156
</div><!-- End demo-description -->
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   157
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   158
</body>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset
   159
</html>