- 浏览: 157886 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
坏猪猪:
Document doc = Jsoup.connect(ur ...
android中jsoup解析html的几个例子 -
我很温柔但是不丑:
你好。看了您的例子,实践了一下,有问题啊?没有解析出来数据?怎 ...
android中jsoup解析html的几个例子
插件让你可以无侵入地为宿主对象(host object)添加功能。宿主衍生自Base类。node、widget等对象都是宿主对象。我们可以继承Plugin.Base类创建插件类。但是这也不是必须的,可以通过其他方法创建插件类。
插件类用来向组件实例中添加小块功/特性,不需要将这些功能/特性整合进组件类中,组件类甚至可以完全对这些功能特性一无所知。这样,我们就可以在组件实例层级使用这些功能/特性,避免为实现某些功能特性而把而组件类构建得很大,或者为了实现不同的功能组合构建多个不同的组件类。
引入YUI种子文件和配置YUI实例就不累述了,详见 YUI 3: YUI 全局对象。
以下内容是关于如何创建和使用插件类的,包含如下部分: 对于简单的插件类,如果它们没有自己的事件和属性,不通过监听宿主对象的事件来修改宿主对象的默认行为,不重写宿主对象的方法的话,插件类可以只是简单的原生javascript类。 插件类唯一必须的是一个用作名字空间的静态属性“NS”。该静态属性的值用作从宿主实例上访问插件实例。也就是说,一旦插件被 “插到”宿主实例上后,可以通过hostObj.namespace得到plugin实例的引用。 当插件被“插到”一个宿主实例上后,插件的实例被创建,一个对宿主实例的引用被添加到传入插件构造器的配置对象上。这样,插件实例可以引用宿主实例。(当一个插件被从宿主实例上“拔出”后,该插件实例被销毁。) 下面代码展示在Node对象上插入“AnchorPlugin”插件:
通过NS属性的值,可以在Node实例上访问到插件实例:
上述的简单插件类能满足简单功能/特性。但是,当你想在插件类中封装更复杂的功能/特性时,对attributes和events的支持就派上用场了。对于许多插件而言,你将需要改变宿主实例的默认行为(比如:一个Animation 插件可能需要改变widget类的默认show/hide行为)。 对于这样功能复杂的插件,你应该通过扩展Plugin.Base类来构建它。 插件类是Base的子类,因此,它也支持attribute、生命周期方法、自定义事件。另外,我们还可以在插件类中监听响应宿主实例触发的事件,或者在宿主实例某方法执行之前,注入插件自定义的逻辑代码(基于YUI3的AOP基础结构)。Plugin.Base类还在它的“host”属性中存放对宿主实例的引用,可以在插件实现中通过this.get(“host”)访问到宿主实例。 你可以像扩展Base类一样扩展Plugin.Base类。需要注意的是扩展Plugin.Base类时,宿主实例被自动设置为插件类的“host”属性的值。而在简单的插件类中需要手动地通过构造器的配置对象把宿主实例设置成插件类的属性值,这样才能在插件类中访问到宿主实例。 高级插件类的结构和其他扩展自Base类的类是一样的。只是多了一个NS静态属性。 (see the Basedocumentation for details about NAME and ATTRS).
扩展Plugin.Base类最大的好处就是可以通过Plugin.Base类提供的onHostEvent和afterHostEvent方法来监听宿主实例触发的事件,还可以通过beforeHostMethod和afterHostMethod方法来改变宿主实例的方法。 通过以上由Plugin.Base类提供的方法来改变宿主实例的默认方法,而不是通过修改宿主类来改变宿主实例的默认方法的好处是:通过“插入”方式做了修改的方法在“拔出”以后,会被还原。这很重要,插件被从宿主实例身上“拔出”后,应该被完全地销毁。 正如上述所说,衍生自Plugin.Base类的插件类,可以监听并响应宿主实例触发的事件。 比如,当wideget被渲染的时候,他们都会触发“render”事件。你的插件类可能需要知道这个“render”事件是什么时候发生的,这样它才可以在宿主实例渲染的HTML代码中插入一些自定义的HTML代码。可以使用afterHostEvent方法实现:
创建插件
简单的插件
以下是一个简单的插件类://这个AnchorPlugin插件被设计成Node实例的插件 (宿主是Node实例)
function AnchorPlugin(config) {
// 存放宿主实例(Node实例)的引用,以便插件的方法使用。
this._node = config.host;
}
// 被-插入Node实例后,在Node实例的"anchors"属性上能访问到插件
AnchorPlugin.NS = "anchors"
AnchorPlugin.prototype = {
disable: function() {
var node = this._node;
var anchors = node.queryAll("a");
anchors.addClass("disabled");
anchors.setAttribute("disabled", true);
}
};
var container = Y.one("div.actions");
container.plug(AnchorPlugin);
container.anchor.disable();
高级插件类
扩展Plugin.Base
// A plugin class designed to animate Widget's show and hide methods.
function WidgetAnimPlugin(config) {
WidgetAnimPlugin.superclass.constructor.apply(this, arguments);
}
// Define Static properties NAME (to identify the class) and NS (to identify the namespace)
WidgetAnimPlugin.NAME = 'widgetAnimPlugin';
WidgetAnimPlugin.NS = 'fx';
// Attribute definitions for the plugin
WidgetAnimPlugin.ATTRS = {
animHidden : {
...
},
animVisible: {
...
}
};
// Extend Plugin.Base
Y.extend(WidgetAnimPlugin, Y.Plugin.Base, {
// Add any required prototype methods
});
Plugin的监听器
事件
// 一个插件类,设计成将widget的show/hide方法改成动画。
function WidgetAnimPlugin(config) {
//...
}
WidgetAnimPlugin.NAME = 'widgetAnimPlugin';
WidgetAnimPlugin.NS = 'fx';
WidgetAnimPlugin.ATTRS = {
animHidden : {
//...
},
animVisible: {
//...
}
};
// 扩展Plugin.Base,重载默认方法_uiSetVisible。该方法原被用作改变显示状态。
Y.extend(WidgetAnimPlugin, Y.Plugin.Base, {
initializer : function(config) {
// 用自定义动画方法重载Widget的_uiSetVisible方法。
this.beforeHostMethod("_uiSetVisible", this._uiAnimSetVisible);
},
_uiAnimSetVisible : function(show) {
// hide/show.用为插件配置好的动画实例,把show/hide方法改成动画,替换原来改变显示状态的方式。
if (this.get("host").get("rendered")) {
if (show) {
this.get("animHidden").stop();
this.get("animVisible").run();
} else {
this.get("animVisible").stop();
this.get("animHidden").run();
}
// 阻止默认方法执行。
return new Y.Do.Prevent();
}
}
});
发表评论
-
yui3:widget 例子_widget-extend
2011-06-26 16:07 2569<!DOCTYPE HTML PUBLIC &qu ... -
yui3:widget
2011-06-18 11:36 3234Widget 类包含什么? widget类的结构和 ... -
YUI3:node2
2011-06-18 11:23 1YUI的Node功能为获取、 ... -
YUI3:Base
2011-06-16 20:39 1539Base类被设计成基础类 ... -
YUI3:Attribute
2011-06-16 10:30 1492YUI的Attribute功能允 ... -
YUI 3:Event
2011-06-15 22:23 15301. 要使用Event,首先要引入YUI3的种子文件: &l ... -
YUI3:Node
2011-06-15 15:59 2142YUI的Node功能为获取、创建、操作DOM节点提供很易懂的方 ... -
yui3 :Get 例子
2011-06-15 15:43 1293Getting a Script Node with JSON ... -
YUI:globle object
2011-06-13 11:52 1639YUI模块是YUI3中的单一核 ... -
YUI3:GET
2011-06-12 22:25 1635Get 工具提供了一个,在 ... -
YUI3:DataSource
2011-06-12 21:53 1245DataSource 工具,通过广泛支持的协议,为从不同的资源 ... -
YUI3:DataSchema
2011-06-12 20:57 886DataSchema Utility 应用一个给定的模式 ,以 ... -
YUI3:Cooke
2011-06-12 16:43 1198YUI Cookie工具为与cookies ... -
yui3 :datatype
2011-06-12 12:02 2058DataType工具为数据, ... -
YUI3:cache
2011-06-12 10:14 1236Cache 工具为存储名值对到本地JavaScript内存提供 ... -
YUI 3 周边
2011-06-11 16:46 10771.跨域请求:cross-domain 初步体验“AJAX不 ... -
YUI 3 :IO
2011-06-10 11:46 2888YUI IO是一个通讯工具,用于数据获取和内容更新,它使用X ... -
YUI 3 : json
2011-06-09 15:37 2626JSON (JavaScript Object ...
相关推荐
yuicompressor-maven-plugin用于maven的压缩js用
yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...
eclipse 中maven项目中的 *.js *.css 文件使用 yuicompressor-maven-plugin 插件压缩
struts2 的 yahoo yui ajax 插件jar包及配置说明
maven打包使用yui压缩css和js文件
这是由于先前的压缩器(jekyll-press)不兼容CSS3而创建的,这让我皱了皱眉。 注意:这是我正在学习的第一个宝石,因此非常感谢您提供反馈。 **现在,仅在环境中设置了JEKYLL_ENV =“ production”时,此minifier...
jar包,官方版本,自测可用
spket最新版本1.6.22破解过的。没破解版本个人也可以免费使用,只是不能修改设置。 参考了网上的破解方法,把成功的版本...ria开发必备,可以配置Extjs, YUI, jQuery, dojo等等常用javascript库的自动提示和完成功能。
墓碑整合JRebel支持本地开发控制台支持( ) Maven支持通过yuicompressor-maven-plugin进行CSS / JS压缩使用maven-gae-plugin 远程API /批量加载程序支持Sitemesh集成春天3 JPA支持JSON / AJAX集成(杰克逊) JSR-...
yui3 tern 插件。 精简版 按照你想要的 [editor plugin]([tern-editor]: http://ternjs.net/doc/manual.html#editor ) 的安装说明安装 Tern 后,转到安装Tern 包的地方(或Tern repo被克隆)并运行 $ npm install...
体积小巧(eclipse plugin: 3.5M),价格优惠(免费) 主要功能: 1、Ext 对象的自动完成 2、Ext 组件对象的查看 3、JavaScript Lib 对象的自动识别 4、JS文档的智能分析与阅读 这是个振奋人心...
3. 插件篇 6 3.1. 安装包管理器 6 3.2. 高亮类 7 3.2.1. Bracket Highlighter 7 3.2.2. CNPunctuationAutopair 7 3.3. Markdown 7 3.3.1. MarkdownEditing 7 3.3.2. Markdown Extended 7 3.3.2.1. 需要Monokai ...
2.如果采用了响应式布局,使用media query查询不同分辨率下的table宽度,然后指定大小即可,在ie8下支持css3和响应式可以使用 selectivizr-min.js和respond.js。 代码如下 [removed][removed] <script src=${LUI...
layer(全称:jQuery-plugin-layer),一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(菜鸟级前端攻城师)。layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力。其意义在于,可以让您...