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

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

怎么说 WinHTTrack 强大呢?比如说这个例子,我们当前要对付的是 Ext JS Core Manual页面 ,普通方法(包括 ScrapBook)摘取回来之后,不能加载其中的正文。估计原因是 ScrapBook 不能分析 XHR 的缘故,就无法获取内容正文。换 WinHTTrack 试试?嗯,摘取回来了,但直接打开还是不行,部署在 IIS 中,OK 啦,跟浏览 extjs.com 的一模一样!

这就是该工具的强大之处,离线浏览器的功用就应该在于此。不过单单为下载一张页面而使用它好像有点大材小用,因为 WinHTTrack 本身可以下载整个网站的。可是话又说回来,怎么在 WinHTTrack 中只选择某一页面下载,不下载其它连接, 这一点小弟我还不知道,希望熟悉的同志相告。

值得一提的是,WinHTTrack 是开源项目,主页在:http://www.httrack.com/

一、Manual Widget

言归正传,我们说说这个刚新鲜拿回来的 Manual Widget(点击以下图片可以看到该 Wdiget 演示):


Manual 效果如上图。接着看看这个 Manual 的内部原理。打开源码 overview.js,看到作者是 Tommy,一个不知名的官方人员。乍看一下,Ext.app.Overview 不算复杂,我们转向 HTML 去了解结构,回过头来再看 JS。Manual Widget 当前支持两级的菜单。列表元素 ul#manual-nav 为左边的导航菜单栏目,子元素 li.group group-expanded group-active是第一级的菜单,该菜单的“<a class="group-expand-btn">Expand Group</a>”为固定的元素,每一个菜单中都会有的,表征为菜单的“按钮”。而“<a class="group-title" href="content/overview.html">Overview of Ext Core</a>”就是菜单的标题;同级的 ul#manual-nav 再嵌套一个列表元素 ul#group-sections,存放二级菜单。二级菜单中的 A 连接指向的“content/overview.html#download”便是内容正文,#XXX 表示指定的区域是哪一块。

对 Widget 结构比较熟悉后,我们进入 JS 源码。打开 js/overview.js,发现启动该程序的是 Ext.onReady(Ext.app.Overview.init, Ext.app.Overview);。作者把该 Widget 写成单例的模式了。init() 函数如下:

Widget 与 JS 脚本之间透过 id 或 class 属性操作控制。和函数其他的地方一样,id、class selector 等的 HTML 是写死的,作者并没有进一步抽象出来。故此,我们变动了HTML页面 id 或 class 的话,就在 widge t对象本身的源码上修改。

建议 Manual Widget 可作说明书、简报等的 UI 用途。

二、Carousel

如果说 Manual Wdiget 的菜单是垂直布局的,那么接着下来介绍的 Carousel Widget 便是水平布局的。—但是请打住,尽管两者的“外观”上可以作这样一种转换(shift),但真正来说,下面的 Widget 其实是扩展 Carousel 的应用。如下Widget首次出现在介绍 Ext Core 的博文 中。点击以下图片可以看到该 Wdiget 演示。

至于 Carousel 是什么词儿?根据 Google 大神给出的翻译如下:1 . 旋转木马    2 . 一连串的繁忙活动;走马灯似的更迭。相比之下,我宁愿更喜欢用“画册 Gallery”去表示该意涵,不知是否尚有商榷之处?因为实际上,对于怎么浏览一批对象,把对象陈列出来,运行这样的 UI 就是 Carousel 了。一般而言,Carousel 应具备自动播(auto-play)、动画过渡(animations)、自定义导航内容(custom navigation content)等等的功能。而我们现在看到的这个例子是扩展 Carousel 后一个特例。实际上它分为上下两部分,上面的解释说明和下面的图片导航。上面的就是原本 Carousel Widge t部分,如下对应的 HTML:

当然余下的 div.carousel-item 还有更多。这些 div.carousel-item 便是候选的内容,每一时刻只出现一项,即 div.carousel-item里面的内容。怎么触发内容显示呢?就是下半部分的 Widget 通过事件触发。下半部分算是扩展 Carousel Widget 的地方了。HTML 结构如下:

该部分就是简单罗列图片。通过 div#carousel-navigation-shortcuts.click事件触发上半部分内容的变动,如下的定义:

其中,登记该单击事件的时候,一定要{ delegate: 'img' } 指定 img 元素才可以接受该事件。var shortcuts = Ext.query('#carousel-navigation-shortcuts > img'); 是查询元素集合方法,返回 HTMLElement [] 的类型的数组,供事件处理函数中的 var index = shortcuts.indexOf(this.dom); 中的匹配使用。找到用户选定的 index 之后,就执行 carousel.setSlide(index); 指定哪一项内容显示。

接下的 carousel.on("change",……事件就是控制“箭头”左右移动的事件。另外,Ext.ux.Carousel 类还有 'beforeprev','prev','beforenext','next','play','pause','freeze','unfreeze' 这些事件,允许用户进一步扩展。

以上JS就是创建新 Ext.ux.Carousel 实例的过程,作者写在 HTML 文档中。应该说这是比较高阶的应用,那么追根朔源,能不能有比较简单的 Carousel 的应用呢?不错,Ext JS Core 早就为我们准备好了。Ext.ux.Carousel,标准 Ext.util.Observable的子类,我们还原到普通的应用。如下的 Demo,点击图片直接进入演示

 

例子中有三个不同的 carousel 应用,第一个是简简单单的带导航栏的画册,实现语句:new Ext.ux.Carousel('simple-example');这一行。simple-example 是图片的 div 容器,图片都是预加载的,因为图片数量较多的话,应该考虑扩展或 override Carousel 类,修改预先全部加载的模式。第二个例子消失了导航栏,是自动播放的;第三个例子就是连续不间断的过渡,适合于放置文本。如下是配置的详细情形:

比较起 Carousel 第一个例子,无论使用方式还是出来的效果都很不同,当然是“画册”的应用比较简单、直观。同一个基类,做出来的 UI Widget 可以如此别致不同,不得不强调一下人家复用代码之奇……值得效法。

(待续下篇……)

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

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