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 相关文章推荐
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python-基础-入门 简介
2014/08/09 Python
Python编程入门的一些基本知识
2015/05/13 Python
浅析Python中的for 循环
2016/06/09 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python破解zip加密文件的方法
2018/05/31 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python编程使用协程并发的优缺点
2018/09/20 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
安全标兵事迹材料
2014/08/17 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015年三万活动总结
2015/03/25 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
tomcat下部署jenkins的方法
2022/05/06 Servers