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);
转载于:https://www.cnblogs.com/honeynm/p/5223249.html
Bootstrap3的输入框数字点击修改效果相关推荐
- 使用css实现点击切换效果
使用css制作简单的点击切换效果,参考了以下教程:css实现的轮播和点击切换(无js版) 首先先制作一个容器,用来容纳所显示的内容: HTML代码: <html></html> ...
- 【总结】实现点击累加效果的几种方式对比
//实现点击累加效果的几种方式对比Author:李金涛:Time:2018-1-1(新年新气象,更上一层楼.持续写博客.不断总结优化,博观约取,才能厚积薄发!)// 1,利用全局作用域不销毁的原理,把 ...
- android 日历翻页动画,Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果
废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧 ...
- 点击修改按钮,将数据显示在弹层窗口中,利用ajax实现
最近要做的这个东西,挺费事的,其实我也是菜鸟,可是工作分给你了,哭着也要做完,然后就这么哭着开始做了.废话不说了,开始说项目: 首先这是一个这种效果的东西,点击"修改"弹出一个窗口 ...
- 加强【圣域2】各个技能的打击感-华丽的击飞效果
这是2013在网易博客写的一篇帖子,在百度圣域吧也发过类似的帖子:加强圣域2各个技能的打击感-华丽的击飞效果 多年后网易博客也差不多走到尽头,圣域2还是不愠不火,贴吧里活跃的还是那些人,为了防止哪天网 ...
- Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
上一篇:Android 天气APP(十二)空气质量.UI优化调整 天气预报详情,逐小时预报详情 新版------------------- 一.适配器点击监听 二.页面实现 三.天气预报详情弹窗 四. ...
- Vue3 使用vant actionBar组件后对icon图标的点击切换效果/点击收藏/取消收藏
制作收藏的点击收藏.取消收藏的图标切换效果 效果: vue: <template><van-action-bar><van-action-bar-icon icon=&q ...
- html 导航栏 选中状态,jQuery“导航栏点击选中效果“代码
现在的网站菜单导航栏几乎都有点击选中效果,正好今天我在开发项目中也需要用上这样的效果,下面就给大家分享一下,亲测有效,大家放心使用. 1.引入jQuery核心文件 2.加入"jQuery导航 ...
- (layui)点击加号添加电话输入框,点击减号,电话输入框删除
点击加号会增加子电话输入框,点击子电话输入框后的减号,输入框消失.效果如图所示: 代码如下: 引入外部的js文件: <script th:src="@{/customers/custo ...
最新文章
- leetcode-135 分发糖果
- 【Python 第8课】while
- 周洪立:一个外交官眼里的盛大文化
- Java并发——线程间通信与同步技术
- base64加密解密实现方法
- Go 语言编程 — gorm 的数据完整性约束
- 信息系统项目管理师-计算题专题(一)进度类计算
- boost::proto::noinvoke相关的测试程序
- 为什么说Prometheus是足以取代Zabbix的监控神器?
- linux perl 安装目录,肿么查看linux是否安装了perl
- 【MFC系列-第33天】链接控件自绘技术
- inotify-tools对文件及目录访问进行记录
- 永久linux修改内核打印级别,终端下更改printk打印级别
- 如何获取web视频数据流的传输?小姐姐的视频都被我爬下来了,这谁顶得住
- Excel中 对「对话气泡(吹き出し)」中的文字添加删除线 等操作
- NBSI2内部功能实现大揭谜
- Android之USB打印
- video标签实现简单视频背景+遇到问题(视频无法显示,不能自动播放)
- ios图片放大之后如何不模糊_图片放大后模糊怎么办 怎么放大图片不失真|放大图片保持清晰度的方法...
- Origin 2017 给曲线加标记符号
热门文章
- 深入理解Tomcat系列之一:系统架构(转)
- VMware SDS 之一:什么是VSAN??
- Linux常用命令大全(持续更新)
- PAT 1081. 检查密码 (15) - 乙级
- 1008. 数组元素循环右移问题 (20)-PAT乙级真题
- python3简明教程-实验楼_#python实验楼教程#学Python哪里有一问一答的Python学习?求具体的~...
- 固件是通用的吗_冷镦和冷挤压是一回事吗,两者有什么区别?
- 联合索引会创建几个索引_联合索引在B+Tree上的存储结构及数据查找方式
- 几个常用存储引擎的特点
- mysql字符串区分大小写的问题