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. });

网页好读版