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 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
php+js实现倒计时功能
Jun 02 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
vue.js的安装方法
May 12 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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中设置时区方法小结
2012/06/03 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
JavaScript 基础问答三
2008/12/03 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python2.x与Python3.x的区别
2016/01/14 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python flask中动态URL规则详解
2019/11/22 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Python可以用来做什么
2020/11/23 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
Servlet面试题库
2015/07/18 面试题
优秀毕业生找工作自荐信
2014/06/23 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
公司辞职信模板
2015/05/13 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers