网页小 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 结构是怎样的:

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

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

出现的效果如下图:

 

进入 Ext.ux.Lightbox 的源码,发现其结构还是 JS Singleton 模式,所以我们调用该单例方法 register() 即可。值得稍微赞许的是,该小 widget 还是一贯 Ext JS 代码那样的干净、清晰!——可,小弟我尽管没有通读全代码,但是发现了其中一个关键的 hack!

我又发现其中hack的痕迹了,这便是“劫持”了 Obserable 类,先是 prototype 原型,后是构造器 call() 过来了,结果就是嫁接了这个单例和 Observable。这样的继承虽然可以,但小弟个人感觉而言,还是不值得提倡。

 

本文所说例子的打包文件,可以这里点击下载,大小 989 KB。

©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页