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的页面底部或中间有一个按钮回到页面顶部,羡慕死人 ...
随机推荐
- 描述Linux运行级别的0-6的各自含义(计时1分钟)
中文: 0:关机 1:单用户模式 2:无网络支持的多用户模式 3:有网络支持的多用户模式(文本模式,工作中最常使用的模式) 4:保留,未使用 5:有网络支持有X-Window支持的多用户模式 6:重新 ...
- MySQL字符集的修改和查看
1.关于MySQL字符集 MySQL的字符集支持(Character Set Support)有两个方面: 字符集(Character set)和排序方式(Collation). MySQL对于字符集 ...
- margin-top无效的解决方法
先上代码: <div id="content" style=" width:750px; height:300px; background:#C29A29; mar ...
- Book LIst
Go ahead. Linux APUE Linux Kernel Development 鸟哥的linux私房菜 基础篇 鸟哥的linux私房菜 服务器篇 Network Computer Netw ...
- Vim 命令整理
1. 文件命令 2. 模式切换 3. 移动命令 4. 书签命令 5. 修改命令 6. 可视化操作 7. 区域选择 8. 宏命令 9. 分屏 10. 系统设置命令 1. 文件命令 [:]开始的命令需要输 ...
- using关键字的用法
1.using 关键字可以用来导命名空间,与java中的import类似. 2.using关键字可以用来释放资源,并且被释放的资源代码是非托管代码. 既然可以释放非托管代码,那么什么是非托管代码? 我 ...
- Google Play笔记之上架
我最近负责Google Play上架的主要工作 ,现已进入开放测试阶段(随后就可全球首发~~).接入工作已完成,这篇记录一下上架后期的笔记. 开放测试 开放测试是指对所有玩家进行开放式测试,玩家可以通 ...
- stunnel+CCProxy,搭建加密代理
总所周知,不可抗拒的特别有用心的原因,我们无法访问youtube,picasa,Twitter……国外优秀网站,很多人采用了代理服务器的方法访问. 如果您有一台放在海外的服务器,这个就好办了.下载一个 ...
- Visual Studio 2015 Community连接到Mysql
版权声明:本文为博主原创文章,未经博主允许不得转载. 本文首发于CSDN:http://blog.csdn.net/cxq2046/article/details/51108256 至今暂未授权其他任 ...
- SqlHelper.cs
public static class SqlHelper { public static object FromDbValue(object value) { if (value == DBNull ...