码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-07-10 18:24:16      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

引言

      做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值。使用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 数量加减插件

标签:

原文地址:http://www.cnblogs.com/sword-successful/p/4636085.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!