zoukankan      html  css  js  c++  java
  • jquery+bootstrap使用数字增减按钮

    <div class="container">
    <div class="page-header"><h1>Bootstrap 3 input-spinner</h1></div>  
      <label for="sign_times" class="hr-label col-md-6"><span
                                        class="required">*</span><span class="hr-span">签订次数</span> </label>
      <div class="input-group spinner">
        <input type="text" class="form-control" value="42">
        <div class="input-group-btn-vertical">
          <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
          <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
        </div>
      </div>
    </div>
    .spinner {
      width: 100px;
    }
    .spinner input {
      text-align: right;
    }
    .input-group-btn-vertical {
      position: relative;
      white-space: nowrap;
      width: 1%;
      vertical-align: middle;
      display: table-cell;
    }
    .input-group-btn-vertical > .btn {
      display: block;
      float: none;
      width: 100%;
      max-width: 100%;
      padding: 8px;
      margin-left: -1px;
      position: relative;
      border-radius: 0;
    }
    .input-group-btn-vertical > .btn:first-child {
      border-top-right-radius: 4px;
    }
    .input-group-btn-vertical > .btn:last-child {
      margin-top: -2px;
      border-bottom-right-radius: 4px;
    }
    .input-group-btn-vertical i{
      position: absolute;
      top: 0;
      left: 4px;
    }
    (function ($) {
      $('.spinner .btn:first-of-type').on('click', function() {
        $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
      });
      $('.spinner .btn:last-of-type').on('click', function() {
        $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
      });
    })(jQuery);
  • 相关阅读:
    FTP-实例(Md5验证)
    Socket-实例
    函数对象、函数嵌套、名称空间与作用域、装饰器
    Docker——手动创建镜像
    Docker——桥接网络配置
    Docker——网络和存储(数据卷)
    Docker-PS命令解析
    面试题44:扑克牌的顺子
    面试题42:翻转单词顺序VS左旋转字符串
    面试题41:和为s的两个数字VS和为s的连续正数序列
  • 原文地址:https://www.cnblogs.com/dream-to-pku/p/5899212.html
Copyright © 2011-2022 走看看