Photo Batching | ThinkVitamin.com
Skinning JS solutions - CSS JavaScript friction and fusion - 這種寫法的好處是
1. 使用者reload不會總是回到第一個tab: 技巧是toc裡面的<a href>帶有#號，自然location.href裡面就有#號，然後在某個tab做reload的話，可以判斷使用者原本在的tab，不會每次都回到第一個tab。
2. click event是 bind 在 toc 裡面，再由 YAHOO.util.event.getTarget(e)去抓取實際點取到的 tab，不需要每個 tab 都 bind 一個 click listener
3. 最後 return pub，只有pub是pub.init是pulic method，其餘的getBookmark, show都是private method
<ul id="toc">
<li><a href="#spec1">Spec 1</a></li>
<li><a href="#spec2">Spec 2</a></li>
<li><a href="#spec3">Spec 3</a></li>
<li><a href="#spec4">Spec 4</a></li>
<li><a href="#spec5">Spec 5</a></li>
</ul>
YAHOO.example.tocnav = function(){
var pub = {};
function show(e){
var t = YAHOO.util.Event.getTarget(e);
if(t.nodeName.toLowerCase()==='a'){
if(pub.current){
YAHOO.util.Dom.removeClass(pub.current,'show');
}
var target = YAHOO.util.Dom.get(t.href.split('#')[1]);
if(target){
pub.current = target.parentNode;
YAHOO.util.Dom.addClass(pub.current,'show');
}
}
};
function getBookmark(){
var bookmark = window.location.hash.replace('#','');
var t = YAHOO.util.Dom.get(bookmark);
return t ? t.parentNode : false;
};
pub.init = function(){
pub.current = getBookmark();
YAHOO.util.Dom.addClass(this,'js');
YAHOO.util.Dom.addClass(pub.current,'show');
YAHOO.util.Event.addListener('toc','click',show);
};
return pub;
}();
YAHOO.util.Event.onAvailable('faq',YAHOO.example.tocnav.init);
Reading out element dimensions with YUI Regionver Y = YAHOO.util;
var $D = Y.Dom;
var $E = Y.Event;
var $ = $D.get;
YAHOO.util.Dom.setStyle(['test', 'test2'], 'opacity', 0.5);
var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity');
/* return 放 public method, 其他private放在return之前 */
YAHOO.MyProperty = function () {
var privateVariable;
function privateFunction(x) {
...privateVariable...
}
return {
firstMethod: function (a, b) {
...privateVariable...
},
secondMethod: function (c) {
...privateFunction()...
}
};
}();
1. onAvailable 裡面可以用 this，這邊指的是 'yui-main'，用在getElementsByClassName的第三個參數可以限定只在 'yui-main' 裡面找
2. getRegion 可以取得 block 的上下邊的 y 軸座標以及左右邊的 x 軸座標, ex:
var region = YAHOO.util.Dom.getRegion ( YAHOO.util.Dom.get('test') );
回傳 Region {top: 32, right: 825, bottom: 1334, left: 173}
可用region.top / region.bottom 取得 border-top / border-bottom 的 y 軸座標
region.left / region.right 取得 border-left / border-right 的 x 軸座標
另外也可以用getXY取得左上角的座標, ex:
var region = YAHOO.util.Dom.getXY ( YAHOO.util.Dom.get('test') );回傳 [173, 32] 分別對應到上一個 region.left region.top, 也就是該element的
左上角的[x軸, y軸] 座標
3. height = reg.bottom - reg.top; 可以決定 div 的高度。
YAHOO.util.Event.onAvailable('yui-main',function(){
var reg = YAHOO.util.Dom.getRegion(this.getElementsByTagName('div')[0]);
var height = reg.bottom - reg.top;
var grids = YAHOO.util.Dom.getElementsByClassName('yui-u','div',this);
for(var i=0;grids[i];i++){
YAHOO.util.Dom.setStyle(grids[i],'height',height+'px');
};
});
YAHOO.util.Dom.getDocumentHeight(); // 取得整個document的高
YAHOO.util.Dom.getDocumentWidth();
YAHOO.util.Dom.getViewportHeight()); // 取得可視範圍的高
YAHOO.util.Dom.getViewportWidth());
1. 示範namespace的用法, 預設的namespace定義在
YAHOO global object, 只有YAHOO.util YAHOO.example, YAHOO.widget
2. $E.on的是$E.addListener的alias, 第一個參數可以傳一個id的array, 函數中的this同樣是指到 apply 的 element, 這邊是 $('test1') or $('test2')
3. 通過 setStyle(el, 'opacity', '0.7') 可以快速的設定opacity, 最後一個參數是 follow standard 0-1之間的opacity
4. 利用return 來區別private & public, 整各YAHOO.foo.bar.example是一個函式, 外界無法更動裡面的職, data hiding.
YAHOO.namespace('foo.bar');
var y = YAHOO.util;
var $E = y.Event;
var $D = y.Dom;
var $ = $D.get;
var $$ = $D.getElementsBy;
YAHOO.foo.bar.example = function(){
return {
init: function(){
$E.on(['test1', 'test2'], 'click', function(){
$D.setStyle(this, 'backgroundColor','red');
$D.setStyle(this, 'opacity', '0.7');
})
}
}
}()
$E.onDOMReady(YAHOO.foo.bar.example.init);
