<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:;
}
.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:;
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);

jquery+bootstrap使用数字增减按钮的更多相关文章

  1. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  2. Bootstrap历练实例:按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  3. bootstrap历练实例:按钮作为输入框组前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap历练实例:按钮组大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. jQuery+bootstrap实现有省略号的数据分页

    1.前言 在前端通过ajax请求数据后,可以通过bootstrap实现分页.由于bootstrap只提供分页的按钮的样式.数据分页我们需要实现页码跳转,上一页下一页,数据过多显示省略号,点击省略号能快 ...

  6. JQuery Mobile入门——设置后退按钮文字(转)

    http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  h ...

  7. html+css复习之第3篇 | jquery | bootstrap

    html+css复习之第3篇 | jquery  | bootstrap

  8. jquery只能输入数字方法

    本方法为验证文本框的输入内容,如果输入的是数字,则提示"√".否则提示“必填,且只能输入数字字符”.在线体验效果:http://keleyi.com/keleyi/phtml/zz ...

  9. jQuery制作go to top按钮

    转自:http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人 ...

随机推荐

  1. Android 解读.apk解压后文件详细说明

    转自:http://xdang.org/post-602.html 以下原文: 反编译 — 在apk文件中能得到什么 最近在做android客户端与服务器安全通信,有一种常见的不安全因素:很多软件常常 ...

  2. [转]NopCommerce之旅: 应用启动

    本文转自:http://www.cnblogs.com/devilsky/p/5359881.html 我的NopCommerce之旅(6): 应用启动   一.基础介绍 Global.asax 文件 ...

  3. MMORGP大型游戏设计与开发(客户端架构 part1 of vgui)

    作为客户端的重要装饰,UI扮演着极为重要的角色,是客户端中核心的组成.vgui(微GUI)中,提供了核心的接口封装,实现了客户端中常见的界面操作,并结合lua脚本,使得控制界面更加的方便. 构架 总结 ...

  4. Docker的单主机容器网络

    作者:杨冬 欢迎转载,也请保留这段声明.谢谢! 出处: https://andyyoung01.github.io/ 或 http://andyyoung01.16mb.com/ 本篇文章主要探索Do ...

  5. BigDecimal.ROUND_HALF_XXX的各种用法

    在银行.帐户.计费等领域,BigDecimal提供了精确的数值计算.其中8种舍入方式值得掌握. 1.ROUND_UP 舍入远离零的舍入模式. 在丢弃非零部分之前始终增加数字(始终对非零舍弃部分前面的数 ...

  6. [No000025]停止自嘲—IT 技术人必须思考的 15 个问题

    行内的人自嘲是程序猿.屌丝和码农,行外的人也经常拿IT人调侃,那么究竟是IT人没有价值,还是没有仔细思考过自身的价值? 1.搞 IT 的是屌丝.码农.程序猿? 人们提到IT人的时候,总会想到他们呆板. ...

  7. Javascript Window的属性

    Window的属性 属性 描述 closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dialogArguments 设置或获取传递给模 ...

  8. 转:[版本控管]TortoiseSVN 使用,抓出兇手,使用 Blame 查看每一行最後修改的人是誰

    类似的官方的使用手段有: https://tortoisesvn.net/docs/nightly/TortoiseSVN_zh_CN/tsvn-dug-blame.html from: http:/ ...

  9. Entityframework core 动态添加模型实体

    重新DBContext中OnModelCreating protected override void OnModelCreating(ModelBuilder modelBuilder)  { // ...

  10. http://www.cnblogs.com/figure9/p/developer-reading-list.html

    http://www.cnblogs.com/figure9/p/developer-reading-list.html