网页小 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。

时间: 2024-10-14 07:16:27

网页小 Widget 应用之 Lightbox 图片告示的相关文章

网页小Widget应用之Carousel、Menu和Tabs(下)

三.Menu 咦!?Menu咱们不是讲过了吗?是的,Menu之前的实现是非常简单的一种,--作为较"专业"的Widget,Core还是有必要重新实现一个Menu Widget,所以送到你手上的就有这个Ext.ux.Menu.具体说,那种简单的"菜单"只是较快速地做出类似的效果,适合于某个页面的URL跳转,不够灵活,难以适合在项目中使用,比如当前架构要求的"单页面程序(One Page, One Application)",明显菜单应该可以登记事件

网页小 Widget 应用之 Carousel、Menu 和 Tabs(上)

介绍 Wdiget 之前,我想说说一个关于摘取网页的小插曲.之前我为大家介绍过摘取网页的好工具,ScrapBook .ScrapBook 在处理纯视觉的页面,也就是 CSS/HTML 的时候,表现较为满意,只不过在选择下载"JavaScript",就有那么一点力不从心了,--这不,人家也在上面说了"JavaScript may cause some problems".的确,我使用 ScrapBook 的时候真是会碰到一些页面渲染不正确的问题.那,有没有比较好的工具

网页小 Widget 应用之 extjs.com 特效介绍篇

说到这儿,便想起刚学网页的时候,使用 Dreamweaver 的一个按钮翻转的 JS,那是很典型的网页效果,说出函数名字来大伙还记得吗?--MM_preloadImages('images/2.jpg').MM_swapImage('rotator','','images/2.jpg',1)  呵呵.同样我们也可以在 Ext Core 之中轻松实现,这部分内容放在本文第三小节中为大家介绍.Update 2010.1.2 在自家页面上使用自己的库,自然不是一件稀奇的事,而且 extjs.com 的

网页小Widget应用之数据绑定新方式:JSONP

所谓JSONP,是跨域的一种访问方式,其特点在于比较方便地运行第三方的请求会话来进行跨域.在跨域这一点上,可以说是毫无顾忌的.跨域(Cross-Domain)在网络安全眼中可不是什么客气的行为.利弊兼有之,弄不好的话既不能为第三方提供访问数据的服务,又暴露了更多的安全漏洞,严重的还会引狼入室.一般的WebService中,支持JSON的还比较少,多数采用XML文档作为答应结果的格式文档.但是我们一方面知道,结合Script标签的src的自由性,却有无比的想象空间.那么能不能理由<script s

清除网页中浮动广告和动态图片的方法

  清除网页中浮动广告和动态图片的方法:我们在上网的时候经常会有一些非常可恶的网站上有很多非常可恶的浮动的漂浮的广告,它们严重阻挡了我们的视线,让我们不能正常地浏览网页内容,而且很多网站上的浮动窗口连关闭按钮都没有,根本就无法关闭,或是关闭之后几秒钟又弹出来.非常烦人,因此小编下面就跟大家介绍一下这种情况的解决方法! 操作步骤/方法: 1.打开IE浏览器,点击右上角设置按钮; 2.在弹出的下拉菜单中点击internet选项设置; 3.在弹出的对话框中选择最上方的安全标签; 4.然后单击安全标签下

小谈php正则提取图片地址_php技巧

迷上了正则,不断尝试着新花招,首先感谢TNA 的非完全输出RSS,然后再次感谢SH的强迫性学习.没有TNA,我不会去看正则,更不知道世界上有种这么牛的表达式:不是SH的死活说他不懂不知道,我也不会硬着头皮去琢磨,去改进.达到同一个目的,正则的表达方式可以不唯一,没有做不到,只有你没想到.可以这样说吧,正则就是玩设定规律,我大爱这种东西.没有比设定规律筛选东西更让我兴奋.感到awesome的了. 分享一下在php环境下使用正则提取图片地址的一些小心得: 图片网址规范的html代码无非就是 复制代码

图片保存成文件-如何将Html网页生成的二维码图片保存成PNG图片文件存放到服务器上

问题描述 如何将Html网页生成的二维码图片保存成PNG图片文件存放到服务器上 目前已实现动态生成二维码图片,生成地址:http://wx.yseasy.com/erweima_1.asp?val=yyy 但需要将该图片保存下来以方便调用,目前想到有两种方案: 1.将图片的base64位编码保存到数据库,调用时解码显示//(这种方法小菜不知该如何获取它的base64位编码) 2.将图片保存成文件存放到服务器,再将图片路径保存到数据库,再调用显示//(这种方法小菜不知道该如何将此生成图保存为文件)

网页制作技巧:清除浮动和图片水平垂直居中

文章简介:网页制作技巧:清除浮动和图片水平垂直居中. 1.如何清除浮动 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素.zoom:1也可以替换为固定的width或height 方法3: #test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;hei

c#编辑的网页 text文本框架如何插入图片和表情

问题描述 c#编辑的网页 text文本框架如何插入图片和表情 c#编辑的网页 text文本框架如何插入图片和表情就像提问框上面这种 解决方案 看你用的什么编辑器 比如Fckeditor kindeditor ueditor等等 然后google各自+"插入图片",就有结果 解决方案二: 搜索富文本框编辑器,一般都是js的,少数有net控件版的 解决方案三: 这个你得用到富文本编辑器 http://download.csdn.net/detail/happy09li/4523141 或者