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

  • 相关阅读:
    Socket
    Cookie & Session
    一些快捷键&工具的用法收集
    过桥问题及一些想法
    微信初步开发(测试用)
    代码的编写习惯
    Python爬虫简单笔记
    如何降低AzurePaasSQL的表占用空间
    Sonar代码检测工具安装与使用及问题记录
    AzureDevops发布Artifact
  • 原文地址:https://www.cnblogs.com/honeynm/p/5223249.html
Copyright © 2011-2022 走看看