图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个属性. 然后这个组件还是开源的git项目,你可以为它添加不支持backgroundsize时的解决方法.它的git地址是:图片放大镜github地址 https://github.com/tianxiangbing/image-zooming   ,它的在线演示地址是:js图片放大镜演示地址http…

图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以建议src里放置模糊小图或正在加载中的图,不要置空为好. lazy-load 图片懒加载 例子见DEMO ,它的git地址是:git 使用方法案例: <img data-src="http://ott.wansecheng.com/weidian/wdgoods/1429250625186.j…

js开源组件开发系列一索引 2015.8 by 田想兵 个人网站 从3月份进入新公司以来,时经五个月,我以平均每周1个小组件的速度,已经完成的js组件有22个之余了,已基本上全部用到实际项目中,这些小而简的组件,已能基本支持现在项目中所会遇到的前端功能性需求,所以在这里,把它们列出来,后面可能还会有一些更新: 1.日历组件(可多选)          源码git:https://github.com/tianxiangbing/calendar demo:http://www.lovewebga…

network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loading效果.所以我做network这个组件来扩展$.ajax,希望全中国的人民们喜欢. 这里使用到了上篇[js开源组件开发]loading加载效果 一个loading效果,但为了让它独立运行,所以没有进行引用,而是直接做了一个loading方法在里面.它的具体效果图如下: 它的实例DEMO地址请点击这里…

数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和数字的千分位和小数点控制的组件,它的作用主要是在输入框时限制输入的内容为数字.也可以用于普通标签的数字格式化,效果如下图: demo演示地址请点击 http://www.lovewebgames.com/jsmodule/format-number.html 源码github托管地址请点击https://gi…

query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……,最近项目紧,几个小组,只有我一个前端,公司对前端的定位不清晰,导致前端人员过少的情况.所以还得促进公司前端人员增长,不然再这么玩下去,我要被玩死了,一个公司,不可能靠一个资深前端来支撑二三十个开发的需求,这是不现实的,特别是现在的页面不再是复制粘贴的前况下.我默默耕芸,所以这次我整理了这一个月里所有…

localStorage-cache本地存储的缓存管理 距离上次的组件开发有近三个月的时间了,最近一直在做一些杂事,无法静下心来写写代码,也是在学习emberjs,在emberjs中有一个很重要的东西 -- localstorage_adapter,本地存储适配器,利用它可以很方便的把数据保存在本地的localStorage中,但我今天要讲的,并不是ember,也不是适配器,我是个比较念旧的人,所以我对cookie很情有独钟,当然,cookie也会有各种问题,于是我就来改造下localStora…

js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js dialog弹窗 用法 这是内容 <input type="button" id="btn_dialog" value="打开浮层"/> <div id="dialog-content" style="di…

js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-image.html github地址:https://github.com/tianxiangbing/carousel-image 轮播图片,支持触摸滑动. 使用方法案例: <script type="text/javascript" src="../src/zepto.js…

ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示的是这个分页控件的两种基本形态,样式可以自己定制,包括文案内容. 这个分页控件的demo演示地址是: http://www.lovewebgames.com/jsmodule/paging.html 同时,它还是开源的,它的git 地址是:https://github.com/tianxiangbi…