我討厭 YUI 3 .....第八天 Widget

Tags:

YUI3

簡中版

網頁好讀版

YUI Widget 是一個包含 html+css+js 三個部分組成的小工具，咦

這好像是廢話，網頁的制作，本來就是這三個基本語言組成，似乎 YUI 又多過了一手，

建立 html

前面有提到 Widget 組成的元素有三個，現在就先建立其中的一項 HTML。

我要制作一個命名為 sample 的 widget ，其中 widget 包含了 header、body、footer 三個區塊，這個 html 將會是 YUI Widget 未來要操作的 html node ，之後所有 widget 的 event 也都會在這些 node 裡發生。

YUI Widget html

<div id="sample" >
    <div class="hd">sample Header</div>
    <div class="bd">
        <h5>sample body</h5>
        <a href="#" class="hideBtn">hide me!</a>
    </div>
    <div class="ft">sample Footer</div>
</div>

建立 css

widget 的第二個部分就是 css ， YUI widget 對 UI 的顯示上，都是藉由 css style 來控制，除了會動態修改 style 之外， Widget 還會增加、修改 css className ，所以我們必須事先設定好 css style ，這裡先介紹一個 Widget 常見的 class： hidden ， hidden 的意思就是希望 html node 可以消失，不出現在螢幕上，所以我對這個 className 下 style :display:none;。

YUI Widget css

.yui3-sample-hidden {
    display:none;
}

當你使用 YUI3 Widget 內建的 method：hide，這時 JS 就會自動對 Widget 加上 yui3-{name}-hidden 這個 className ，所以我們得先對這個 className 定義好正確的 style。

因為 sample 是我建立 widget 的名稱，所以 YUI 自動産生的 className 會以 yui3-sample 為開頭。

建立 javascript widget

有了 HTML 、css 這兩份資料之後，我們就可以開始寫 Widget js 的部分囉，這裡我宣告一個 Y.sample 的物件，並繼承 Widget 的所有 method 與 attribute，另外我增加了一個 method: initializer ，當我 new sample widget 時，Widget 會自動對 .hideBtn 綁定 click 事件 ( 7 ~ 9 行)。

sampleWidget.js

YUI.add("sample", function(Y){
    var method = {}; 
    var sample={};
    sample.NAME = "sample";
    sample.ATTRS = {}
    
    method.initializer = function() {
        Y.one("#sample .hideBtn").on('click', this.hide, this);
    }   
 
    Y.sample = Y.Base.create("sample", Y.Widget, [], method, sample);
    delete method,sample;
},'', {requires:["base","widget"]});

有了以上三個部分，這樣就算完成了一個簡單的 Widget 了，這個 widget 會産生一個按鈕，而在點了按鈕之後，widget 將會被隱藏。

使用 widget & Demo

接下來要開始使用剛剛寫好的 Widget ，我們只要 new sample ，然後傳入 srcNode 這個參數即可， srcNode 是指 widget js 要與 html 連結的 id ，我在一開始就已經在 html 中定義 id="sample" ，所以用 #sample ，代表 widget 會去連結 sample 這個 html node。

widget.html

<script>
YUI().use("node","sample",function(Y){
    var s = new Y.sample({
        srcNode: "#sample",
    });
    s.render();
 
})
</script>

render

YUI Widget 一開始都必須執行 render 這個 function， render 的主要功能，是為了幫 html 補上一些基本的 className ，這樣才方便 YUI 的操作，render 前要先設定 attribute srcNode (source node)，這個 srcNode 要給他一個獨立的 id ，如 #widget，執行 render 後，YUI 會自動去找出 srcNode 指定的 html tag，並給 html tag 預設的 className, event。

執行 render 前的 html

這裡我建立一個簡單的 html tag ，命名為 sample ，並分成三個區塊，分別是 head, body, foot。

Widget 預設 Method

YUI Widget 預設已經宣告了一些 Method ，並定義執行的時間點。

init Method

new Widget Object 時，會自動執行 initializer。
YUI 會自動 register 一個 Object ，並記錄在 YUI 自定的 Array 裡，並且 YUI 會自動産生一個 unique id 存在 _instances 的變數中。
執行 parse html ， YUI 為了能夠新增 className Before Widget Render

Widget Header

Widget Body

Widget Footer

執行 render 後的 html

After YUI Widget Render

<div id="yui_3_7_2_1_1358786231445_13" class="yui3-widget yui3-sample" style="height: 50px;">
   <div id="sample" class="yui3-sample-content yui3-widget-content-expanded">
       <div class="hd">Widget Header</div>
       <div class="bd">Widget Body</div>
       <div class="ft">Widget Footer</div>
   </div>
</div>

從html 的變化中，可以知道，YUI 替我建立的 html 最外層加上一個 bunding box ，並自動産生一個 id = yui_3_7_2_1_1358786231445_13 ，另外又新增一個 className [yui3-widget] ， style 的部分，則是因為我 new sampleWidget 這個物件的時候，指定了 height = 50px ，YUI 也會在 render 的時候，一起産生。

其它 Method

widget.render() , fire event: RENDER
widget.hide() : 增加 classname: yui3-sample-hidden (widget name = sample)
renderer : call _renderUI(), renderUI() , _bindUI(), bindUI()
_renderUI : call _renderBoxClassNames , _renderBox

網頁好讀版

This post was last modified by puritys 2016/09/25

我討厭 YUI 3 .....第五天 Ajax IO

我討厭 YUI 3 .....第六天 Slider