jQuery演示三种不同的数字加减插件

来源:https://www.sucaihuo.com/js/150.html 2015-06-10 02:14浏览(4975) 收藏

本文将介绍常见的三种使用spinner数字插件来实现数字加减的效果。
jQuery演示三种不同的数字加减插件
分类:其它特效 > jQuery插件 难易:初级
查看演示 下载资源 下载积分: 20 积分

演示一:仿京东加减:

<input type="text" class="spinner"/>
$('.spinner').spinner();

演示二: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>

jQuery ui风格,右侧加减

<input type="text" id="spinner"/>
$("#spinner").spinner({ 
    max:12, 
    min:0, 
    step:3 
})
评论5
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 4楼
    07-18 10:20
    a***l
    刚好需要这个效果,给个赞
  • 头像 3楼
    09-09 20:10
    a***1
    很好的功能 ~ 學習了
  • 头像 板凳
    05-27 00:04
    1***1
    数字插件来实现数字加减的效果
  • 头像 椅子
    12-17 10:11
    h***o
    这个插件好
  • 头像 沙发
    11-20 19:03
    c***8
    使用案例
1 2