引言

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

  1. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...

  2. js实现输入框数量加减【转】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  4. 小巧实用的数字加减插件(jquery插件)

    2015-12-04 近期项目需要,我将插件更新了,增加了两个参数,一个参数控制文本框是否支持输入,另一个参数则是新增了一个回调函数,返回文本框内的值.另外对代码局部重构了,优化了一下封装,需要的朋友 ...

  5. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  6. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  7. js实现购买数量加减效果

    写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案 结构: js代码: <script type="text/javascript"> function ...

  8. vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  9. [转]微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)

    本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: ...

随机推荐

  1. C# Json传值与解析

    最近接触了工作室的项目,觉得一个功能的实现有点不好,心想不能就动手改了下,做了才知道我的js是多么的渣,功能是这样的: 我要实现的功能就是当选择学院时,就放松get请请求到后台,后台返回json信息再 ...

  2. Jquery 系列(2) 选择元素

    Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...

  3. Information Management Policy(信息管理策略)的使用范例

    基础知识 很多人都会定期收拾自己的书架或者抽屉,把里面过旧的资料拿走,为新的资料腾出空间来,这样既可以节省空间,而且当冗余资料过多的时候也会降低你查找的速度和效率.那么,在企业的SharePoint中 ...

  4. APK瘦身记,如何实现高达53%的压缩效果

    作者:非戈@阿里移动安全 1.我是怎么思考这件事情的 APK是Android系统安装包的文件格式,关于这个话题其实是一个老生常谈的题目,不论是公司内部,还是外部网络,前人前辈已经总结出很多方法和规律. ...

  5. Hadoop学习笔记—7.计数器与自定义计数器

    一.Hadoop中的计数器 计数器:计数器是用来记录job的执行进度和状态的.它的作用可以理解为日志.我们通常可以在程序的某个位置插入计数器,用来记录数据或者进度的变化情况,它比日志更便利进行分析. ...

  6. [ASP.NET MVC 小牛之路]01 - 理解MVC模式

    本人博客已转移至:http://www.exblr.com/liam  PS:MVC出来很久了,工作上一直没机会用.出于兴趣,工作之余我将展开对MVC的深入学习,通过博文来记录所学所得,并希望能得到各 ...

  7. Oracle客户端连接远程Oracle服务中文乱码问题

    在本机远程连接远程Oracle服务的时候,写了如下检索语句 select * from sys_employee 结果集中出现了中文乱码,但是远程服务器本身的PL/SQL检索出来没有问题 解决方案: ...

  8. EF:自定义Oracle的映射类型

    oracle在DB First模式下,int类型的字段会自动映射为decmial类型的属性. 我们可以通过自定义类型映射进行“纠整”. 在app.config 自定义映射规则: <oracle. ...

  9. C# 用原生JS进行文件的上传

    1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> ...

  10. java compiler level does not match the version of the installed java project facet 解决方案

    项目出现 java compiler level does not match the version of the installed java project facet 错误,一般是项目移植出现 ...