JQuery UI Layout

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

<</span>DIV class="ui-layout-center">Center</</span>DIV>
<</span>DIV class="ui-layout-north">North</</span>DIV>
<</span>DIV class="ui-layout-south">South</</span>DIV>
<</span>DIV class="ui-layout-east">East</</span>DIV>
<</span>DIV class="ui-layout-west">West</</span>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: "

AAA

" , // pane打开时，边框按钮中需要显示的内容可以是符号"<"等。需要加入默认css样式.ui-layout-toggler .content
togglerContent_closed: " " , // 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

}
);


});

如果不应用默认的样式呢？也就是applyDefaultStyles: false（默认）的时候。就需要一个css了，

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




.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-dragging {
background : #aaaaaa ;
}


.ui-layout-resizer-dragging-limit {
background : #E1A4A4 ;
}


.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-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 ;
}

 

以上来自网络：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span>html xmlns="http://www.w3.org/1999/xhtml">
<</span>head>
<</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<</span>title>无标题文档</</span>title>
<</span>script type="text/javascript" src="js/jquery-1.5.1.min.js"></</span>script>
<</span>script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></</span>script>
<</span>script type="text/javascript" src="js/jquery.layout-latest.js"></</span>script>
<</span>link href="css/main.css" rel="stylesheet" type="text/css" />
<</span>link type="text/css" href="css/redmond/jquery-ui-1.8.12.custom.css" rel="stylesheet" />
<</span>style type="text/css">
body {
font-family: 宋体,Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
*font-size: 80%;
}




.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-west{
background: #455d89;
border: 1px solid #BBB;
border-width: 0;
width:5px;
}

.ui-layout-resizer-drag {
}


.ui-layout-resizer-hover{
}


.ui-layout-resizer-dragging {
background:#aaaaaa;
}


.ui-layout-resizer-dragging-limit {
background: #E1A4A4;
}


.ui-layout-resizer-closed-hover {
background: #435b87;
}


.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 {
background:url(images/westSplit.jpg) no-repeat;

}





.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 {
color: #66FFCC;
font-size: 12px;
font-weight: bold;
width: 100%;
padding-bottom: 0.35ex;
}
.ui-layout-resizer-west-open{background-color:#435b87;}
.ui-layout-toggler-west-open{background:url(images/westSplit.jpg) no-repeat;width:5px; height:35px; border:none;}
.ui-layout-center{background-color:#435b87;padding:0px 8px 0px 0px;}
.ui-layout-west{ background-color:#435b87; padding:0px 0px 0px 8px;}

.inner-center{ background:#f5f5f5;}
.inner-east{ background:#f5f5f5;}
.inner-south{ background:#f5f5f5;}
#main-layout .ui-layout-resizer-south-open{background:#435b87;}
#main-layout .ui-layout-resizer-east-open{background:#435b87;}
.ui-layout-resizer-east-closed{background:#435b87;}
.ui-layout-resizer-south-closed{background:#435b87;}
.ui-layout-toggler-south-open{background:url(images/southSplit.jpg) no-repeat;border:none;}
.ui-layout-toggler-south-closed{background:url(images/southSplit.jpg) no-repeat; border:none;}

</</span>style>
<</span>script type="text/javascript">
var pageLayout;

$(document).ready(function(){
// create page layout
pageLayout = $('body').layout({
scrollToBookmarkOnLoad: false // handled by custom code so can 'unhide' section first
, defaults: {
contentSelector: ".content" // inner div to auto-size so only it scrolls, not the entire pane!
}
, north: {
size: 80
, spacing_open: 0
, closable: false
, resizable: false
}
, west: {
size: 280
, spacing_closed: 10
, togglerLength_closed: 140
, togglerAlign_closed: "center"
//, togglerContent_closed: "设

置"
, togglerTip_closed: "Open & Pin Contents"
, sliderTip: "Slide Open Contents"
, slideTrigger_open: "mouseover"
}
,
south: {
size: 40
, spacing_open: 0
, closable: false
, resizable: false
}
});

innerLayout = $('#main-layout').layout({
center__paneSelector: ".inner-center"
, west__paneSelector: ".inner-west"
, east__paneSelector: ".inner-east"
, south__paneSelector: ".inner-south"
, west__size: 200
, east__size: 300
, south__size: 75
, spacing_open: 8 // ALL panes
, spacing_closed: 8 // ALL panes
, west__spacing_closed: 12
, east__spacing_closed: 12

});

$("#topmenu li").mouseover(function(){
//alert($(this).attr("class"));
if($(this).attr("class")!="current")
{
if(!$(this).hasClass("hover"))
{
$(this).addClass("hover");
}
}
});
$("#topmenu li").mouseout(function(){
if($(this).attr("class")!="current")
{
if($(this).hasClass("hover"))
{
$(this).removeClass("hover");
}
}
});
});
</</span>script>
</</span>head>
<</span>body>
<</span>div id="top" class="ui-layout-north">
<</span>div id="logo"><</span>img src="images/logo.jpg" width="427" height="52" /></</span>div>
<</span>div id="topmenu">
<</span>ul>
<</span>li class="current"><</span>a href="#">灾害地图</</span>a></</span>li>
<</span>li><</span>a href="#">灾害查询</</span>a></</span>li>
<</span>li><</span>a href="#">数据统计</</span>a></</span>li>
</</span>ul>
</</span>div>
<</span>div id="info">尊敬的用户，欢迎进入中国</</span>div>
</</span>div>
<</span>DIV class="ui-layout-center">
<</span>div class="panlheader">
<</span>span><</span>a>详细信息</</span>a></</span>span>
</</span>div>
<</span>div id="main-layout" class="panelmain content">
<</span>div class="inner-center">Inner Center</</span>div>
<</span>div class="inner-east">Inner East</</span>div>
<</span>div class="inner-south">Inner South</</span>div>

</</span>div>
</</span>DIV>

<</span>DIV class="ui-layout-west">

<</span>div class="panlheader">
<</span>span><</span>a>时间段选择</</span>a></</span>span>
</</span>div>
<</span>div class="panelmain content">
</</span>div>
<</span>div id="queryl">
<</span>strong>全文检索</</span>strong><</span>br />
<</span>input name="input" type="text" />
<</span>input type="button" value="搜索" />
<</span>input type="button" value="高级" />
</</span>div>
<</span>div id="option">
</</span>div>
</</span>DIV>
<</span>DIV id="foot" class="ui-layout-south">South</</span>DIV>
</</span>body>
</</span>html>