YUI code snippets

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 Region

ver 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);