做自由落體運動的JSF組件,使用javascript打造富有個性的漂亮組件——QFaces

              使用javascript打造富有個性及物理特性的JSF組件。
          在1.4中修正并調(diào)整了一些QFaces中的js代碼之后,繼續(xù)除bug及增加功能?,F(xiàn)在是1.5beta??梢栽诰€看Demo,并且現(xiàn)在效果更好。
              打算在1.5中增加一個基本 的ajaxSupport組件或是日歷組件并繼續(xù)調(diào)優(yōu)性能,并增加一個style文件,更好的統(tǒng)一下樣式,現(xiàn)在已經(jīng)慢慢形成自己的風格。在增加功能的 同時考慮實用與性能,用戶友好,及可擴展等。在1.4后的一段時間又使我對編程的認識提高了不少,但不只是編程上的,包括很多其它方面的。
              好了,繼續(xù)。QFaces的js函數(shù)庫最近又增加了不少,這些都是自己慢慢增加上去的,為了打造富有個性的組件,最近又添了兩個主要函數(shù)。有朋友問為什么不使用ext或者使用其它現(xiàn)成的js 庫。說真的,我還沒有使用過ext,不是很了解。我喜歡自己寫核心的東西,因為只有自己寫才能把它玩轉(zhuǎn)得更好。在寫不了的情況下,才會借鑒或使 用,在俱備足夠知識之后,我喜歡重復(fù)造輪子。我并不認為重復(fù)造輪子就是錯的,即使自己可能造得不好,但并不是絕對沒有收獲。

              新增加的兩個主要js函數(shù):

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

          id -> 目標組件id,如某個div,或table的id等。
          action -> "show", "hide" 展示方式,默認show, 顯示或隱藏目標組件
          direction -> "width","height","both" ,展示方向,默認height,可以從水平,垂直,或同時兩個方向伸展或收縮。
          G -> 重力加速度,原為0.006,在幾次調(diào)整之后以0.006與高度的比率作為默認, 為什么不是9.8?——因為這里不是地球,是QFaces星球。并且時間也不是以秒為單位,而是毫秒。所以設(shè)在0.006左右效果較好。

          函數(shù)可以讓目標組件如“div”有一個富有彈性的展示效果,使用了自由落體的定理,所以在落下及彈起都有一個勻加速及勻減速的過程,對stepArr數(shù)組進行設(shè)置可以增加效果。 簡單的使用方式可以這樣: QFaces.accDisplay(id), 其它參數(shù)按默認,則將以垂直加速富彈性的方式顯示目標組件。

          QFaces.facesMakeFrame(id)

          這個函數(shù)可以給任意組件id添加一個邊框,包括div,table,可見的,不可見的等,甚至button,input...這個函數(shù)相對簡單得多,但是很方便,效果也非常好,在QFaces組件庫下可以直接調(diào)用,里面捆綁了8張小png作為組件邊框,這是我在photoshop中做的圖,然后切割而成的,可以很方便的替換,共4個角4個邊。如果單獨使用,那么需要指定這些圖片的位置。并約束一下左上角及右下角的寬高就可以了,。單用CSS也可以做出圓角及陰影效果,但是再怎么做也沒有photoshop做出來的效果好。

          函數(shù)原形:

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

          QFaces.facesMakeFrame = function(id)


          這兩個函數(shù)都在IE6,7,8,F(xiàn)ireFox3, Chrmoe下測試通過,其它的沒有測試。另人意外的是chrmoe的性能非常好,從網(wǎng)頁裝載或js上的速度都是最快的。性能比較如下:Chrmoe > FireFox > IE,
          IE6下的效果及性能是最差的。IE7,8也沒有好到哪里去。IE8標準模式存在Bug,IE8的兼容模式還可以。FireFox的友好程度最高。Chrmoe可以繼續(xù)體驗,性能感覺很好。
          另外QFaces.js新增了不少其它輔助函數(shù)。以下是兩個使用了該函數(shù)的組件,現(xiàn)在組件有了浮動的陰影,能完美隨意拖動,并且富有彈性的伸縮展示(在1.4中是漸隱漸現(xiàn)的展示效果)可以看到加了邊框的效果比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 閱讀(1759) 評論(1)  編輯  收藏 所屬分類: JSF

          評論

          # re: 做自由落體運動的JSF組件,使用javascript打造富有個性的漂亮組件——QFaces 2009-04-29 20:14 koumei

          這個不錯。  回復(fù)  更多評論   

          導(dǎo)航

          統(tǒng)計

          公告

          文章原創(chuàng),歡迎轉(zhuǎn)載
          ——轉(zhuǎn)載請注明出處及原文鏈接

          隨筆分類(60)

          隨筆檔案(33)

          最新評論

          評論排行榜

          主站蜘蛛池模板: 专栏| 玛多县| 邓州市| 台南市| 聂荣县| 怀安县| 武平县| 赤水市| 晋宁县| 天峻县| 大石桥市| 拜泉县| 思南县| 随州市| 安顺市| 湘乡市| 紫金县| 嵊州市| 讷河市| 陇川县| 沅江市| 虎林市| 澎湖县| 皮山县| 德安县| 库车县| 呼玛县| 富平县| 富阳市| 禄劝| 天台县| 思南县| 广河县| 商丘市| 吴忠市| 肥东县| 广丰县| 蓝山县| 合山市| 沅江市| 临泉县|