jQuery布局（原创）

是这样的，开始准备做一个美观点的后台页面，考虑使用EXTJs。可考虑到协议的问题，最终还是放弃了，继续使用jQuery吧。传统的后台页面布局是表格套表格，加上freamset已经ifream，当然也可以做到美观，可那是一个乱啊。下面介绍一个jQuery的插件，目前除了官方的英文文档，还没有发现可用的中文说明。用我极差的文笔在这里发表一下，希望大家不要介意。只是把自己的收获与大家分享一下。废话不多说，上正题！

 

首先，这个插件叫做：jQuery UI.Layout Plug-in  官方站点：http://layout.jquery-dev.net/

 

必须的文件是，jquery.js，jquery-ui.js，还有就是这个插件的js。但在研究的过程中发现了一个问题，在官网下载的js是有问题的，甚至性能上都有问题。要下载官网示例中使用的js，切记。。地址：http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js

 

我还是硬着头皮把官方的文档看完了，可怜我那点英语水平啊。

 

把必要的js引入后，其实就可以正常运行了，参见官方最简单的那个示例，如下：

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout-latest.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
$(document).ready(function () {
	$('body').layout({ applyDefaultStyles: true });
});
</SCRIPT>

<DIV class="ui-layout-center">Center</DIV>
<DIV class="ui-layout-north">North</DIV>
<DIV class="ui-layout-south">South</DIV>
<DIV class="ui-layout-east">East</DIV>
<DIV class="ui-layout-west">West</DIV>

 

下面解释一下属性：

$(function(){
		var myLayout =$("body").layout(
							{ 	
								applyDefaultStyles: true,//应用默认样式
								scrollToBookmarkOnLoad:false,//页加载时滚动到标签
								showOverflowOnHover:false,//鼠标移过显示被隐藏的，只在禁用滚动条时用。
								north__closable:false,//可以被关闭
								north__resizable:false,//可以改变大小
								north__size:50,//pane的大小
								spacing_open:8,//边框的间隙
								spacing_closed:60,//关闭时边框的间隙
								resizerTip:"可调整大小",//鼠标移到边框时，提示语
								//resizerCursor:"resize-p" 鼠标移上的指针样式
								resizerDragOpacity:0.9,//调整大小边框移动时的透明度
								maskIframesOnResize:"#ifa",//在改变大小的时候，标记iframe（未通过测试）
								sliderTip:"显示/隐藏侧边栏",//在某个Pane隐藏后，当鼠标移到边框上显示的提示语。
								sliderCursor:"pointer",//在某个Pane隐藏后，当鼠标移到边框上时的指针样式。
								slideTrigger_open:"dblclick",//在某个Pane隐藏后，鼠标触发其显示的事件。(click", "dblclick", "mouseover)
								slideTrigger_close:"click",//在某个Pane隐藏后，鼠标触发其关闭的事件。("click", "mouseout")
								togglerTip_open:"关闭",//pane打开时，当鼠标移动到边框上按钮上，显示的提示语
								togglerTip_closed:"打开",//pane关闭时，当鼠标移动到边框上按钮上，显示的提示语
								togglerLength_open:100,//pane打开时，边框按钮的长度
								togglerLength_closed:200,//pane关闭时，边框按钮的长度
								hideTogglerOnSlide:true,//在边框上隐藏打开/关闭按钮(测试未通过)
								togglerAlign_open:"left",//pane打开时，边框按钮显示的位置
								togglerAlign_closed:"right",//pane关闭时，边框按钮显示的位置
								togglerContent_open:"<div style='background:red'>AAA</div>",//pane打开时，边框按钮中需要显示的内容可以是符号"<"等。需要加入默认css样式.ui-layout-toggler .content 
								togglerContent_closed:"<img/>",//pane关闭时，同上。
								enableCursorHotkey:true,//启用快捷键CTRL或shift + 上下左右。
								customHotkeyModifier:"shift",//自定义快捷键控制键("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用alt
								south__customHotkey:"shift+0",//自定义快捷键（测试未通过）
								fxName:"drop",//打开关闭的动画效果
								fxSpeed:"slow",//动画速度
								//fxSettings: { duration: 500, easing: "bounceInOut" }//自定义动画设置(未通过测试)
								//initClosed:true,//初始时，所有pane关闭
								//initHidden:true //初始时，所有pane隐藏
								onresize :ons,//调整大小时调用的函数
								onshow_start:start,
								onshow_end:end
								/*
								其他回调函数
								
								显示时调用
								onshow = ""
								onshow_start = "" 
								onshow_end = "" 
								隐藏时调用
								onhide = "" 
								onhide_start = "" 
								onhide_end = "" 
								打开时调用
								onopen = "" 
								onopen_start = "" 
								onopen_end = "" 
								关闭时调用
								onclose = "" 
								onclose_start = "" 
								onclose_end = "" 
								改变大小时调用
								onresize = "" 
								onresize_start = "" 
								onresize_end = "" 
								*/
							}
		);
		

	});

 

有些遗漏的还得参见官网。

 

如果不应用默认的样式呢？也就是applyDefaultStyles: false（默认）的时候。就需要一个css了，献上我测试后的css，如下：

body {
	font-family: 宋体,Geneva, Arial, Helvetica, sans-serif;
	font-size:   80%;
	*font-size:  80%;
}

/*
三种必备样式为：
paneClass:    "ui-layout-pane" 窗格样式
resizerClass: "ui-layout-resizer" 拉动条样式
togglerClass: "ui-layout-toggler" 拉动条上按钮样式
*/

/*
 所有窗格应用的样式,也是必备样式
ui-layout-pane 
ui-layout-pane-[PANE-NAME]（东南西北中，如：ui-layout-pane-west。这个样式放入基本样式下方，可覆盖原样式。 ） 
ui-layout-pane-[PANE-STATE] （open、closed 如：ui-layout-pane-open。窗格打开时的样式）
ui-layout-pane-[PANE-NAME]-[PANE-STATE] （如：ui-layout-pane-west-closed。指定东南西北中一个窗格在某状态下的样式。）
*/
.ui-layout-pane { 
	background: #dfe8f6;
	border:		0px solid #8db2e3;
	padding:	10px; 
	overflow:	auto;
}
	/*非必备样式，描述窗格中的内容*/
	.ui-layout-content {
		padding:	10px;
		position:	relative; 
		overflow:	auto;
	}

/*
 *	所有拉动条的样式
 */
.ui-layout-resizer	{ 
	background:		#dfe8f6;
	border:			1px solid #BBB;
	border-width:	0;
	}
	/*
	 * 拉动条拉动时，保持不动的拉动条样式，不明白修改背景测试。
	 */
	.ui-layout-resizer-drag {
	}
	
	/*鼠标移动到拉动条时的样式*/
	.ui-layout-resizer-hover{
	}
	/* 
     *拖动拉动条时，拉动条的样式，据说是设置“打开悬停”和“拖动”为同一样式。
	 */
	/*.ui-layout-resizer-open-hover ,	*/
	.ui-layout-resizer-dragging {	
		background:#aaaaaa;
	}

	/*拖动拉动条时，到最大或最小边缘时的样式*/
	.ui-layout-resizer-dragging-limit {
		background: #E1A4A4; /* red */
	}

	/*拉动条关闭时，的样式。*/
	.ui-layout-resizer-closed-hover	{ 
		background: #FFCC00;
	}
	
	/*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时拉动条的样式*/
	.ui-layout-resizer-sliding {	
		opacity: .10; 
		filter:  alpha(opacity=10);
		}
		/*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时，鼠标悬停在拉动条上的样式*/
		.ui-layout-resizer-sliding-hover {
			opacity: 1.00; 
			filter:  alpha(opacity=100);
		}



	

/*
 *	拖动杆上的按钮
 */
.ui-layout-toggler {
	border: 1px solid #CCCCCC; 
	background-color: #bcd2ef;
	opacity: .60;
	filter:  alpha(opacity=60);
	}
	
/*
	鼠标悬停在拉动条时的样式，已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆盖了。
	.ui-layout-resizer-hover
 */
	
	
	/*鼠标悬停在拖动条上按钮的样式*/
	.ui-layout-toggler-hover {
		background-color: #0099FF；
		opacity: 1.00;
		filter:  alpha(opacity=100);
	}
	
	/*窗格关闭后，半打开状态的拉动条是隐藏的*/
	.ui-layout-resizer-sliding  ui-layout-toggler {
		display: none;
	}


/*貌似是按钮上的文字内容*/
	.ui-layout-toggler .content {
	background:#FFFF00;
		color: #66FFCC;
		font-size:		12px;
		font-weight:	bold;
		width:			100%;
		padding-bottom:	0.35ex; /* to 'vertically center' text inside text-span */
	}

 

极大部分已经测试过了，参考官方示例中给出的css，地址：http://layout.jquery-dev.net/lib/css/layout-default-latest.css

 

 

时间原因，不能阐述太多了，本人英文水平很差，如有错误，请大家及时指正。

 
 

评论

3 楼 fishinsky 2011-01-31  

layout的网站上只能下到1.2的版本。。。

2 楼 doabit 2010-10-01  

一直没找到好的jquery界面。。因为这个我都考虑换其它的了，jq layout 1.3 beta中，，不知道怎么样

1 楼 hyj1254 2010-09-25  

正在用，但有个缺点，每次window的resize被触发时，它都不能立即自适应，有一定的延迟。这就导致2个问题：延迟过程中页面会出现明显的深灰色的过渡区，影响体验；延迟的存在与其他jQuery插件不兼容，如tabs，导致该插件的resize事件失效。