利用jquery实现元素相对定位插件



51 200 67



特效描述:利用jquery实现 元素相对 定位插件,利用jquery实现元素相对定位插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/layout.ie.css"/>

2. 引入JS

<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>

3. HTML代码

    <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>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 切换按钮 form表单 文本框 下拉框 背景切换 全选/反选

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到