<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:v = "urn:schemas-microsoft-com:vml">
<head>
<link rel="stylesheet" type="text/css" href="../../jquery.toolkit.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.js" type="text/javascript"></script>
<script src="jquery.tk.position.js" type="text/javascript"></script>
<style>
body{ font-size:12px; text-align:left;}
#test-container{ width: 550px; background:#888; float:left;}
.testElmt,.testElmt2{ display:inline-block; zoom:1; width:50px;height:50px; background:#fff0e0;border:solid #bbf 10px;margin:25px;}
.testElmt2{ border:solid #fbb 5px;}
</style>
</head>
<body>
<h1>Demonstrating xcss plugin</h1>
<div class="tk-inlineStack" id="test-container">
<div class="testElmt" style="position:relative;margin:50px;float:right;">
<div id="positionable" class="tk-positionable-top-left testElmt2" style="opacity:.5">test position -able</div>
</div>
<div class="tk-inlineStack tk-border tk-corner">
<h3>positionable testing</h3>
<select id="_yRef" onchange="$('#yref').val($(this).val()).change();">
<option selected="selected">top</option>
<option>innerTop</option>
<option>middle</option>
<option>innerBottom</option>
<option>bottom</option>
</select>
<input type="text" id="yref" name="yref" value="top" onchange="$('#positionable').positionable('set_yRef',this.value);"/>
<br />
<select id="_xRef" onchange="$('#xref').val($(this).val()).change();">
<option selected="selected">left</option>
<option>innerLeft</option>
<option>center</option>
<option>innerRight</option>
<option>right</option>
</select>
<input type="text" id="xref" name="xref" value="left" onchange="$('#positionable').positionable('set_xRef',this.value);"/><br />
<label>
<input type="checkbox" onchange="$('#positionable').positionable('set_marginRef',$(this).is(':checked'))"/>
take margin into account
</label>
<br />
x: <input type="text" name="x" value="0" onchange="$('#positionable').positionable('set_x',this.value);"/>
<br />
y: <input type="text" name="y" value="0" onchange="$('#positionable').positionable('set_y',this.value);"/>
</div>
</div>
<script>
jQuery(function(){
$("#positionable").positionable();
});
</script>
</body>
</html>
|
Stumble It!
Bookmark in del.icio.us
Download
