Fixjs實踐——滾動條控件

 

Fixjs介紹

Fixjs是一款javascript界面基礎框架,主要爲開發複雜組件提供底層的框架支持。

 

基於Fixjs構建的滾動條控件

爲了能全面驗證一下Fixjs的初步成果,基於Fixjs我構建了2個滾動條控件:垂直滾動條VScroller和水平滾動條HScroller

滾動條控件主要包括:按鈕、滑塊、背景部分,滑塊能夠進行鼠標拖放,還有,要支持滾動事件的派發,是一款界面技術應用比較綜合的控件。

 

以下是示例的效果圖,灰色部分是頁面應用Application區域,它設置了屬性能夠跟隨瀏覽器大小自動調整。

                            

該示例驗證了一下幾個重要的Fixjs技術點:

l  絕對定位:控件能夠設置xy屬性進行精確的佈局定位。

l  鼠標拖動:鼠標拖動滾動條的滑塊,能夠控制滾動值。

l  事件處理:滾動事件的派發,進行滾動後續處理。

l  佈局自適應:滾動條控件實現了右邊和底邊停靠,佈局自動適應應用區域大小的改變。

l  容器與子項:滾動條作爲顯示子項動態添加到應用區域。

l  瀏覽器兼容:上述的技術點,在不同瀏覽器下效果保存一致。

 

效果演示

 

在線演示地址

 

使用時的代碼編寫效果

Fixjs設計的時候,我儘量參考了flash的框架,代碼的效果跟as3代碼非常接近,這說明經過良好、合理的封裝,javascript其實也能夠達到高級面嚮對象語言的使用效果的。

 

說說JavaScript

從邏輯上講,javascriptWeb的底層語言。

DartCofficScriptTypeScript等這些技術的出現,可以看出個巨頭對web前端技術的未來發展的定位,這些語言的出現其中一個初衷是爲了提高web前端開發的生產力,因爲javascript語言特性存在不足,而且因爲歷史原因這些不足比較難得到解決。

TypeScript定位爲web大型應用開發,以javascript作爲編譯結果。Web大型應用其實FlexSilverlight都可以而且能做得更好,只是要依賴於瀏覽器插件以及“技術政治”等原因未能得到廣泛支持。TypeScript等將是它們的代替品,當然,也要看別人買不買賬

最近開始使用WebStorm,用它來編寫複雜的javascript真的非常方便,這裏真心的推薦一下。

 

相關文章

Fixjs專欄

 

轉載請註明來源:http://blog.csdn.net/hunkcai

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章