zoukankan      html  css  js  c++  java
  • Bootstrap3的输入框数字点击修改效果

    <div class="container">
    <div class="page-header"><h3>Bootstrap 3 输入框数字修改效果</h3></div>  
      <div class="input-group spinner">
        <input type="text" class="form-control" value="1000">
        <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>



    <!-- 推荐开源CDN来选取需引用的外部JS //-->
    <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

    /*CSS源代码*/
    @import url('http://cdn.gbtags.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css');
    @import url('http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');

    body{
        background:orange;
        font-family: 'microsoft yahei',Arial,sans-serif;
        color:#FFF;
    }

    .spinner {
      200px;
    }
    .spinner input {
      text-align: right;
    }
    .input-group-btn-vertical {
      position: relative;
      white-space: nowrap;
      1%;
      vertical-align: middle;
      display: table-cell;
    }
    .input-group-btn-vertical > .btn {
      display: block;
      float: none;
      100%;
      max- 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;
    }

    /*Javascript代码片段*/

    (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);

  • 相关阅读:
    智慧城市建设中政府网站群建设起到了积极的作用
    SQLite 入门教程(四)增删改查,有讲究 (转)
    基于H.264的实时网络摄像——Android客户端
    中小型数据存储方案探讨
    SQL的多表操作
    lua中的时间函数
    C++ 输入输出文件流(ifstream&ofstream)
    linux系统下的shell脚本
    makefile的简单写法
    Linux-ubuntu
  • 原文地址:https://www.cnblogs.com/honeynm/p/5223249.html
Copyright © 2011-2022 走看看