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 ...
随机推荐
- 【BZOJ】1689: [Usaco2005 Open] Muddy roads 泥泞的路(贪心)
http://www.lydsy.com/JudgeOnline/problem.php?id=1689 一开始我也想到了贪心,,,策略是如果两个连续的水池的距离小于l的话,那么就将他们链接起来,,, ...
- 【NLP】course
http://52opencourse.com/235/%E6%96%AF%E5%9D%A6%E7%A6%8F%E5%A4%A7%E5%AD%A6%E8%87%AA%E7%84%B6%E8%AF%AD ...
- Windows下安装Apache 2.2.21图文教程
https://www.jb51.net/article/52086.htm 本文详细介绍了在Windows平台上安装Apache的过程,希望对初次安装Apache的朋友有所帮助. 1. 软件准备 我 ...
- 在 Ubuntu Mate 16.04 上通过 PPA 升级 Mate 1.14
导读 Mate 桌面环境 1.14 现在可以在 Ubuntu Mate 16.04 ("Xenial Xerus") 上使用了.根据这个版本的描述,为了全面测试 Mate 1.14 ...
- js 识别汉字和全角字符
遇到个问题,需要检测输入框中的字符长度,如果是汉字,算作2个字节。。。 然后我就在想,我怎么去识别他是不是汉字呢???首先想到的可能就是 js 的 charCodeAt 方法, ASCII 码,然后就 ...
- MyBatis 学习 - 注解
首先,POJO /** * @Title: Question.java * @Package com.test.model * @Description: TODO(POJO Question) * ...
- 05.Curator分布式锁
锁:分布式的锁全局同步,这意味着任何一个时间点不会有两个客户端都拥有相同的锁. 1.可重入锁Shared Reentrant Lock 首先我们先看一个全局可重入的锁(可以多次获取,不 ...
- Groovy基本句法
Groovy基本句法 Gradle作为一个构建工具自然不会自己去创造一门语言来支撑自己,那么它用的是哪门子语言呢?什么语言能写成这样: task hello { doLast { println 'H ...
- Exchange Pause or stop transport service
The Microsoft Exchange Transport service is a service available both on the Microsoft Exchange Serve ...
- json和jsonp解决跨域传输数据等
https://kb.cnblogs.com/page/139725/ https://blog.csdn.net/lambert310/article/details/51683775