<?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:center;}
#test-container{ width: 650px; height:650px; background:#888; float:left;margin-left:500px;}
.testElmt,.testElmt2{ display:inline-block; zoom:1; width:125px;height:125px; background:#fff0e0;border:solid #bbf 10px;margin:25px;
border-width:5px 10px 20px 30px;
background-image:url(cross.gif);
background-position:center center;
background-repeat:no-repeat;
}
.testElmt2{ border-color:#fbb;width:50px;height:50px;border-width:5px;}
</style>
</head>
<body>
<h1>Demonstrating xcss plugin</h1>
<div style="width:1900px;height:250px;"></div>
<div class="tk-inlineStack" id="test-container">
<div id="posRef" class="testElmt" style="position:relative;margin:50px;float:right;">
<div id="positionable" class="tk-positionRelative-opposite-out-top-center-5 testElmt2" style="opacity:.5;margin:0;" rel="#posRef" >test position -able</div>
</div>
<div class="tk-inlineStack tk-border tk-corner">
<h3>positionable testing</h3>
<select id="_vPos" onchange="$('#vPos').val($(this).val()).change();">
<option selected="selected">top</option>
<option>middleTop</option>
<option>innerTop</option>
<option>upperMiddle</option>
<option>middle</option>
<option>lowerMiddle</option>
<option>innerBottom</option>
<option>middleBottom</option>
<option>bottom</option>
</select>
<input type="text" id="vPos" value="top"/>
<br />
<select id="_hPos" onchange="$('#hPos').val($(this).val()).change();">
<option>left</option>
<option>middleLeft</option>
<option>innerLeft</option>
<option>leftCenter</option>
<option selected="selected">center</option>
<option>rightCenter</option>
<option>innerRight</option>
<option>middleRight</option>
<option>right</option>
</select>
<input type="text" id="hPos" value="center"/>
<br/>
<label><input type="checkbox" id="vBorderPolicy" />in vBorderPolicy</label>
<label><input type="checkbox" id="hBorderPolicy" />in hBorderPolicy</label>
<br />
<label>spacing: <input type="text" id="spacing" value="0" /></label>
<br />
<button onclick="updatePos();">update</button>
</div>
<script>
updatePos = function(){
$('#positionable').positionRelative('update');
};
jQuery(function(){
$("#positionable").positionRelative();
$('#vPos').change(function(){
$('#positionable').positionRelative('set_vPos',this.value);
}).change();
$('#hPos').change(function(){
$('#positionable').positionRelative('set_hPos',this.value);
}).change();
$('#spacing').keyup(function(){
$('#positionable').positionRelative('set_vSpace',this.value)
.positionRelative('set_hSpace',this.value);
}).keyup();
$('#vBorderPolicy').change(function(){
$('#positionable').positionRelative('set_vBorderPolicy',$(this).is(':checked')?'in':'out');
}).change();
$('#hBorderPolicy').change(function(){
$('#positionable').positionRelative('set_hBorderPolicy',$(this).is(':checked')?'in':'out');
}).change();
$(window).scroll(function(){
$('#positionable').positionRelative('update');
});
});
</script>
</body>
</html>
|
Download
