2011
Dec
23

網頁好讀版

前言: Node Plugin

這篇本章會介紹如何製作 YUI Plugin ,使用 YUI Plugin ,Plugin 到底是什麼呢? 相信這個字眼大家都很常見,Plugin就是外掛,在YUI3 中,他可以掛在 node(html tag object) 身上的,所以要先取得 node 物件,再把 plugin 功能掛上去,在開始使用之前呢,要記得載入 plugin 喔 (YUI().use('plugin') )。

YUI Node Plugin 屬性

  • NS : namespace , 命名空間,簡單說就是取一個不會跟別人衝到的名稱
  • NAME : Plugin 名稱
  • ATTRS : 一些相關的屬性? 待補充

YUI Node Plugin Prototype

Node Plugin 的使用非常的簡單,只要使用 Javascript 一般的 prototype 功能,將新的 function 寫進 prototype 即可完成一個簡單的 node plugin。

現在就寫一個簡單的 Javascript,指定將所有的 anchor 變成灰色,首先定義一個 function Object (在 Javascript 的世界裡 , function = object , object = function) , 接著給他一個 Namespace ,之後要使用這個 Plugin 時,都要用這個 Namespace 來呼叫,最後再寫一段將 anchor 變成灰色的語法。

範例
  1. YUI().use('node', function (Y) {
  2. function NewMethod(config) {
  3. this._node = config.host;
  4. }
  5. NewMethod.NS = "proto"
  6. NewMethod.prototype.disable =function(){
  7. var node = this._node;
  8. var nodes = node.all("a");
  9. nodes.setStyles({color:"#cecece"}); //Give gray color to node's font.
  10. }
  11. }

把 Plugin 綁進 Node 裡

上一段已經把 Plugin 都寫好了,這裡就直接把 Plugin 掛上Node,掛上去之後 Node就可以透過剛剛給定的 Namespace 來操作新的功能。

  • node.plug : 綁定 plugin 語法
  • node.unplug : 拿掉 plugin 語法,這個語法只會拿掉 plugin 的 method,不會將顏色變回來,unplug 會執行 destroy method ,如果你要把顏色變回來,就得實做 destroy method,以及繼承 YUI 的 Y.Plugin.Base ,這裡只介紹最簡單的 Node Plugin ,並沒有繼承 Y.Plugin.Base。
範例
  1. var container = Y.one(".box");
  2. container.plug(NewMethod);

執行 disable,如果你想要使用 Plugin ,必須先知道 Plugin 的 Namespace ,上一段已經定義 plugin namespce = proto ,所以我們使用 proto.disable() 來操作 plugin。

Example
  1. container.proto.disable();

Example Demo

多個plugin應用

YUI 可以針對同一個 Node,綁上無限個 plugin,你想要什麼功能,就綁上什麼功能即可,非常的實用,如果發現 plugin 的功能不夠,你可以選擇自已開發新的 plugin ,或是使用 extend 的方式,強化 plugin的功能 ,接下來要實作綁上「縮放」和「拖拉」 的 plugin。

  • 拖拉 :library 需載入 dd-plugin
  • 縮放 :library 需載入 resize-plugin
範例
  1. YUI().use("node","resize","resize-plugin","dd-plugin",function(Y){
  2.  
  3. var s= Y.Node.create("<div>測試使用外掛功能,掛上拖拉與縮放</div>"); //建立一個新的 Node
  4. s.setStyles({'background':'#EEEEEE',width:"200px",height:"150px",padding:"10px",position: "absolute",border: "2px solid #A2A2A2"});
  5. s.plug(Y.Plugin.Resize); //綁縮放 plugin
  6. s.plug(Y.Plugin.Drag); //綁拖拉 plugin
  7. s.appendTo("body");
  8. //固定比例縮放
  9. var re=new Y.Resize({node:"#result"});
  10. re.plug(Y.Plugin.ResizeConstrained,{preserveRatio: true,wrap: true,maxHeight:670,maxWidth:800});
  11. re.render();
  12. });

網頁好讀版