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实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
关于使用js算总价的问题
Jun 23 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
详解elementUI中input框无法输入的问题
Apr 27 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学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php阳历转农历优化版
2016/08/08 PHP
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python strip()函数 介绍
2013/05/24 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python中字典增加和删除使用方法
2020/09/30 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
承认错误的检讨书
2014/01/30 职场文书
一月红领巾广播稿
2014/02/11 职场文书
公休请假条
2014/04/11 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
比较node.js和Deno
2021/04/27 Javascript