14、jQuery插件之jquery.spinner数字智能增减插件

雨点打透心脏的1/2处 2022-06-15 07:21 467阅读 0赞

#### 参考地址:http://www.helloweba.com/view-blog-282.html ####

#### 左右加减数字 ####

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

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

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

#### Bootstrap风格，右侧加减 ####

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

将bootstrap相关css和js文件载入后，便可直接看到页面效果，如果你的项目基于bootstrap，那么直接就可以调用它了。[请看演示示例2][2]

您还可以参考该项目地址：[https://github.com/xixilive/jquery-spinner][https_github.com_xixilive_jquery-spinner]查看相关参数设置。

#### jQuery ui风格，右侧加减 ####

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

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

`$("#spinner").spinner({       max:10,      min:0,      step:2  }); `

<!DOCTYPE html>

<html>  
  <head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>jquery插件spinner</title>  
  
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">  
    <link rel="stylesheet" href="dist/css/font-awesome.min.css">  
    <link rel="stylesheet" href="dist/css/bootstrap-spinner.css">  
  
    <script src="dist/js/jquery-1.10.2.min.js"></script>  
    <script src="dist/js/bootstrap.min.js"></script>  
    <script src="dist/js/jquery.spinner.js"></script>  
    <script>  
    $(function() \{  
        $("\#spinner").spinner(\{max:10,min:0,step:2\});  
      $('\#customize-spinner').spinner('changed', function(e, newVal, oldVal) \{  
        $('\#old-val').text(oldVal);  
        $('\#new-val').text(newVal);  
      \});  
    \});  
    </script>  
  </head>  
  <body>  
    <div class="container">  
      <h1>Examples for jQuery spinner</h1>  
      <ul class="muted">  
        <li>Arrow-up for increment</li>  
        <li>Arrow-down for decrement</li>  
        <li>Press Arrows or Left-mouse cause continuous changing</li>  
      </ul>  
  
      <div class="well">  
        <h2>Quantity:</h2>

<div class="input-group-addon">  
            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>  
            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>  
          </div>  
        </div>  
      </div>  
  
      <div class="well">  
        <h2>Currency:</h2>  
        <div class="input-group spinner" data-trigger="spinner">  
          <input type="text" class="form-control text-center" value="1" data-rule="currency">  
          <div class="input-group-addon">  
            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>  
            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>  
          </div>  
        </div>  
      </div>  
  
      <div class="well">  
        <h2>Percent:</h2>  
        <div class="input-group spinner" data-trigger="spinner">  
          <input type="text" class="form-control text-center" value="1" data-rule="percent">  
          <div class="input-group-addon">  
            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>  
            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>  
          </div>  
        </div>  
      </div>  
  
      <div class="well">  
        <h2>Month:</h2>  
        <div class="input-group spinner" data-trigger="spinner">  
          <input type="text" class="form-control text-center" value="1" data-rule="month">  
          <div class="input-group-addon">  
            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>  
            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>  
          </div>  
        </div>  
      </div>  
  
      <div class="well">  
        <h2>Customize (even number less than 200):</h2>  
        <div class="input-group spinner" data-trigger="spinner" id="customize-spinner">  
          <input type="text" class="form-control text-center" value="0" data-max="200" data-min="0" data-step="2">  
          <div class="input-group-addon">  
            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>  
            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>  
          </div>  
        </div>  
        <p>Event handler: changed</p>  
        <p>  
          Old = <span id="old-val"></span>, New = <span id="new-val"></span>  
        </p>  
      </div>  
  
      <div class="well">  
        <h2>Disabled input:</h2>  
        <div class="input-group spinner" data-trigger="spinner">  
          <input type="text" class="form-control text-center" value="100" disabled>  
          <div class="input-group-addon">  
            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>  
            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>  
          </div>  
        </div>  
      </div>  
  
      <div class="well">  
        <h2>Control sizing:</h2>  
        <div class="input-group input-group-sm spinner" data-trigger="spinner">  
          <input type="text" class="form-control text-center" value="1">  
  
          <div class="input-group-addon">  
            <button type="button" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></button>  
            <button type="button" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></button>  
          </div>  
  
          <div class="input-group-addon">  
            <button type="button" class="spin-up" data-spin="up"><span class="glyphicon glyphicon-triangle-top"></span></button>  
            <button type="button" class="spin-down" data-spin="down"><span class="glyphicon glyphicon-triangle-bottom"></span></button>  
          </div>  
        </div>  
  
        <br>  
  
        <div class="input-group input-group-lg spinner" data-trigger="spinner">  
          <input type="text" class="form-control text-center" value="1">  
  
          <div class="input-group-addon">  
            <button type="button" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></button>  
            <button type="button" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></button>  
          </div>  
  
          <div class="input-group-addon">  
            <button type="button" class="spin-up" data-spin="up"><span class="glyphicon glyphicon-triangle-top"></span></button>  
            <button type="button" class="spin-down" data-spin="down"><span class="glyphicon glyphicon-triangle-bottom"></span></button>  
          </div>  
        </div>  
  
      </div>  
    </div>  
  </body>

</html>

![Center][]

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width; initial-scale=1.0">  
<title>演示：jQuery数字加减插件</title>  
<link rel="stylesheet" href="spinner/jquery.spinner.css" />  
<link rel="stylesheet" href="./css/main.css" />  
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>  
<script type="text/javascript" src="spinner/jquery.spinner.js"></script>  
<style type="text/css">  
.demo\{width:560px; margin:20px auto 0 auto; \}  
.demo h4\{padding:10px 2px; font-size:14px; font-weight:bold\}  
.demo p\{line-height:32px\}  
@media screen and (max-width: 360px) \{.demo \{width:340px\}\}  
</style>  
</head>  
  
<body>  
<div id="header">  
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>  
   <div class="demo\_topad"></div>  
</div>  
  
<div id="main">  
   <h2 class="top\_title"><a href="http://www.helloweba.com/view-blog-282.html">jQuery数字加减插件</a></h2>  
   <div class="demo">  
          <h4>示例1：左右加减。</h4>  
          <p>最小0，默认1，每次加减1</p>  
        <input type="text" class="spinner"/>  
   </div>  
   
  <br/>  
</div>  
<script type="text/javascript">  
    $('.spinner').spinner();  
</script>  
  
</body>

</html>

![Center 1][]

[1]: http://www.helloweba.com/demo/spinner/index.html
[2]: http://www.helloweba.com/demo/spinner/bootstrap.html
[https_github.com_xixilive_jquery-spinner]: https://github.com/xixilive/jquery-spinner
[3]: http://www.helloweba.com/demo/spinner/jqueryui.html
[Center]: /images/20220615/da22057b23db40cc9d937752108d6d85.png
[Center 1]: /images/20220615/d9ec4aa4b8434ea2b810dd517993abe6.png