Bootstrap3的输入框数字点击修改效果
<div class="container">
<div class="page-header"><h3>Bootstrap 3 输入框数字修改效果</h3></div>
<div class="input-group spinner">
<input type="text" class="form-control" value="1000">
<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>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
/*CSS源代码*/
@import url('http://cdn.gbtags.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css');
@import url('http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');
body{
background:orange;
font-family: 'microsoft yahei',Arial,sans-serif;
color:#FFF;
}
.spinner {
width: 200px;
}
.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: 0;
}
.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: 0;
left: 4px;
}
/*Javascript代码片段*/
(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);
Bootstrap3的输入框数字点击修改效果的更多相关文章
- js实现点击修改按钮之后单元格变成可编辑状态
主要实现原理: 每一行有一个修改按钮 点击修改之后,获取行对象,通过行对象再获取行中单元格数组.然后把每一个单元格中的innerHTML替换成input输入框,并赋值value=原来单元格中的内容,鼠 ...
- Waves – 赞!超炫交互体验的点击动画效果
Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用.只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了.采用 touchstart 与 tou ...
- js单击输入框后弹出提示信息效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android Material适配 为控件设置指定背景色和点击波纹效果
Android Material适配 为控件设置指定背景色和点击波纹效果,有需要的朋友可以参考下. 大部分时候,我们都需要为控件设置指定背景色和点击效果 4.x以下可以使用selector,5.0以上 ...
- iOS UIButton加在window上点击无效果问题
UIButton加在window上,点击没有效果,找了很久,原来是没有加上这名:[self.window makeKeyAndVisible]; self.window = [[UIWindow al ...
- TextView SpannableString 使用之实现可点击超链接效果
TextView SpannableString 使用之实现可点击超链接效果 如果看到这里说明你对 TextView 已经有了一定的了解,至少已经使用过该控件显示文字过.现在来实现一些复杂一点的效果. ...
- Egret 按钮点击缩放效果
非代码设计,exml直接操作 设计模式下选中对象,之后[源码],会直接定位到该对象在exml源码中的位置 width.down = "100%" 表示当按钮按下的时候宽度为 100 ...
- AnimCheckBox按钮点击动画效果《IT蓝豹》
AnimCheckBox按钮点击动画效果 AnimCheckBox按钮点击动画效果,点击选中后勾选框选择效果,很不错的动画功能.项目来源:https://github.com/lguipeng/Ani ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
随机推荐
- UVa 11178:Morley’s Theorem(两射线交点)
Problem DMorley’s TheoremInput: Standard Input Output: Standard Output Morley’s theorem states that ...
- hdu 2857:Mirror and Light(计算几何,点关于直线的对称点,求两线段交点坐标)
Mirror and Light Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- php队列算法[转]
<?php/*** php队列算法* * Create On 2010-6-4* Author Been* QQ:281443751* Email:binbin1129@126.com**/cl ...
- XDocument简单入门
[+] 1.什么是XML? 2.XDocument和XmlDocument的区别? 3.XDocument 4.XmlDocument 5.LINQ to XML 6.XML序列化与反序列化 因为 ...
- A*寻路算法(曼哈顿距离)
前一些天,在群有人问到A*算法的问题. 之前我已经有实现过,并将之放到github上(https://github.com/XJM2013/A_Star).有兴趣的能够下载下来看看. 这里上传了一个相 ...
- Struts2_day03--从值栈获取数据_EL表达式获取值栈数据(为什么)
从值栈获取数据 1 使用struts2的标签+ognl表达式获取值栈数据 (1)<s:property value=”ognl表达式”/> 获取字符串 1 向值栈放字符串 2 在jsp使用 ...
- shell脚本学习总结09--分支与循环结构
if 条件语句 = start ]];then echo start app elif [[ $ = stop ]];then echo stop appelif [[ $1 = ... ]];the ...
- HTML-网页常见错误
400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. HTTP 错误 401 401.1 未授权:登录失败 此错误表明传输给服务器的证书与登录服务器所 ...
- MemSQL start[c]up Round 1.b
二分查找题, 不知道用double的人,用LL果断错了... B. Stadium and Games time limit per test 1 second memory limit per te ...
- docker-compose 部署 selenium-grid
目录 一.安装Docker 二.安装Docker-Compose库 三.准备docker-compose.yaml文件 四.运行 上篇:详细介绍selenium-grid 一.安装Docker 必须要 ...