|
jQuery UI.Layout Plug-in 官方站點(diǎn)：http://layout./
必須的文件是，jquery.js，jquery-ui.js，還有就是這個(gè)插件的js。但在研究的過(guò)程中發(fā)現(xiàn)了一個(gè)問(wèn)題，在官網(wǎng)下載的js是有問(wèn)題的，甚至性能上都有問(wèn)題。要下載官網(wǎng)示例中使用的js，切記。。地址：http://layout./lib/js/jquery.layout-latest.js
把必要的js引入后，其實(shí)就可以正常運(yùn)行了，參見(jiàn)官方最簡(jiǎn)單的那個(gè)示例，如下：
<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, //應(yīng)用默認(rèn)樣式
scrollToBookmarkOnLoad: false, //頁(yè)加載時(shí)滾動(dòng)到標(biāo)簽
showOverflowOnHover: false, //鼠標(biāo)移過(guò)顯示被隱藏的，只在禁用滾動(dòng)條時(shí)用。
north__closable: false, //可以被關(guān)閉
north__resizable: false, //可以改變大小
north__size:50, //pane的大小
spacing_open:8, //邊框的間隙
spacing_closed:60, //關(guān)閉時(shí)邊框的間隙
resizerTip:"可調(diào)整大小", //鼠標(biāo)移到邊框時(shí)，提示語(yǔ)
//resizerCursor:"resize-p" 鼠標(biāo)移上的指針樣式
resizerDragOpacity:0.9, //調(diào)整大小邊框移動(dòng)時(shí)的透明度
maskIframesOnResize:"#ifa", //在改變大小的時(shí)候，標(biāo)記iframe（未通過(guò)測(cè)試）
sliderTip:"顯示/隱藏側(cè)邊欄", //在某個(gè)Pane隱藏后，當(dāng)鼠標(biāo)移到邊框上顯示的提示語(yǔ)。
sliderCursor:"pointer", //在某個(gè)Pane隱藏后，當(dāng)鼠標(biāo)移到邊框上時(shí)的指針樣式。
slideTrigger_open:"dblclick", //在某個(gè)Pane隱藏后，鼠標(biāo)觸發(fā)其顯示的事件。(click", "dblclick", "mouseover)
slideTrigger_close:"click", //在某個(gè)Pane隱藏后，鼠標(biāo)觸發(fā)其關(guān)閉的事件。("click", "mouseout")
togglerTip_open:"關(guān)閉", //pane打開(kāi)時(shí)，當(dāng)鼠標(biāo)移動(dòng)到邊框上按鈕上，顯示的提示語(yǔ)
togglerTip_closed:"打開(kāi)", //pane關(guān)閉時(shí)，當(dāng)鼠標(biāo)移動(dòng)到邊框上按鈕上，顯示的提示語(yǔ)
togglerLength_open:100, //pane打開(kāi)時(shí)，邊框按鈕的長(zhǎng)度
togglerLength_closed:200, //pane關(guān)閉時(shí)，邊框按鈕的長(zhǎng)度
hideTogglerOnSlide: true, //在邊框上隱藏打開(kāi)/關(guān)閉按鈕(測(cè)試未通過(guò))
togglerAlign_open:"left", //pane打開(kāi)時(shí)，邊框按鈕顯示的位置
togglerAlign_closed:"right", //pane關(guān)閉時(shí)，邊框按鈕顯示的位置
togglerContent_open:"<div style='background:red'>AAA</div>", //pane打開(kāi)時(shí)，邊框按鈕中需要顯示的內(nèi)容可以是符號(hào)"<"等。需要加入默認(rèn)css樣式.ui-layout-toggler .content
togglerContent_closed:"<img/>", //pane關(guān)閉時(shí)，同上。
enableCursorHotkey: true, //啟用快捷鍵CTRL或shift + 上下左右。
customHotkeyModifier:"shift", //自定義快捷鍵控制鍵("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用alt
south__customHotkey:"shift+0", //自定義快捷鍵（測(cè)試未通過(guò)）
fxName:"drop", //打開(kāi)關(guān)閉的動(dòng)畫效果
fxSpeed:"slow", //動(dòng)畫速度
//fxSettings: { duration: 500, easing: "bounceInOut" }//自定義動(dòng)畫設(shè)置(未通過(guò)測(cè)試)
//initClosed:true,//初始時(shí)，所有pane關(guān)閉
//initHidden:true //初始時(shí)，所有pane隱藏
onresize :ons, //調(diào)整大小時(shí)調(diào)用的函數(shù)
onshow_start:start, onshow_end:end /*
其他回調(diào)函數(shù)
顯示時(shí)調(diào)用
onshow = ""
onshow_start = ""
onshow_end = ""
隱藏時(shí)調(diào)用
onhide = ""
onhide_start = ""
onhide_end = ""
打開(kāi)時(shí)調(diào)用
onopen = ""
onopen_start = ""
onopen_end = ""
關(guān)閉時(shí)調(diào)用
onclose = ""
onclose_start = ""
onclose_end = ""
改變大小時(shí)調(diào)用
onresize = ""
onresize_start = ""
onresize_end = ""
*/ } ); });
如果不應(yīng)用默認(rèn)的樣式呢？也就是applyDefaultStyles: false（默認(rèn)）的時(shí)候。就需要一個(gè)css了，
body {
font-family: 宋體,Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
*font-size: 80%;
}
/*
三種必備樣式為：
paneClass: "ui-layout-pane" 窗格樣式
resizerClass: "ui-layout-resizer" 拉動(dòng)條樣式
togglerClass: "ui-layout-toggler" 拉動(dòng)條上按鈕樣式
*/
/*
所有窗格應(yīng)用的樣式,也是必備樣式
ui-layout-pane
ui-layout-pane-[PANE-NAME]（東南西北中，如：ui-layout-pane-west。這個(gè)樣式放入基本樣式下方，可覆蓋原樣式。 ）
ui-layout-pane-[PANE-STATE] （open、closed 如：ui-layout-pane-open。窗格打開(kāi)時(shí)的樣式）
ui-layout-pane-[PANE-NAME]-[PANE-STATE] （如：ui-layout-pane-west-closed。指定東南西北中一個(gè)窗格在某狀態(tài)下的樣式。）
*/
.ui-layout-pane {
background: #dfe8f6;
border: 0px solid #8db2e3;
padding: 10px;
overflow: auto;
}
/*非必備樣式，描述窗格中的內(nèi)容*/
.ui-layout-content {
padding: 10px;
position: relative;
overflow: auto;
}
/*
* 所有拉動(dòng)條的樣式
*/
.ui-layout-resizer {
background: #dfe8f6;
border: 1px solid #BBB;
border-width: 0;
}
/*
* 拉動(dòng)條拉動(dòng)時(shí)，保持不動(dòng)的拉動(dòng)條樣式，不明白修改背景測(cè)試。
*/
.ui-layout-resizer-drag {
}
/*鼠標(biāo)移動(dòng)到拉動(dòng)條時(shí)的樣式*/
.ui-layout-resizer-hover{
}
/*
*拖動(dòng)拉動(dòng)條時(shí)，拉動(dòng)條的樣式，據(jù)說(shuō)是設(shè)置“打開(kāi)懸?！焙汀巴蟿?dòng)”為同一樣式。
*/
/*.ui-layout-resizer-open-hover , */
.ui-layout-resizer-dragging {
background:#aaaaaa;
}
/*拖動(dòng)拉動(dòng)條時(shí)，到最大或最小邊緣時(shí)的樣式*/
.ui-layout-resizer-dragging-limit {
background: #E1A4A4; /* red */
}
/*拉動(dòng)條關(guān)閉時(shí)，的樣式。*/
.ui-layout-resizer-closed-hover {
background: #FFCC00;
}
/*窗格關(guān)閉后，點(diǎn)擊拉動(dòng)條（非拉動(dòng)條按鈕）,窗格滑動(dòng)時(shí)拉動(dòng)條的樣式*/
.ui-layout-resizer-sliding {
opacity: .10;
filter: alpha(opacity=10);
}
/*窗格關(guān)閉后，點(diǎn)擊拉動(dòng)條（非拉動(dòng)條按鈕）,窗格滑動(dòng)時(shí)，鼠標(biāo)懸停在拉動(dòng)條上的樣式*/
.ui-layout-resizer-sliding-hover {
opacity: 1.00;
filter: alpha(opacity=100);
}
/*
* 拖動(dòng)桿上的按鈕
*/
.ui-layout-toggler {
border: 1px solid #CCCCCC;
background-color: #bcd2ef;
opacity: .60;
filter: alpha(opacity=60);
}
/*
鼠標(biāo)懸停在拉動(dòng)條時(shí)的樣式，已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆蓋了。
.ui-layout-resizer-hover
*/
/*鼠標(biāo)懸停在拖動(dòng)條上按鈕的樣式*/
.ui-layout-toggler-hover {
background-color: #0099FF；
opacity: 1.00;
filter: alpha(opacity=100);
}
/*窗格關(guān)閉后，半打開(kāi)狀態(tài)的拉動(dòng)條是隱藏的*/
.ui-layout-resizer-sliding ui-layout-toggler {
display: none;
}
/*貌似是按鈕上的文字內(nèi)容*/
.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 */
}
以上來(lái)自網(wǎng)絡(luò)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-latest.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="css/redmond/jquery-ui-1.8.12.custom.css" rel="stylesheet" />
<style type="text/css">
body {
font-family: 宋體,Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
*font-size: 80%;
}
/*
三種必備樣式為：
paneClass: "ui-layout-pane" 窗格樣式
resizerClass: "ui-layout-resizer" 拉動(dòng)條樣式
togglerClass: "ui-layout-toggler" 拉動(dòng)條上按鈕樣式
*/
/*
所有窗格應(yīng)用的樣式,也是必備樣式
ui-layout-pane
ui-layout-pane-[PANE-NAME]（東南西北中，如：ui-layout-pane-west。這個(gè)樣式放入基本樣式下方，可覆蓋原樣式。 ）
ui-layout-pane-[PANE-STATE] （open、closed 如：ui-layout-pane-open。窗格打開(kāi)時(shí)的樣式）
ui-layout-pane-[PANE-NAME]-[PANE-STATE] （如：ui-layout-pane-west-closed。指定東南西北中一個(gè)窗格在某狀態(tài)下的樣式。）
*/
.ui-layout-pane {
background: #dfe8f6;
border: 0px solid #8db2e3;
padding: 10px;
overflow: auto;
}
/*非必備樣式，描述窗格中的內(nèi)容*/
.ui-layout-content {
padding: 10px;
position: relative;
overflow: auto;
}
/*
* 所有拉動(dòng)條的樣式
*/
.ui-layout-resizer-west{
background: #455d89;
border: 1px solid #BBB;
border-width: 0;
width:5px;
}
/*
* 拉動(dòng)條拉動(dòng)時(shí)，保持不動(dòng)的拉動(dòng)條樣式，不明白修改背景測(cè)試。
*/
.ui-layout-resizer-drag {
}
/*鼠標(biāo)移動(dòng)到拉動(dòng)條時(shí)的樣式*/
.ui-layout-resizer-hover{
}
/*
*拖動(dòng)拉動(dòng)條時(shí)，拉動(dòng)條的樣式，據(jù)說(shuō)是設(shè)置“打開(kāi)懸?！焙汀巴蟿?dòng)”為同一樣式。
*/
/*.ui-layout-resizer-open-hover , */
.ui-layout-resizer-dragging {
background:#aaaaaa;
}
/*拖動(dòng)拉動(dòng)條時(shí)，到最大或最小邊緣時(shí)的樣式*/
.ui-layout-resizer-dragging-limit {
background: #E1A4A4; /* red */
}
/*拉動(dòng)條關(guān)閉時(shí)，的樣式。*/
.ui-layout-resizer-closed-hover {
background: #435b87;
}
/*窗格關(guān)閉后，點(diǎn)擊拉動(dòng)條（非拉動(dòng)條按鈕）,窗格滑動(dòng)時(shí)拉動(dòng)條的樣式*/
.ui-layout-resizer-sliding {
opacity: .10;
filter: alpha(opacity=10);
}
/*窗格關(guān)閉后，點(diǎn)擊拉動(dòng)條（非拉動(dòng)條按鈕）,窗格滑動(dòng)時(shí)，鼠標(biāo)懸停在拉動(dòng)條上的樣式*/
.ui-layout-resizer-sliding-hover {
opacity: 1.00;
filter: alpha(opacity=100);
}
/*
* 拖動(dòng)桿上的按鈕
*/
.ui-layout-toggler {
background:url(images/westSplit.jpg) no-repeat;
}
/*
鼠標(biāo)懸停在拉動(dòng)條時(shí)的樣式，已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆蓋了。
.ui-layout-resizer-hover
*/
/*鼠標(biāo)懸停在拖動(dòng)條上按鈕的樣式*/
.ui-layout-toggler-hover {
background-color: #0099FF；
opacity: 1.00;
filter: alpha(opacity=100);
}
/*窗格關(guān)閉后，半打開(kāi)狀態(tài)的拉動(dòng)條是隱藏的*/
.ui-layout-resizer-sliding ui-layout-toggler {
display: none;
}
/*貌似是按鈕上的文字內(nèi)容*/
.ui-layout-toggler .content {
color: #66FFCC;
font-size: 12px;
font-weight: bold;
width: 100%;
padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
}
.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;}
</style>
<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: "設(shè)<br><br>置"
, 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");
}
}
});
});
</script>
</head>
<body>
<div id="top" class="ui-layout-north">
<div id="logo"><img src="images/logo.jpg" width="427" height="52" /></div>
<div id="topmenu">
<ul>
<li class="current"><a href="#">災(zāi)害地圖</a></li>
<li><a href="#">災(zāi)害查詢</a></li>
<li><a href="#">數(shù)據(jù)統(tǒng)計(jì)</a></li>
</ul>
</div>
<div id="info">尊敬的用戶，歡迎進(jìn)入中國(guó)</div>
</div>
<DIV class="ui-layout-center">
<div class="panlheader">
<span><a>詳細(xì)信息</a></span>
</div>
<div id="main-layout" class="panelmain content">
<div class="inner-center">Inner Center</div>
<div class="inner-east">Inner East</div>
<div class="inner-south">Inner South</div>
</div>
</DIV>
<DIV class="ui-layout-west">
<div class="panlheader">
<span><a>時(shí)間段選擇</a></span>
</div>
<div class="panelmain content">
</div>
<div id="queryl">
<strong>全文檢索</strong><br />
<input name="input" type="text" />
<input type="button" value="搜索" />
<input type="button" value="高級(jí)" />
</div>
<div id="option">
</div>
</DIV>
<DIV id="foot" class="ui-layout-south">South</DIV>
</body>
</html>
|
