星空网 > 软件开发 > Java

自己动手丰衣足食之 jQuery 数量加减插件

引言

      做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值。使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些原理还不是很懂,比如说插件函数入口、插件内如何编写私有函数、如何调用含参私有函数、如果在使用插件时提示参数。都还需要一一去摸索。

 

jQuery实现方式

    1、类级别插件开发。 $.ajax()。

    2、对象级别插件开发。  $("div").highlight()。

    3、jquery UI提供的widget方法。 第三种方法也是我在最近的项目中看另一个同时写的,同时还用到严格模式(strict)这些都是我以前没有接触过的。

 

效果图

自己动手丰衣足食之 jQuery 数量加减插件

 

默认使用方法

$("#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

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

企业会计准则第16号——政府补助:https://www.ikjzd.com/w/4538
上海汇实信息科技股份有限公司:https://www.ikjzd.com/w/4539
Indie Beauty Shop:https://www.ikjzd.com/w/454
深圳市浩通天成国际物流有限公司:https://www.ikjzd.com/w/4540
FANNO:https://www.ikjzd.com/w/4541
wosawe:https://www.ikjzd.com/w/4542
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流