现在开始谈谈 Ext JS Core,有关网页 Widget 的应用。
首先是经典的 Lightbox 效果(单击我进入演示)。Ext.ux.Lightbox 支持两种方式的登记(register()),一种是单张的图片登记的,无须多说;另外一种是批量的,就是有“上一张”/“下一张”的效果,供用户前进或者后退。应该说,这两种方式已经满足了一般 Lightbox 效果的要求,而且图片出现的时候带有动画效果,让用户有比较活泼的感觉。
- Ext.ux.Lightbox.register('a[rel^=lightbox]');
- Ext.ux.Lightbox.register('a.lb-flower', true); // true to show them as a set
不需要创建实例,执行方法 Ext.ux.Lightbox.register 就可以完成对图片添加 Lightbox 的效果。怎么选择页面中哪些图片呢?答案还是 CSS 选择符的使用(CSS Selector),如上面 register() 两个的用法之中第一个参数都是 CSS 选择符。如上面第一项的 a[rel^=lightbox],就是选择 A 元素必须具有 rel 属性为 lightbox 的,符合该条件的 A 元素集合就会产生 Lightbox 的效果。A 是连接,其 href 指向就是 Lightbox 图片显示的内容。
我们可以看看第一种方式其 HTML 结构是怎样的:
<div class="thumbnail">
<a href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image1.jpg" mce_href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image1.jpg"
rel="lightbox">
<img height="72" alt="Columbine" src="Ext Lightbox Example.files/thumb1.jpg" mce_src="Ext Lightbox Example.files/thumb1.jpg" width="120"></a>
</div>
其中 title 属性是可选的。如设置了的话便会在 Box 下方出现。
接着第二个用法,送入 true 的第二个参数,表示这次登记的是多张图片。例如我们看看下面的 A 元素,就多了 class="lb-flower",跟 'a.lb-flower' 的 CSS 选择符相匹配。
<div class="thumbnail">
<a class="lb-flower" title="This is a narrow image with a long description. Notice how the bottom of the lightbox automatically expands to accommodate the longer caption."
href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image6.jpg" mce_href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image6.jpg">
<img height="72" alt="Periwinkle" src="Ext Lightbox Example.files/thumb6.jpg" mce_src="Ext Lightbox Example.files/thumb6.jpg" width="120"></a>
</div>
<div class="thumbnail">
<a class="lb-flower" title="Press 'Esc' to close the gallery." href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image7.jpg" mce_href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image7.jpg">
<img height="72" alt="Daffodil" src="Ext Lightbox Example.files/thumb7.jpg" mce_src="Ext Lightbox Example.files/thumb7.jpg" width="120"></a>
</div>
出现的效果如下图:
进入 Ext.ux.Lightbox 的源码,发现其结构还是 JS Singleton 模式,所以我们调用该单例方法 register() 即可。值得稍微赞许的是,该小 widget 还是一贯 Ext JS 代码那样的干净、清晰!——可,小弟我尽管没有通读全代码,但是发现了其中一个关键的 hack!
init: function() {
……
if(!initialized) {
Ext.apply(this, Ext.util.Observable.prototype);
Ext.util.Observable.constructor.call(this);
this.addEvents('open', 'close');
this.initMarkup();
this.initEvents();
initialized = true;
}
},
我又发现其中hack的痕迹了,这便是“劫持”了 Obserable 类,先是 prototype 原型,后是构造器 call() 过来了,结果就是嫁接了这个单例和 Observable。这样的继承虽然可以,但小弟个人感觉而言,还是不值得提倡。
本文所说例子的打包文件,可以从这里点击下载,大小 989 KB。