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/UDP常见端口参考
著名端口 端口号码 / 层 名称 注释 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat ...
- android canvas d
(以下转自:http://blog.csdn.net/longyi_java/article/details/6930480) 1.基本的绘制图片方法 //Bitmap:图片对象,left:偏移左边的 ...
- Android adb push 和 pull操作
由于安卓真机本地调试时,每次启动并生成apk然后安装到设备比较费时,而很多情况是仅仅修改了hot 脚本文件(cocos2dx + lua). 所以,使用热更机制把修改后的lua文件push到热更目录( ...
- sed grep find命令
一.sed [-nerf][n1,n2] action -n 安静模式,只有经过sed处理过的行才显示出来,其他不显示. -r 表示sed支持扩展的正则表达式 -e 表示直接在命令行模式上进行sed操 ...
- Visual Studio 中的快捷键
VS中常用快捷键 Ctrl+K+D:快速对齐代码 Ctrl+E+D:快速对齐代码 Ctrl+Z:撤销 Ctrl+S:保存 Ctrl+Shift+S:保存所有 Ctrl+J:快速弹出智能提示 Shift ...
- [转]新型智慧城市总体架构 华为 新ICT 一云二网三平台
本文转自:http://www.jpsycn.com/hangyexinwen/20160801142354.html “十三五”规划提出,充分运用现代信息技术和大数据,建设一批新型示范性智慧城市.日 ...
- Eclipse汉化后怎么改回英文版(可切换中英文)
Eclipse汉化后怎么改回英文版(可切换中英文) 很多朋友将MyEclipse汉化后还想改回英文的,其实只要修改MyEclipse的配置文件就可以了,这里我以MyEclipse7.0为例演示一下如何 ...
- POJ2230Watchcow[欧拉回路]
Watchcow Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 7512 Accepted: 3290 Specia ...
- Hibernate中的inverse
inverse inverse的英文意思是反向的,倒转的 Hibernate配置文件中的inverse正是这一真实反映,inverse属性只在Hibernate配置文件的集合元素上(list,set, ...
- 嵌入式Linux驱动学习之路(四)u-boot编译分析
u-boot编译分析 在配置完成后,执行make开始编译.这里打开Makefile. 首先在目标all前有一句话首先检查是否有include/config.mk文件来判断是否成功配置过. ifeq ( ...