做自由落体运动的JSF组件,使用javascript打造富有个性的漂亮组件——QFaces

    使用javascript打造富有个性及物理特性的JSF组件。
在1.4中修正并调整了一些QFaces中的js代码之后,继续除bug及增加功能。现在是1.5beta。可以在线看Demo,并且现在效果更好。
    打算在1.5中增加一个基本 的ajaxSupport组件或是日历组件并继续调优性能,并增加一个style文件,更好的统一下样式,现在已经慢慢形成自己的风格。在增加功能的 同时考虑实用与性能,用户友好,及可扩展等。在1.4后的一段时间又使我对编程的认识提高了不少,但不只是编程上的,包括很多其它方面的。
    好了,继续。QFaces的js函数库最近又增加了不少,这些都是自己慢慢增加上去的,为了打造富有个性的组件,最近又添了两个主要函数。有朋友问为什么不使用ext或者使用其它现成的js 库。说真的,我还没有使用过ext,不是很了解。我喜欢自己写核心的东西,因为只有自己写才能把它玩转得更好。在写不了的情况下,才会借鉴或使 用,在俱备足够知识之后,我喜欢重复造轮子。我并不认为重复造轮子就是错的,即使自己可能造得不好,但并不是绝对没有收获。

    新增加的两个主要js函数:

QFaces.accDisplay(id, action, direction, G);

id -> 目标组件id,如某个div,或table的id等。
action -> "show", "hide" 展示方式,默认show, 显示或隐藏目标组件
direction -> "width","height","both" ,展示方向,默认height,可以从水平,垂直,或同时两个方向伸展或收缩。
G -> 重力加速度,原为0.006,在几次调整之后以0.006与高度的比率作为默认, 为什么不是9.8?——因为这里不是地球,是QFaces星球。并且时间也不是以秒为单位,而是毫秒。所以设在0.006左右效果较好。

函数可以让目标组件如“div”有一个富有弹性的展示效果,使用了自由落体的定理,所以在落下及弹起都有一个匀加速及匀减速的过程,对stepArr数组进行设置可以增加效果。 简单的使用方式可以这样: QFaces.accDisplay(id), 其它参数按默认,则将以垂直加速富弹性的方式显示目标组件。

QFaces.facesMakeFrame(id)

这个函数可以给任意组件id添加一个边框,包括div,table,可见的,不可见的等,甚至button,input...这个函数相对简单得多,但是很方便,效果也非常好,在QFaces组件库下可以直接调用,里面捆绑了8张小png作为组件边框,这是我在photoshop中做的图,然后切割而成的,可以很方便的替换,共4个角4个边。如果单独使用,那么需要指定这些图片的位置。并约束一下左上角及右下角的宽高就可以了,。单用CSS也可以做出圆角及阴影效果,但是再怎么做也没有photoshop做出来的效果好。

函数原形:

QFaces.accDisplay = function(id, action, direction, G)

QFaces.facesMakeFrame = function(id)


这两个函数都在IE6,7,8,FireFox3, Chrmoe下测试通过,其它的没有测试。另人意外的是chrmoe的性能非常好,从网页装载或js上的速度都是最快的。性能比较如下:Chrmoe > FireFox > IE,
IE6下的效果及性能是最差的。IE7,8也没有好到哪里去。IE8标准模式存在Bug,IE8的兼容模式还可以。FireFox的友好程度最高。Chrmoe可以继续体验,性能感觉很好。
另外QFaces.js新增了不少其它辅助函数。以下是两个使用了该函数的组件,现在组件有了浮动的阴影,能完美随意拖动,并且富有弹性的伸缩展示(在1.4中是渐隐渐现的展示效果)可以看到加了边框的效果比1.4好了很多。

在线演示:
http://huliqing-qfaces.appspot.com/qfaces-example/ui-tree.faces

http://huliqing-qfaces.appspot.com/qfaces-example/ui-saveState.faces






- huliqing@huliqing.name
- http://www.huliqing.name

posted on 2009-04-29 15:51 huliqing 阅读(1607) 评论(1)  编辑  收藏 所属分类: JSF

评论

# re: 做自由落体运动的JSF组件,使用javascript打造富有个性的漂亮组件——QFaces 2009-04-29 20:14 koumei

这个不错。  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

公告

文章原创,欢迎转载
——转载请注明出处及原文链接

随笔分类(60)

随笔档案(33)

最新评论

评论排行榜