【2015上半年總結】js開源組件開發系列索引

js開源組件開發系列一索引

　　　　　　　　　　　　　　　　　　　　　　　　2015.8 by 田想兵 個人網站 

從3月份進入新公司以來，時經五個月，我以平均每周1個小組件的速度，已經完成的js組件有22個之余了，已基本上全部用到實際項目中，這些小而簡的組件，已能基本支持現在項目中所會遇到的前端功能性需求，所以在這里，把它們列出來，后面可能還會有一些更新:

1.日歷組件（可多選） 

  　　　　　　   

　　　  源碼git:https://github.com/tianxiangbing/calendar

 

　　　　demo:http://www.lovewebgames.com/jsmodule/calendar.html

2.dialog對話框彈層

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/dialog

　　　　demo:http://www.lovewebgames.com/jsmodule/dialog.html

3.手機端上傳圖片

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/mobile-upload

　　　　demo:http://www.lovewebgames.com/jsmodule/mobile-upload.html

4.滾動加載數據(支持移動端)

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/scroll-load

 

　　　　demo:http://www.lovewebgames.com/jsmodule/scroll-load.html

5.手機端選擇地區聯動（仿ios)

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/mobile-select-area

　　　　demo:http://www.lovewebgames.com/jsmodule/mobile-select-area.html

6.手機端照片預覽組件（可滑動切換圖片） 

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/mobile-photo-preview

　　　　demo:http://www.lovewebgames.com/jsmodule/mobile-photo-preview.html

7.手機端日期選擇（仿ios效果)

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/mobile-select-date

　　　　demo:http://www.lovewebgames.com/jsmodule/mobile-select-date.html

8.輪播切換圖片-支持手機滑動

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/carousel-image

　　　　demo:http://www.lovewebgames.com/jsmodule/carousel-image.html

9.js異步上傳文件(iframe pc端)

　　　　源碼git：https://github.com/tianxiangbing/upload

　　　　demo:http://www.lovewebgames.com/jsmodule/upload.html

10.文本輸入框計數統計

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/word-count

　　　　demo:http://www.lovewebgames.com/jsmodule/word-count.html

11.圖片懶加載

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/lazy-load

　　　　demo:http://www.lovewebgames.com/jsmodule/lazy-load.html

12.圖片放大鏡(支持移動觸屏)

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/image-zooming

　　　　demo:http://www.lovewebgames.com/jsmodule/image-zooming.html

13.ajax分頁插件paging

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/paging

　　　　demo:http://www.lovewebgames.com/jsmodule/paging.html

14.獲取url參數和form表單json格式

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/query

　　　　demo:http://www.lovewebgames.com/jsmodule/query.html

15.table表格渲染組件

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/table

　　　　demo:http://www.lovewebgames.com/jsmodule/table.html

16.自動提示搜索框autosearch

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/autosearch

　　　　demo:http://www.lovewebgames.com/jsmodule/autosearch.html

17.輸入框數字或金額格式化

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/format-number

　　　　demo:http://www.lovewebgames.com/jsmodule/format-number.html

18.ajax請求的擴展(防重復點擊加載中)

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/network

　　　　demo:http://www.lovewebgames.com/jsmodule/network.html

19.loading加載中動畫效果

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/loading

　　　　demo:http://www.lovewebgames.com/jsmodule/loading.html

20.tip小提示組件

　　　　　　

　　　　源碼git:https://github.com/tianxiangbing/tip

　　　　demo:http://www.lovewebgames.com/jsmodule/tip.html

21.模擬下拉選項框select

　　　　　　

　　　　源碼git:http://www.lovewebgames.com/jsmodule/select.html

　　　　demo:http://www.lovewebgames.com/jsmodule/select.html

22.?

　　說好的22個呢?因為那個實在跟項目無關，是一個Q群屌絲好友，說要做這么個功能，於是我就花時間做了，發現很少用到，所以這里就不提了，如果有興趣了解的話可以去http://www.lovewebgames.com/jsmodule/click-progress.html這里看下，就是一個血條，然后越點血就漲越多，不點就掉來。多么無趣的東西，所以呢，如果你在項目中遇到了很有意思的功能，自己又弄不出來時，可以找我，如果我覺得好玩，我就做了。但不要私聊我，你懂的，加我Q群5678537或70210212,77813547.