以下是 jquery元素相对定位插件js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jqueryԪ����Զ�λ���</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="css/layout.ie.css"/>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.6-min.js"></script>
<script type="text/javascript" src="js/jquery.place-min.js"></script>
<script type="text/javascript" src="js/jquery.demo-min.js"></script>
</head>
<body>
<div id="content">
<br><br><br><br>
<!-- LAYOUT -->
<div id="layout">
<h1>Element Place (jQuery)</h1>
<!-- SECTION 1 -->
<div class="wrapper odd">
<h3>Demo</h3>
<div class="threeCol">
<div id="staticBox">#staticBox</div>
<div id="positionedBox">#positionedBox</div>
<h4>Presets:</h4>
<ol id="presets">
<li><a href="#dropdown">Dropdown</a></li>
<li><a href="#tooltip">Tooltip</a></li>
<li><a href="#infotip">Info tip</a></li>
<li><a href="#cornerRibbon">Corner Ribbon</a></li>
<li><a href="#blockOverlay">Block Overlay</a></li>
<li><a href="#stickyNav">Sticky Nav</a></li>
<li><a href="#infoBar">Info Bar</a></li>
<li><a href="#modal">Modal</a></li>
<li><a href="#sidebar">Sidebar</a></li>
<li><a href="#dock">Dock</a></li>
</ol>
</div>
<div class="fiveCol">
<!-- GROUPED ELEMENTS -->
<div class="stack">
<h4>Options</h4>
<ul>
<li class="threeCol">
<label for="position" title="The CSS position property that should be applied to the selected HTML element.">Position: </label>
<select id="position" class="full">
<option value="absolute" selected="selected">Absolute (default)</option>
<option value="fixed">Fixed</option>
</select>
</li>
<li class="twoCol lastChild">
<label for="z" title="The CSS z-index value that should be applied to the selected HTML element.">Z-Index: </label>
<input type="text" id="z" value="1000" class="number" />
</li>
<li class="threeCol">
<label for="relativeTo" title="The HTML element, window or document object, relative to which the selected HTML element will be positioned.">Relative to: </label>
<select id="relativeTo" class="full">
<option value="window">Window/Viewport (default)</option>
<option value="document">Document</option>
<option value="#layout">#layout</option>
<option value="div.wrapper">div.wrapper</option>
<option value="#staticBox" selected="selected">#staticBox</option>
</select>
</li>
<li class="twoCol lastChild">
<br />
<label for="includeMargin" style="display: inline;" title="If true, margins of the relative to element are added to the calculation.">Include Margin? </label>
<input type="checkbox" id="includeMargin" value="true" />
</li>
<li class="threeCol">
<label for="x" title="The horizontal alignment of the selected HTML element relative to the specified HTML element, window or document object.">X: </label>
<select id="x" class="full">
<option value="left">Left (default)</option>
<option value="leftEdge" selected="selected">Left Edge</option>
<option value="right">Right</option>
<option value="rightEdge">Right Edge</option>
<option value="center">Center</option>
<option value="overlay">Overlay</option>
</select>
</li>
<li class="twoCol lastChild">
<label for="offsetX" title="The amount of spacing to add or take away from the set vertical position of the selected HTML element.">Offset: </label>
<input type="text" id="offsetX" value="0" class="number" />
</li>
<li class="threeCol">
<label for="y" title="The vertical alignment of the selected HTML element relative to the specified HTML element, window or document object.">Y: </label>
<select id="y" class="full">
<option value="top">Top (default)</option>
<option value="topEdge">Top Edge</option>
<option value="bottom">Bottom</option>
<option value="bottomEdge" selected="selected">Bottom Edge</option>
<option value="center">Center</option>
<option value="overlay">Overlay</option>
</select>
</li>
<li class="twoCol lastChild">
<label for="offsetY" title="The amount of spacing to add or take away from the set vertical position of the selected HTML element.">Offset: </label>
<input type="text" id="offsetY" value="0" class="number" />
</li>
<li class="threeCol">
<label for="boundingBox" title="The HTML element, window or document object; boundaries of which are used to bound an element inside a region.">Bounding Box: </label>
<select id="boundingBox" class="full">
<option value="window" selected="selected">Window/Viewport (default)</option>
<option value="document">Document</option>
<option value="#layout">#layout</option>
<option value="div.wrapper">div.wrapper</option>
</select>
</li>
<li class="twoCol lastChild" style="margin-bottom: 0;">
<label for="inBoundX" style="display: inline;" title="If true, the selected HTML element is kept inside the left/right edge of the bounding box.">inBoundX: </label>
<input type="checkbox" id="inBoundX" value="true" checked="checked" />
</li>
<li class="twoCol lastChild" style="margin-bottom: 0;">
<label for="inBoundY" style="display: inline; margin-bottom: 0" title="If true, the selected HTML element is kept inside the top/bottom edge of the bounding box.">inBoundY: </label>
<input type="checkbox" id="inBoundY" value="true" checked="checked" />
</li>
</ul>
</div>
<!-- END GROUPED ELEMENTS -->
</div>
<div class="stack eightCol">
<h4>Code</h4>
<textarea id="code" class="full"></textarea>
</div>
</div>
<!-- END SECTION 1 -->
</div>
<!-- END LAYOUT -->
<!--DEMO end-->
</div>
</body>
</html>CSS代码(layout.ie.css):
html,body{height:100%;margin:0;padding:0;}
分享到QQ
分享到微博
微信扫一扫
