File: src/plugins/position/demo-positionable.html

Recommend this page to a friend!
  Classes of Jonathan Gotti   jQuery Toolkit   src/plugins/position/demo-positionable.html   Download  
File: src/plugins/position/demo-positionable.html
Role: Example script
Content type: text/plain
Description: Documentation
Class: jQuery Toolkit
Create widgets reading options from CSS classes
Author: By
Last change: Update of src/plugins/position/demo-positionable.html
Date: 2 years ago
Size: 2,529 bytes
 

Contents

Class file image Download
<?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>