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:;
}
.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使用数字增减按钮的更多相关文章
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Bootstrap历练实例:按钮(Button)插件单个切换
单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...
- bootstrap历练实例:按钮作为输入框组前缀或后缀
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例:按钮组大小
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- jQuery+bootstrap实现有省略号的数据分页
1.前言 在前端通过ajax请求数据后,可以通过bootstrap实现分页.由于bootstrap只提供分页的按钮的样式.数据分页我们需要实现页码跳转,上一页下一页,数据过多显示省略号,点击省略号能快 ...
- JQuery Mobile入门——设置后退按钮文字(转)
http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28 CSDN博客原文 h ...
- html+css复习之第3篇 | jquery | bootstrap
html+css复习之第3篇 | jquery | bootstrap
- jquery只能输入数字方法
本方法为验证文本框的输入内容,如果输入的是数字,则提示"√".否则提示“必填,且只能输入数字字符”.在线体验效果:http://keleyi.com/keleyi/phtml/zz ...
- jQuery制作go to top按钮
转自:http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人 ...
随机推荐
- tcp选项TCP_DEFER_ACCEPT
tcp选项TCP_DEFER_ACCEPT http://blog.chinaunix.net/uid-23207633-id-274317.html 之前在项目测试的时候,如果第三次握手发完裸ack ...
- 理解 QEMU/KVM 和 Ceph(2):QEMU 的 RBD 块驱动(block driver)
本系列文章会总结 QEMU/KVM 和 Ceph 之间的整合: (1)QEMU-KVM 和 Ceph RBD 的 缓存机制总结 (2)QEMU 的 RBD 块驱动(block driver) (3)存 ...
- LInux_System_Call_INT_80h
Int 80h Website (Copy from Linux-System-Call) List of Linux/i386 system calls Copyright (C) 1999-200 ...
- 第一篇使用Markdown的文章
一级标题 1 计算机 |计算机|科学| Foo 这段文字需要被强调 this is H1 ========== this is H2 ---------- 这是H1 这是H2 这是H3 这是H6 断好 ...
- 64位win7硬盘安装64位ubuntu 13.04
最近本来是准备通过升级的方式把ubuntu从12.04升级到12.10再升级到13.04的,但是升级到12.10之后,可能是因为某一步的操作不当,出现无法进入系统的情况.不过还好的是升级之前保存了主要 ...
- HTML 学习笔记 CSS样式(定位)
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
- .Net Core 控制台输出中文乱码
Net Core 控制台输出中文乱码的解决方法: public static void Main(string[] args) { Console.Output ...
- win7 远程桌面关机
在任务管理器中, 打开运行窗口, 执行 shutdown -s 命令, 将在30秒后关闭win7, 如果需要更快, 加上 -t 10 参数 关于 shutdown 的命令行说明: C:\Users\R ...
- codevs 1281 Xn数列
题目描述 Description 给你6个数,m, a, c, x0, n, g Xn+1 = ( aXn + c ) mod m,求Xn m, a, c, x0, n, g<=10^18 输入 ...
- 数据库 Linux下的MySQL数据库管理
数据库就是数据的集合. 关系数据库是一种特殊的数据库,他将数据组织城标,并表示为表之间的关系. 数据库系统往往是大型项目的核心数据内容,如银行的用户账户信息,腾讯QQ的用户账户信息.股市的各种交易信息 ...