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 分区 物理卷 逻辑卷
今天我们主要说说分区.格式化.SWAP.LVM.软件RAID的创建哈~ 格式化 查看当前分区:fdisk -l 这个命令我们以前是讲过的,我现在问下,ID那项是什么意思? 83 是代表EXT2和E ...
- cal 命令
cal命令是linux里面查看日历的一个命令,效果如下: [root@localhost ~]# cal 十月 日 一 二 三 四 五 六 我们可以的很形象的从日历上看出今天是哪年,哪年的哪天,周几, ...
- ES6箭头函数(Arrow Functions)
ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 1. 具有一个参数的简单函数 var single = a => a single('he ...
- 将treeview控件内容导出图片
项目中有一项需求,需要将项目中的treeview控件展示的树状结构直接导成一张图片.网上方法很多,但很多都是屏幕截屏,我的解决思路是新建一个用户控件,将主窗体的Treeview的数据传给用户控件(不要 ...
- django用户登录和注销
django版本:1.4.21. 一.准备工作 1.新建项目和app [root@yl-web-test srv]# django-admin.py startproject lxysite [roo ...
- [The Basics of Hacking and Penetration Testing] Learn & Practice
Remember to consturct your test environment. Kali Linux & Metasploitable2 & Windows XP
- Strcmp(字符串1,字符串2)函数 Sizeof && strlen() Substr(a,b)
Strcmp(字符串1,字符串2)函数 { strcmp函数是比较两个字符串的大小,返回比较的结果.一般形式是: i=strcmp(字符串,字符串); 其中,字符串1.字符串2均可为字符串常量或变量 ...
- easyUI的dateBox控制时间格式
<input type='text' name='yearQuery' class='easyui-datebox ' data-options="formatter:myformat ...
- 初识hibernate框架之一:进行简单的增删改查操作
Hibernate的优势 l 优秀的Java 持久化层解决方案 (DAO) l 主流的对象—关系映射工具产品 l 简化了JDBC 繁琐的编码 l 将数据库的连接信息都存放在配置文件 l 自己的ORM ...
- 比较全的JavaScript倒计时脚本[xyytit]
需要做一个功能,给特定的活动或者商品添加一个倒计时提示,在网上找了好些方法,总结了比较好的一些方法,以备后用: 1. 比较长时间的倒计时(如:距离2014年还有0年, 0月, 30天, 9小时, 41 ...