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

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

【2015上半年总结】js开源组件开发系列索引

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

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

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

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

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

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

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

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

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开源组件开发]ajax分页组件

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

[js开源组件开发]table表格组件

table表格组件表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tianxiangbing/table 如上图所示,功能基本包括常用表格中遇到的分页.搜索.删除.AJAX操作.由于是用的HANDLEBARS渲染的,所以样式可能很好的控制,要加新的功能也较容易. 调用例子 html <div class="form"> 名称: <input t…

[js开源组件开发]js手机联动选择地区仿ios 开源git

js手机联动选择地区前言:由于网上找到了一个mobiscrool,比较全,但是不开源,只能试用15天,正式版竟然要三千块钱,穷人只能自己动手,写了个只针对弹窗地区选择的. 本站点所有的资源均在github上可以查看源代码 GitHub https://github.com/tianxiangbing/mobile-select-area demo地址请点击这里 http://www.lovewebgames.com/jsmodule/mobile-select-area.html mobile…

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

tip提示组件常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件.效果如下图所示: 大概就是这样了,不复杂的东西,也很实用. 它的DEMO实例请点击这里http://lovewebgames.com/jsmodule/tip.html 它的源码托管在github 请点击这里https://github.com/tianxiangbing/tip <table s…

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

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

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

loading加载效果由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果如下图: 这里演示了三种不一样的效果. 1.loading效果显示在按钮自己身上,这是极好的 2.loading效果显示在其他dom上, 3.loading全屏显示,不明觉厉. 实例demo演示请点击这里http://www.lovewebgames.com/jsmodule/loading.htm…

[js开源组件开发]-手机端照片预览组件

手机端照片预览组件可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目.它的github地址是:https://github.com/tianxiangbing/mobile-photo-preview 下面是预览图,它的完整demo请点击这里手机端照片预览组件demo 使用方法案例: var photoPreview = new MobilePhotoPr…

[js开源组件开发]js手机联动选择日期开源git

js手机联动选择日期这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,http://www.cnblogs.com/tianxiangbing/p/calendar.html. 效果图如下: mobile-select-date 手机联动选择日期这个组件是从mobile-select-area 继承过来的,所以调用方法基本相同 DEMO请点击这里 http://www.love…

[js开源组件开发]js文本框计数组件

js文本框计数组件先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http://www.lovewebgames.com/jsmodule/word-count.html,它的源文件托管在github上:https://github.com/tianxiangbing/word-count 使用方法案例: <div class="txt-count-container…

[js开源组件开发]html5标签audio的样式更改

html5标签audio的样式更改由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以我简单的把它进行了封装,效果如下: 作为技术实现,它的原理比较简单,就是把原生的audio隐藏,然后用div来显示播放器的效果,然后调用它的click事件来触发play和stop,然后是时长duration,这个值有时能够获取,有时不行,比较坑,所以建议在audio标签上自定义duration属性存…

[js开源组件开发]模拟下拉选项框select

模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://www.lovewebgames.com/jsmodule/select.html 源码查看下载请点击这里https://github.com/tianxiangbing/select 调用示例 <select name="select" id="select"&g…

[js开源组件开发]js多选日期控件

js多选日期控件详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianxiangbing/calendar calendar js日历控件用法 <input type="text" id="calendar" value="2015-04-15"/> <script src="../src/…

[js开源组件开发]js轮播图片支持手机滑动切换

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…

[js开源组件开发]图片懒加载lazyload

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

Ajax:实现后台验证js实现get方式的异步请求，判断用户名是否重复

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>ajax</title> <script src="/ajax/js/jquery-3.3.1.min.js"></script> </head> <body> <…

异步请求Ajax（取得json数据）

异步请求Ajax 没有学习Ajax之前请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 Ajax(Asynchronous Javascript And XML),在之前一般使用js 发送异步请求,请求的数据一般是xml,但是现在 json 出现之后就不使用xml 做为数据传输格式标准了.使用jQuery 发送异步请求,jq中的异步请求…

js实现post方式的异步请求

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>ajax</title> <script src="/ajax/js/jquery-3.3.1.min.js"></script> </head> <body> <…

异步请求Ajax

AJAX:Asynchronous JS And XML,包括HTML.CSS.JS.DOM.XML.JSON等,客户端技术范畴.主要目标:发起异步请求/响应,实现页面内容的局部刷新,提高浏览体验:实现动态页面的静态化. 使用AJAX的步骤: (1)创建XHR对象——XMLDOM对象 (2)绑定onreadystatechange事件监听函数 (3)创建请求消息 (4)发送请求消息 AJAX的原理图: 使用AJAX发起GET请求: (1) (2) (3) xhr.open('GET', 'xx.…