网页小 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 的 JS 特效都不是那么复杂,几个函数足以完成任务了。今天继续昨晚对 widget 余庆,继续 copy and paste 她的代码来看看。当然大家也可以上 extjs.com 直接拿页面回来,但 CSS 背景图片的下载就不好寻址,推荐一下这个 Firefox 插件 ScrapBook。感觉而言,所用的 JS 代码,大体上比较鲜明的 JS 特效有菜单及简单的讯息提示(Messages),所谓 Messages,就是只有一两句的提示,但位置醒目,能起到很好的提示作用。下面就打算把这两个 JS 抠出来。

一、菜单

extjs.com 的菜单实际已不是软件定义中的“菜单”了,因为我们看到菜单中所表现的元素更为丰富,其理解方式可以说是在导航栏上添加一个 onmouseover 的事件,触发该事件就会显示“面板”,因为从 HTML 上看到,组成各项菜单的就是一个四四方方的“面板”。 呵呵,这样去实现也倒容易…以最后的 Store 一项为例,其“面板”的 HTML 结构如下:

其中,最外层 div 其样式应该是 class="flyout-menu",以归为菜单的一类,而且还要隐藏菜单 style="display: none;",默认状态下隐藏,使用的时候方才显示。介绍完结构之后,我们看看代码,也是比较简单的:

通过以上的几个步骤,就可以创建简单导航菜单,相信代码也很好理解,快点放在你的项目中使用吧!

二、Messages

Messages 就更简单了。Messages 需要定义两个容器,msg = Ext.get('msg') 和 msgInner = Ext.get('msg-inner')。

 

明显,定义新的 msgs 数组便可以修改要显示的内容。

三、Ext JS 网页特效:翻转菜单。

 * 設置反轉菜單。這是一個經典的網頁特效,需要設置如下的 CSS 樣式:
 * 註意:!important 是為FF所需的關鍵字;
 * 設置步驟:
 * 1、HTML 是:

 * 2、設置樣式display:line,li的高度,圖片的高度:
 * 註意:font-size:18px是為FF所需的關鍵字

 * 3、反轉的樣式必須是“ li元素名稱”+OnHover

执行代码:

四、小结

官方所释出的 DEMO 中 Ext JS Core,除了 LightBox,还有 Carousel、Menu 和 Tabs 新提供的 Widget。在上一讲第一讲中,我们已经谈论过 Ligiht。本文中将会看看:1、Carousel 画册控件;2、Menu 菜单;3、标签页 Tabs。了解 Ext JS 的朋友可能好奇,不是 Ext JS 里面已经有 Menu 和 Tabs 组件了吗,为什么 Ext JS Core 还会提供这两个控件呢?两者的定位明显不同,要求在 Portal 为背景的页面加入 Component/Container 等组件,光是代码足够多的了,而且维护难度大,页面逻辑复杂——吃力不讨好,因此完全没有必要,于是更加轻型的 Widget 应运而生了。

每一个特效背后所组成的 HTML/CSS/JavaScript 都是研究的对象。我们研究 HTML/CSS 是为了我们这些最终用户不断修改,以符合制作的 Widget 符合我们的要求;JS 一般是封装好的逻辑,没有额外的理由我们怎么会花时间研究它呢?而 Ext JS Core 这次释出的 DEMO 却不同,仍有相当可观之处,实在是很好的研究对象。正如首次推介的那样,“find and learn somethingnew”,大大满足了新鲜和求知的冲动,没有比这个更好的理由?

在下一讲中,有机会的话,小弟将会讲讲 Carousel、Menu 和 Tabs,希望大家多留意。

不是小弟我讨好 Ext JS,因为 DEMO 本身所宣扬的 “A minimal amount of elegant and readable code” 似乎是得到印证,——代码中都写成这样了,各位看官可以一睹为快。最后,——祝大家使用 Ext JS 祺顺!

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

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