JGUI源碼:從頭開始,建一個自己的UI框架(1)


開篇

1、JGUI是為了逼迫自己研究底層點的前端技術而做的框架,之前對web底層實現一直沒有深入研究,有了技術瓶頸,痛定思痛從頭研究,

2、雖然現在vue技術比較火,但還在發展階段,暫時先使用JQuery實現,以后有時間會再做一套vue版本的。有好的建議歡迎大家留言。

3、自己在開發過程中遇到的問題和心得將會寫到博客上,在實現過程中由簡單到復雜實現,一些功能前期只考慮功能實現,后期再進行優化。

4、本框架是一個學習型的框架,功能都盡量自己手工敲代碼實現,雖然有點造輪子,但是對深入理解Jquery有幫助,本框架基本不集成第三方組件,除了一些瀏覽器兼容庫。

5、界面部分多少會受自己使用過的UI庫的風格影響,雷同之處望大家海涵,歡迎從頭和想深入學習Jquery的一起加入。

6、框架盡量兼容IE,目前一般是在兼容IE8下調試,不能完全模擬真正IE8。

github地址:
https://github.com/zhaogaojian/JGUI

demo地址:
http://www.jgui.com

項目結構如下

 

每個組件css,jss都是分離的,可以單獨拿來使用,廢話不多說,下面開始進行

代碼會實時更新重構到github上,最新的可能與博客撰寫時不太一致,可以看博客編寫時間找對應的歷史代碼。

目錄如下

JGUI源碼:實現簡單進度條顯示(19)

JGUI源碼:實現mask層顯示(18)

JGUI源碼:實現日期控件顯示(17)

JGUI源碼:實現圖標按鈕及下拉菜單(16)

JGUI源碼:實現MVVM簡單單項綁定(15)

JGUI源碼:Tip實現(14)

JGUI源碼:實現響應式布局(13)

JGUI源碼:右鍵菜單實現(12)

JGUI源碼:開發中遇到的問題(持續更新。。)(11)

JGUI源碼:prefixfree 這個庫有時候會引起網頁一直加載中(10)

JGUI源碼:Tab組件實現(9)

JGUI源碼:JS菜單動態綁定(8)

JGUI源碼:組件及函數封裝方法(7)

JGUI源碼:Accordion折疊到側邊欄實現(6)

JGUI源碼:鼠標中鍵滾動再次優化(5)

JGUI源碼:解決手機端點擊出現半透明陰影(4)

JGUI源碼:Accordion兼容IE8實現(3)

JGUI源碼:Accordion鼠標中鍵滾動和手機端滑動實現(2)

JGUI源碼:從頭開始,建一個學習UI框架(1)



 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM