自己动手丰衣足食之 jQuery 数量加减插件
引言
做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值。使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些原理还不是很懂,比如说插件函数入口、插件内如何编写私有函数、如何调用含参私有函数、如果在使用插件时提示参数。都还需要一一去摸索。
jQuery实现方式
1、类级别插件开发。 $.ajax()。
2、对象级别插件开发。 $("div").highlight()。
3、jquery UI提供的widget方法。 第三种方法也是我在最近的项目中看另一个同时写的,同时还用到严格模式(strict)这些都是我以前没有接触过的。
效果图
默认使用方法
$("#plusHelper").plusready({
default:3,
max:10,
min:1
});
//页面上放一个div即可
jQuery.plusready.js
/**
* 购物数量加减
*
* **/
(function(){ $.fn.plusready=function(options){
var defaults={
min:0,
max:10,
default:0
}; var op = $.extend(defaults,options); var $btn_plus=$("<button id='plus'>加</button>");
var $btn_minus=$("<button id='minus'>减</button>");
var $input=$("<input type='text' id='num' value='"+op.default+"' readonly='readonly' style='width:30px;height:16px;text-align:center;' />") var $this=$(this);
$this.append($btn_plus);
$this.append($input);
$this.append($btn_minus); var num = parseInt($input.val());
$btn_plus.click(function(){ if(num<op.max){
num++;
$input.val(num);
}
}); $btn_minus.click(function(){
if(num>op.min){
num--;
$input.val(num);
}
}); return this; //返回当前实例,已保证插件返回的对象支持jQuery链式操作
} })(jQuery)
自己动手丰衣足食之 jQuery 数量加减插件的更多相关文章
- jQuery数字加减插件
jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...
- js实现输入框数量加减【转】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- web框架实现购物车数量加减
企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...
- 小巧实用的数字加减插件(jquery插件)
2015-12-04 近期项目需要,我将插件更新了,增加了两个参数,一个参数控制文本框是否支持输入,另一个参数则是新增了一个回调函数,返回文本框内的值.另外对代码局部重构了,优化了一下封装,需要的朋友 ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- js jquery 权限单选 bug修改以及正确代码 购物车数量加减
效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...
- js实现购买数量加减效果
写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案 结构: js代码: <script type="text/javascript"> function ...
- vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)
简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...
- [转]微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: ...
随机推荐
- MYSQL删除重复数据
delete from co_jobinformation cwhere c.name in (select cc.name from co_jobinformation cc group by ...
- VIM配置
Linux下的编辑器以vim和emacs为主流,一个编辑器之神,一个是神的编辑器. 本文以主要介绍如何在linux下以vim为基础搭建一个比较顺手的代码编辑器. 有两种比较流行的方式: 自动安装 手动 ...
- NSTimer整理总结
对于定时器NSTimer,我们大家都不会陌生,在使用的时候,我们常常会遇到一些坑,例如:在Scrollview拖动时,timer会暂停:在子线程中如何创建一个定时器等.针对于一些我们所遇到的坑,我来总 ...
- PHP基础知识之流程控制的替代语法
PHP 提供了一些流程控制的替代语法,包括 if,while,for,foreach 和 switch. 替代语法的基本形式是把左花括号({)换成冒号(:),把右花括号(})分别换成 endif;,e ...
- Android零散
2016-03-13 Android零散 ListView中嵌套GridView 要实现分组列表这样的效果:点击ListView中的分组名称,即展开此分组显示其包含的项目.使用ExpandableLi ...
- C# Random生成多个不重复的随机数万能接口
C#,Radom.Next()提供了在一定范围生成一个随机数的方法,我现在有个业务场景是给其他部门推送一些数据供他们做抽样检查处理,假设我的数据库里面有N条数据,现在要定期给其随机推送数据,我需要先拿 ...
- DevExpress GridControl使用方法
一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 (1).gridView.AddN ...
- 用“MEAN”技术栈开发web应用(三)用mongodb搭建数据库
上一篇介绍了如何用express搭建起服务端MVC的开发架构,本篇我们来详细介绍一下这个Model层,也就是数据库访问层.包含如何使用mongodb搭建数据库,以及如何使用mongoose来访问数据. ...
- 干货!表达式树解析"框架"(1)
最新设计请移步 轻量级表达式树解析框架Faller http://www.cnblogs.com/blqw/p/Faller.html 关于我和表达式树 其实我也没有深入了解表达式树一些内在实现的原理 ...
- 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递
通过第一天的学习之后,我们相信您已经对MVC有一些基本了解. 本节所讲的内容是在上节的基础之上,因此需要确保您是否掌握了上一节的内容.本章的目标是在今天学习结束时利用最佳实践解决方案创建一个小型的MV ...