w_panel.html

<h2 class="contentTitle">面板</h2>


<div class="pageContent sortDrag" selector="h1" layoutH="42">

	<div class="panel" defH="150">
		<h1>不可折叠面板1</h1>
		<div>
			<table class="list" width="98%">
				<thead>
					<tr>
						<th width="80">序号</th>
						<th>姓名</th>
						<th>性别</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>男</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>女</td>
					</tr>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>男</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>女</td>
					</tr>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>男</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>女</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
	<div class="panel close collapse" defH="150">
		<h1>可折叠默认关闭面板</h1>
		<div>
			<table class="table" width="98%">
				<thead>
				<tr>
					<th width="80">序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>女</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>女</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>女</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>

	<div class="panel collapse" minH="100" defH="150">
		<h1>可折叠默认打开面板</h1>
		<div>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
		</div>
	</div>

	<div id="testDrag" style="border:1px solid red;">test</div>
</div>

<script>

	$.fn.extend({
		divDrag: function (options) {

			return this.each(function () {
				var $box = $(this);
				$box.mousedown(function(event){
					var position = $box.position();
					$box.css({
						position:'absolute',
						top:position.top,
						left:position.left,
						width:$box.width()+'px',
						height:$box.height()+'px'
					}).jDrag({
						event:event
					});
				});

			});
		}
	});

	$('#testDrag').divDrag();
</script>