网页小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()：

initEvents: function() { this.showTask = new Ext.util.DelayedTask(this.showMenu, this); this.hideTask = new Ext.util.DelayedTask(function() { this.showTask.cancel(); this.hideAll(); this.fireEvent('hide'); }, this); this.el.hover(function() { this.hideTask.cancel(); }, function() { this.hideTask.delay(this.delay*1000); }, this); // 凡是遇到有下级菜单的菜单项，就应该为其登记一个mouseenter的事件。这里select()可选取所有的符合'li.ux-menu-item-parent'的元素。 this.el.select('li.ux-menu-item-parent').on('mouseenter', this.onParentEnter, false, {me: this, delay: 5}); // 隐藏其他子菜单和移除hovers // listen for mouseover events on items to hide other items submenus and remove hovers this.el.on('mouseover', function(ev, t) { this.manageSiblings(t); // 尽管菜单项没有子菜单的，但有可能还会触发兄弟项的显示事件。要防止的话，执行Ext.util.DelayedTask.cancel方法。 if(!Ext.fly(t).hasClass('ux-menu-item-parent')) { this.showTask.cancel(); } }, this, {delegate: 'li'}); this.el.on('click', function(ev, t) { return this.fireEvent('click', ev, t, this); }, this, {delegate: 'a'})},

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

四、Tabs

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

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

Ext.onReady(function(){ Ext.select('.tab-buttons-panel').on('click', function(e, t) { Ext.fly(t).radioClass('tab-show'); Ext.get('content' + t.id.slice(-1)).radioClass('tab-content-show'); }, null, {delegate: 'li'});});

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

.tab-content { top: 27px; position: relative; border-width: 0px 1px 1px 1px; border-color: #b8cbde; border-style: none solid solid solid; background-color: #e1e6ee; display: none; padding: 15px; padding-bottom: 0px;}.tab-content-show { display: block;}

既然提到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，用来丰富、点缀一下页面。那时还没有ExtCore，问世还是后来的事情。拉着庞大的ext-all.js做JS很多人都是试试玩，抱着实验性质的心态。在我备份的代码中，就有Carousel的widget（原文在这儿），作者也是声明这是“the Experimental Version”的。的确，600KB的JS焉能简单？不过随后，精简版的ExtCore以较清晰的定位推出后，人们立刻觉得做Web站点不应该用ExtJS来做，不仅仅是技术上问题，伴随ExtCore发布的背后，还是市场接纳程度、开源许可等衍生出来的问题。