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.

【2015上半年总结】js开源组件开发系列索引的更多相关文章

  1. [js开源组件开发]network异步请求ajax的扩展

    network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loadin ...

  2. [js开源组件开发]数字或金额千分位格式化组件

    数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和 ...

  3. [js开源组件开发]query组件,获取url参数和form表单json格式

    query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……, ...

  4. [js开源组件开发]localStorage-cache本地存储的缓存管理

    localStorage-cache本地存储的缓存管理 距离上次的组件开发有近三个月的时间了,最近一直在做一些杂事,无法静下心来写写代码,也是在学习emberjs,在emberjs中有一个很重要的东西 ...

  5. [js开源组件开发]js手机端浮层控件,并有多种弹出小提示,兼容pc端浏览器

    js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js di ...

  6. [js开源组件开发]ajax分页组件

    ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

  7. [js开源组件开发]图片放大镜

    图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...

  8. [js开源组件开发]tip提示组件

    tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...

  9. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

随机推荐

  1. MemCache在win7上的可视化配置以及Nodejs/Net应用

    惯例科普:MemCache是一套分布式的高速缓存系统,由LiveJournal的Brad Fitzpatrick开发,但目前被许多网站使用以提升网站的访问速度,尤其对于一些大型的.需要频繁访问数据库的 ...

  2. SVN代码回滚

    取消对代码的修改分为两种情况:   第一种情况:改动没有被提交(commit). 这种情况下,使用svn revert就能取消之前的修改. svn revert用法如下: # svn revert [ ...

  3. kqueue用法简介

    1.什么是kqueue和IO复用 kueue是在UNIX上比较高效的IO复用技术. 所谓的IO复用,就是同时等待多个文件描述符就绪,以系统调用的形式提供.如果所有文件描述符都没有就绪的话,该系统调用阻 ...

  4. Hadoop阅读笔记(一)——强大的MapReduce

    前言:来园子已经有8个月了,当初入园凭着满腔热血和一脑门子冲动,给自己起了个响亮的旗号“大数据 小世界”,顿时有了种世界都是我的,世界都在我手中的赶脚.可是......时光飞逝,岁月如梭~~~随手一翻 ...

  5. iOS-地图报错超出了经纬度范围Invalid Region

    做地图定位的时候,使用一下代码 // 经纬度 CLLocationDegrees latitude = [storeDict[@"lat"] doubleValue]; CLLoc ...

  6. Maven使用详解

    Maven使用详解 世间万物相生相克,今年本来的目标是主要研究asp.net mvc以及windows平台相关的DI, ORM框架,突然有一天想研究一个Java EE里面相应的框架都是怎么玩的,于是研 ...

  7. 在IBM Bluemix上部署Hyperledger应用

    简介 IBM Bluemix (http://www.ibm.com/bluemix‎)是一个基于cloud的应用开发和部署平台,提供包括多种服务和运行环境的支持.对Hyperledger应用开发者而 ...

  8. HT for Web列表和3D拓扑组件的拖拽应用

    很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表中拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果. 首先 ...

  9. 使用Spark分析拉勾网招聘信息(三): BMR 入门

    简述 本文,意在以最小的篇幅,来帮助对大数据和Spark感兴趣的小伙伴,能尽快搭建一个可用的Spark开发环境.力求言简意赅.文章,不敢自称BMR的最佳实践,但绝对可以帮助初学者,迅速入门,能够专心于 ...

  10. STM32L系列单片机内部EEPROM的读写

    STM32L系列单片机内部提供了EEPROM存储区域,但实质上,其FLASH也是EEPROM类型,只不过有一块区域被开放出来专门用作EEPROM操作而已.STM32L的EEPROM使用寿命设计为100 ...