网页小 Widget 应用之 Lightbox 图片告示

现在开始谈谈 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。