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

三、Menu

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

Ext.ux.Menu的父类就是Ext.util.Observable,为其提供了基于事件模型的基础。该Widget的加入事件有:'显示事件show','隐藏事件hide','点击事件click'。登记相应的事件,我们可以哪一项被用户点击触发了。Ext.ux.Menu支持垂直/水平的两种状态:

既然Menu提供了新的事件,我们动手(“眼”)研究源码来看看是怎么触发事件,来留意一下initEvents():

这里的Ext.util.DelayedTask目的主要有两个:一个是制造时间差,另外一个则是触发show/hide的事件。由于小弟一时笔拙,时间上也不允许,实在不能在这里详细描述,好在从源码可以看到,在关键的一些地方,源代码的注释其实写得挺详细的,提供足够的信息允许我们好好的了解它。

四、Tabs

如下是Tabs的截图。不妨说说它这个Widget的配色,浅灰透些许赤加浅蓝色属冷色系,做DEMO不错啦。

Tabs Widget是我遇到的Widget中最简洁的几个之一,仅仅五行,一个手巴掌就数完,不多也不少,——注释占的还多:

就这五句话,应用Ext Core做出了一个做朴素的Tab控件。其原理是CSS控制HTML全隐藏,只保留一个最初显示的(此刻容器CSS样式为displayblock ; 的状态),然后select目标元素(多个元素一下子获取而来),登记显示的事件。与相比Ext.TabPanel的复杂程度简直判若云泥啊。再说HTML倒也好理解,每个Tab分配“tab-content”的Class,默认是display:none的,即不显示的;如果要现实,就通过radioClass('tab-show')方法加上显示的样式,这是一个取反的样式方法,每一个Ext.Element实例都会有的实例方法。

既然提到CSS,就不得不说CSS选择符的应用,实在是高强度的普遍使用。纵观Ext各Widget,Ext组件也好, Core写成的Widget也罢,不夸张地说,处处渗透着CSS  Selector的应用, CSS Selector等于是沟通UI结构与行为的通道,我们写JS控制widget,很大程度是以CSS Selector为选取的对象。对于JS代码本身来说,CSS Selector就是定位于HTML的依据。

注意:Tab Widget在IE6中,候选栏目与Tab Body不连续,应该明显是一个浏览器兼容的BUG。

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

2007年的时候,就有人采用Ext类似于jQuery角色的网页小script,用来丰富、点缀一下页面。那时还没有Ext Core,问世还是后来的事情。拉着庞大的ext-all.js做JS很多人都是试试玩,抱着实验性质的心态。在我备份的代码中,就有Carousel的widget(原文在这儿 ),作者也是声明这是“the Experimental Version”的。的确,600KB的JS焉能简单?不过随后,精简版的Ext Core以较清晰的定位推出后,人们立刻觉得做Web站点不应该用ExtJS来做,不仅仅是技术上问题,伴随Ext Core发布的背后,还是市场接纳程度、开源许可等衍生出来的问题。

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