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

最新推荐文章于 2018-11-05 17:04:37 发布

sp42a

最新推荐文章于 2018-11-05 17:04:37 发布

阅读量2.9k

点赞数

分类专栏： Ext JS 文章标签： class ext css prototype function

本文链接：https://blog.csdn.net/zhangxin09/article/details/5101250

版权

Ext JS 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

现在开始谈谈 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 结构是怎样的:

其中 title 属性是可选的。如设置了的话便会在 Box 下方出现。

接着第二个用法，送入 true 的第二个参数，表示这次登记的是多张图片。例如我们看看下面的 A 元素，就多了 class="lb-flower"，跟 'a.lb-flower' 的 CSS 选择符相匹配。

出现的效果如下图:

进入 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。