jQuery实现购物车数字加减效果


Posted in Javascript onMarch 14, 2015

我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数。本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法。

左右加减数字

像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单。我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单,请看演示示例1。

<input type="text" class="spinner"/>

调用也非常简单,先载入jquery库文件和jquery.spinner.js,然后使用以下代码:

$('.spinner').spinner();

Bootstrap风格,右侧加减

Bootstrap火了很久了,基于bootstrap风格的各类应用也非常多,下面给大家介绍一个基于bootstrap的数字加减插件,可以设置最小值、最大值、递增递减(步长值),可手动输入数字。

<div class="input-group spinner" data-trigger="spinner" id="spinner"> 

    <input type="text" class="form-control" value="1" data-max="10" data-min="1" data-step="1"> 

    <div class="input-group-addon"> 

        <a href="javascript:;" class="spin-up" data-spin="up"><i class="icon-sort-up"></i></a> 

        <a href="javascript:;" class="spin-down" data-spin="down"><i class="icon-sort-down"></i></a> 

    </div> 

</div>

将bootstrap相关css和js文件载入后,便可直接看到页面效果,如果你的项目基于bootstrap,那么直接就可以调用它了。请看演示示例2
您还可以参考该项目地址:https://github.com/xixilive/jquery-spinner查看相关参数设置。

jQuery ui风格,右侧加减

jQuery ui也提供了数字加减插件,可以设置最小值、最大值、递增递减(步长值),可手动输入数字。请看演示示例3

<input type="text" id="spinner"/>

如果你的项目使用了jquery ui,那就可以调用jquery ui来实现数字加减的功能了。

$("#spinner").spinner({ 

    max:10, 

    min:0, 

    step:2 

});

以上就是本文所述的全部内容了,希望大家能够喜欢,能对大家熟练掌握jQuery有所帮助。

Javascript 相关文章推荐
判断对象是否Window的实现代码
Jan 10 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
深入理解js generator数据类型
Aug 16 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 #Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 #Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 #Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 #Javascript
jQuery插件实现大图全屏图片相册
Mar 14 #Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 #Javascript
jQuery实现菜单式图片滑动切换
Mar 14 #Javascript
You might like
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
教你如何使用php session
2013/10/28 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
总结Python编程中函数的使用要点
2016/03/20 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python字符串及文本模式方法详解
2020/09/10 Python
浅谈Python __init__.py的作用
2020/10/28 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
工作评语大全
2014/04/26 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
小马王观后感
2015/06/11 职场文书
同学会感言
2015/07/30 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
2016继续教育研修日志
2015/11/13 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL