序
和官网示例吹得天花乱坠不同,使用YUI是特别让人讨厌的经历,按照官方网指导有时候并不能得到正确的结果.本文记录了一些心得,顺手把官网文章翻译下来,以作备忘.
正文出现的是翻译文字,个人见解用
蓝色或
红色字体标出.
YUI使用常识篇
1.必须引入一些js库和css,并且顺序很重要.顺序不对很可能得不到正确结果.
2.debug版本js格式整齐,带所有log,通常用于开发阶段.min版本js将debug版本经过工具压缩而来,体积小,减少下载时间.
3.这些组件可以从yahoo官方网直接引用,地址是:
http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/resize.css4.无论用哪个组件,都必须将css yui-skin-sam赋给父组件,最方便的做法是赋给body元素,如:<body class="yui-skin-sam">
5.定制css请参考
Understanding YUI Skins开始
要使用layout , 必须引入这些js库:
<!-- Skin CSS files resize.css must load before layout.css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/layout.css">
<!-- Utility Dependencies -->
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/dragdrop/dragdrop-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<!-- Optional Animation Support-->
<script src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
<!-- Optional Resize Support -->
<script src="http://yui.yahooapis.com/2.5.2/build/resize/resize-beta-min.js"></script>
<!-- Source file for the Layout Manager -->
<script src="http://yui.yahooapis.com/2.5.2/build/layout/layout-beta-min.js"></script>
注:官网没有列出所有的库.建议做yui开发的时候引入log组件,通过log可清楚看出组件装载过程从而得到程序失败的原因.还可以用 YUI Dependency Configurator 来帮助自己查明究竟需要什么库.并且,库和css的顺序很重要.如果顺序不对,很可能得不到正确的结果.Layout Manager组件
可用于全页级别或元素级别.例如,如果用于全页级别,则一个示例如下:
全页级别示例 如果用于元素级别,例如用于一个panel组件内,示例如下:
元素级别示例Layout Manager的组成单元成为unit,预定义每个页面或元素会被分为1-5个unit,如图所示:
推荐下载更详细的pdf说明文档,说明unit的组成细节:
unit组成图Unit
每个layout有 1-5 个unit组成,每个unit有自己的定制选项.页面至少要有一个"center" unit , 该unit不能设置高度和宽度,这两个特性会被自动计算.
unit其实是一个修改版的module,区别是这些unit的css类名有个yui-layout前缀.
在layout render之后,unit能够被增加或移除,且每个unit能高度被定制.如下是unit常用的配置选项:
* position: top,right,bottom,left,center 之一.
* header: unit的title.
注意:如果在layout内使用YUI menu组件,不要设置header属性! * width: 该属性对left和right unit有效
* height: 该属性对top和bottom unit有效
* resize: Boolean 值,该unit是否可以resize
* gutter: 类似margin的属性,表示各unit间分割条的粗细.
* footer: 可以是字符串或其他元素的id.
* collapse: Boolean 值.如果是true,会在header上多个展开/收起的标志
* scroll: Boolean 值
* body: 可以是字符串或其他元素的id.
* animate: Boolean 值.展开收缩时是否使用动画效果,如果使用,需要引入 Animation Utility 库.
记住:center unit 不支持如下属性:resize, width, height, collapse, animate, close
一个例子如下
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout({
units: [
{
position: 'top',
height: 50,
resize: false,
gutter: '5px',
collapse: true,
resize: true
},
{
position: 'right',
header: 'Right',
width: 300,
resize: true,
gutter: '5px',
footer: 'Footer',
collapse: true,
scroll: true
},
{
position: 'bottom',
header: 'Bottom',
height: 100,
resize: true,
gutter: '5px',
collapse: true
},
{
position: 'left',
header: 'Left',
width: 200,
resize: true,
gutter: '5px',
collapse: true,
close: true,
collapseSize: 50,
scroll: true
},
{
position: 'center'
}
]
});
layout.render();
});
})();
Layout Manager的CSS
参考该CSS就可以按需定制自己的layout了.
/* Remove the dotted border on the resize proxy */
.yui-skin-sam .yui-layout .yui-resize-proxy {
border: none;
}
/* During resize, hide the handles */
.yui-skin-sam .yui-layout .yui-resize-resizing .yui-resize-handle {
opacity: 0;
filter: alpha(opacity=0);
}
/* Style the div inside the resize proxy */
.yui-skin-sam .yui-layout .yui-resize-proxy div {
position: absolute;
border: 1px solid #808080;
background-color: #EDF5FF;
}
/* Set the color of the Active resize handle */
.yui-skin-sam .yui-layout .yui-resize .yui-resize-handle-active {
background-color: #EDF5FF;
}
/* Styles for the left handle */
.yui-skin-sam .yui-layout .yui-resize-proxy .yui-layout-handle-l {
width: 5px;
height: 100%;
top: 0;
left: 0;
}
/* Styles for the right handle */
.yui-skin-sam .yui-layout .yui-resize-proxy .yui-layout-handle-r {
width: 5px;
top: 0;
right: 0;
height: 100%;
}
/* Styles for the bottom handle */
.yui-skin-sam .yui-layout .yui-resize-proxy .yui-layout-handle-b {
width: 100%;
bottom: 0;
left: 0;
height: 5px;
}
/* Styles for the top handle */
.yui-skin-sam .yui-layout .yui-resize-proxy .yui-layout-handle-t {
width: 100%;
top: 0;
left: 0;
height: 5px;
}
/* Left Collapse button */
.yui-skin-sam .yui-layout .yui-layout-unit-left div.yui-layout-hd .collapse {
background: transparent url(layout_sprite.png) no-repeat -20px -160px;
border: 1px solid #808080;
}
/* Left Collapsed Expand Button */
.yui-skin-sam .yui-layout .yui-layout-clip-left .collapse {
background: transparent url(layout_sprite.png) no-repeat -20px -140px;
border: 1px solid #808080;
}
/* Right Collapse Button */
.yui-skin-sam .yui-layout .yui-layout-unit-right div.yui-layout-hd .collapse {
background: transparent url(layout_sprite.png) no-repeat -20px -200px;
border: 1px solid #808080;
}
/* Right Collapsed Expand Button */
.yui-skin-sam .yui-layout .yui-layout-clip-right .collapse {
background: transparent url(layout_sprite.png) no-repeat -20px -120px;
border: 1px solid #808080;
}
/* Bottom Collapse Button */
.yui-skin-sam .yui-layout .yui-layout-unit-bottom div.yui-layout-hd .collapse {
background: transparent url(layout_sprite.png) no-repeat -20px -260px;
border: 1px solid #808080;
}
/* Bottom Collapsed Expand Button */
.yui-skin-sam .yui-layout .yui-layout-clip-bottom .collapse {
background: transparent url(layout_sprite.png) no-repeat -20px -180px;
border: 1px solid #808080;
}
/* Top Collapse Button */
.yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-hd .collapse {
background: transparent url(layout_sprite.png) no-repeat -20px -220px;
border: 1px solid #808080;
}
/* Top Collapsed Expand Button */
.yui-skin-sam .yui-layout .yui-layout-clip-top .collapse {
background: transparent url(layout_sprite.png) no-repeat -20px -240px;
border: 1px solid #808080;
}
/* Close Button */
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd .close {
background: transparent url(layout_sprite.png) no-repeat -20px -100px;
border: 1px solid #808080;
}
/* Give the header a blue background */
.yui-skin-sam .yui-layout .yui-layout-hd {
background:url(sprite.png) repeat-x 0 -1400px;
border: 1px solid #808080;
}
/* Set the background color */
.yui-skin-sam .yui-layout {
background-color: #EDF5FF;
}
/* Style the text in the header */
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd h2 {
font-weight: bold;
color: #fff;
padding: 3px;
}
/* Style the body */
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
border: 1px solid #808080;
border-bottom: none;
border-top: none;
*border-bottom-width: 0;
*border-top-width: 0;
background-color: #f2f2f2;
text-align: left;
}
/* Add a border to the bottom of the body because there is no footer */
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-noft {
border-bottom: 1px solid #808080;
}
/* Add a border to the top of the body because there is no header */
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd {
border-top: 1px solid #808080;
}
/* Style the Clip */
.yui-skin-sam .yui-layout .yui-layout-clip {
position: absolute;
height: 20px;
background-color: #EDF5FF;
display: none;
border: 1px solid #808080;
}
/* Style the footer */
.yui-skin-sam .yui-layout div.yui-layout-ft {
border: 1px solid #808080;
border-top: none;
*border-top-width: 0;
background-color: #f2f2f2;
}
/* Remove the color from the resize handle */
.yui-skin-sam .yui-layout-unit .yui-resize-handle {
background-color: transparent;
}
/* Reposition the handles */
.yui-skin-sam .yui-layout-unit .yui-resize-handle-r {
right: 0;
top: 0;
background-image: none;
}
.yui-skin-sam .yui-layout-unit .yui-resize-handle-l {
left: 0;
top: 0;
background-image: none;
}
.yui-skin-sam .yui-layout-unit .yui-resize-handle-b {
right: 0;
bottom: 0;
background-image: none;
}
.yui-skin-sam .yui-layout-unit .yui-resize-handle-t {
right: 0;
top: 0;
background-image: none;
}
/* Add the gripper */
.yui-skin-sam .yui-layout-unit .yui-resize-handle-r .yui-layout-resize-knob,
.yui-skin-sam .yui-layout-unit .yui-resize-handle-l .yui-layout-resize-knob {
position: absolute;
height: 16px;
width: 6px;
top: 45%;
left: 0px;
background: transparent url(layout_sprite.png) no-repeat 0 -5px;
}
/* Add the gripper */
.yui-skin-sam .yui-layout-unit .yui-resize-handle-t .yui-layout-resize-knob,
.yui-skin-sam .yui-layout-unit .yui-resize-handle-b .yui-layout-resize-knob {
position: absolute;
height: 6px;
width: 16px;
left: 45%;
background: transparent url(layout_sprite.png) no-repeat -20px 0;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>交通违法数据处理系统 2009</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js"></script>
<style type="text/css">
/* Css need for page layout*/
body {
margin:0;
padding:0;
}
/*Without these css , coulnd't view menu.*/
.yui-skin-sam .yui-layout .yui-layout-unit-top,
.yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-bd-nohd {
overflow: visible;
}
#headerMenuContainer {
position: absolute;
bottom:1px;
left: 200px;
}
#buttonBar {
position: absolute;
bottom:1px;
right: 2px;
font-size:12;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/layout/assets/skins/sam/layout.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/resize/resize-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/layout/layout-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js"></script>
</head>
<body class="yui-skin-sam">
<div id="topWin">
<div id="headerMenuContainer">
<div id="headerMenu" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#communication">数据录入</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="#">加锁处理</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="#">信息查询</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="#">信息发布</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="#">管理界面</a>
</li>
</ul>
</div>
</div>
</div>
<div id="buttonBar">
<input type="button" id="tLeftBtn" value="控制左侧菜单"/>
<input type="button" id="tRightBtn" value="控制右侧工具箱"/>
<input type="button" id="tBottomBtn" value="控制下方信息栏"/>
</div>
</div>
<div id="bottomWin">
</div>
<div id="rightWin">
</div>
<div id="leftWin">
</div>
<div id="centerWin">
欢迎来到违法数据处理系统!
</div>
<script>
//Init page layout.
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout({
units: [
{ position: 'top', height: 75, body: 'topWin', gutter: '2px' },
{ position: 'right', width: 300, resize: true, gutter: '2px', collapse: true,scroll: true, body: 'rightWin', animate: true },
{ position: 'bottom', height: 80, resize: true, body: 'bottomWin', gutter: '2px', collapse: true },
{ position: 'left', width: 200, resize: true, body: 'leftWin', gutter: '2px', collapse: true, close: false, collapseSize: 50, scroll: true, animate: true },
{ position: 'center', body: 'centerWin', gutter: '2px' }
]
});
layout.on('render', function() {
layout.getUnitByPosition('top').setStyle('zIndex', 1);
//Create header menu.
initHeaderMenu();
});
layout.render();
//Sets toggle events to buttons.
Event.on('tLeftBtn', 'click', function(ev) {
Event.stopEvent(ev);
layout.getUnitByPosition('left').toggle();
});
Event.on('tRightBtn', 'click', function(ev) {
Event.stopEvent(ev);
layout.getUnitByPosition('right').toggle();
});
Event.on('tBottomBtn', 'click', function(ev) {
Event.stopEvent(ev);
layout.getUnitByPosition('bottom').toggle();
});
});
})();
//Funtion to init header menu.
function initHeaderMenu() {
var oMenuBar = new YAHOO.widget.MenuBar("headerMenu", {
autosubmenudisplay: true,
hidedelay: 750,
lazyload: false });
var aSubmenuData = [
{
id: "communication",
itemdata: [
[
{ text: "录入图片信息", url: "http://360.yahoo.com" },
{ text: "打印处罚通知书", url: "http://360.yahoo.com" },
{ text: "导出违法数据", url: "http://360.yahoo.com" },
],
[
{ text: "修改已录入数据", url: "http://360.yahoo.com" },
{ text: "审核已录入数据", url: "http://360.yahoo.com" },
]
]
},
{
id: "shopping",
itemdata: [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
{ text: "Autos", url: "http://autos.yahoo.com" },
{ text: "Classifieds", url: "http://classifieds.yahoo.com" },
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
{ text: "Real Estate", url: "http://realestate.yahoo.com" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "Wallet", url: "http://wallet.yahoo.com" },
{ text: "Yellow Pages", url: "http://yp.yahoo.com" }
]
},
{
id: "entertainment",
itemdata: [
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
{ text: "Games", url: "http://games.yahoo.com" },
{ text: "Kids", url: "http://www.yahooligans.com" },
{ text: "Music", url: "http://music.yahoo.com" },
{ text: "Movies", url: "http://movies.yahoo.com" },
{ text: "Radio", url: "http://music.yahoo.com/launchcast" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "TV", url: "http://tv.yahoo.com" }
]
},
{
id: "information",
itemdata: [
{ text: "Downloads", url: "http://downloads.yahoo.com" },
{ text: "Finance", url: "http://finance.yahoo.com" },
{ text: "Health", url: "http://health.yahoo.com" },
{ text: "Local", url: "http://local.yahoo.com" },
{ text: "Maps & Directions", url: "http://maps.yahoo.com" },
{ text: "My Yahoo!", url: "http://my.yahoo.com" },
{ text: "News", url: "http://news.yahoo.com" },
{ text: "Search", url: "http://search.yahoo.com" },
{ text: "Small Business", url: "http://smallbusiness.yahoo.com" },
{ text: "Weather", url: "http://weather.yahoo.com" }
]
}
];
/*
Subscribe to the "beforerender" event, adding a submenu
to each of the items in the MenuBar instance.
*/
oMenuBar.subscribe("beforeRender", function () {
if (this.getRoot() == this) {
this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);
}
});
oMenuBar.render();
}
</script>
</body>
</html>
如果你完全按照官方网配置,也许你很难得到这个例子,配置的关键点如下:
1.不能设置Layout的header属性.没有header也就没有了方便的toggle功能,所以用了三个button来控制.
2.必须要设置如下css:
/*Without these css , coulnd't view menu.*/
.yui-skin-sam .yui-layout .yui-layout-unit-top,
.yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-bd-nohd {
overflow: visible;
}
该设置其实也和header有关
3.设置zindex属性,见js:
layout.getUnitByPosition('top').setStyle('zIndex', 1);