基于Bootstrap重置输入框内容按钮插件


Posted in Javascript onMay 12, 2016

当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可。

基于Bootstrap重置输入框内容按钮插件

 text
 password
 email
 url
 search
 tel
 number
 datetime

使用方法

使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.bootstrap-pureClearButton.js"></script>

 HTML结构

这个jQuery按钮插件的HTML结构可以使用下面两种格式中的任意一种。

<input type="text" data-pure-clear-button>
<input type="text" data-pure-clear-button="true">

初始化插件

在页面加载完毕之后,可以使用下面的方法来初始化该插件。

$.pureClearButton.setDefault({
 icon: 'glyphicon-plus'
});

方法

该jQuery插件有4个可用的方法:
 .pureClearButtn('create'):在指定输入框中创建一个清除/重置按钮。
 .pureClearButtn('destroy'):在指定输入框中销毁一个清除/重置按钮。
 .pureClearButtn('show'):在指定输入框中显示一个清除/重置按钮。
 .pureClearButtn('hide'):在指定输入框中隐藏一个清除/重置按钮。

下面再为大家进行扩展内容:Bootstrap输入框

1、添加额外元素.input-group-addon

外包元素.input-group>input-group-addon+form-control

<div class="input-group">
 <span class="input-group-addon">额外元素</span>
 <input type="text" class="form-control"/>
</div>

2、输入框组尺寸

控制类.input-group-*: .input-group-lg/.input-group-sm

<div class="input-group input-group-lg">
 <span class="input-group-addon" id="sizing-addon1">额外元素</span>
 <input type="text" class="form-control">
</div>

3、额外元素添加单选或多选

在额外元素中嵌套单选或多选按钮元素

<div class="input-group">
 <span class="input-group-addon">
  <input type="radio" />
 </span>
 <input type="text" class="form-control" />
</div>

4、额外元素为按钮

额外按钮类.input-group-btn

<div class="input-group">
 <span class="input-group-btn">
   <button class="btn btn-default">额外元素按钮</button>
 </span>
 <input type="text"class="form-control" />
</div>

5、额外元素为下拉按钮菜单

.input-group-btn包含下拉按钮菜单元素(包括触发器和下拉菜单)

<div class="input-group">
 <div class="input-group-btn">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">button <span class="caret"></span></button>
  <ul class="dropdown-menu">
   <li><a href="">item1</a></li>
   <li><a href="">item2</a></li>
  </ul>
 </div>
 <input type="text" class="form-control" />
</div>

6、额外元素为分裂式按钮下拉菜单

额外元素包含分裂式按钮下拉菜单(按钮,触发器和下拉菜单)

<div class="input-group">
 <div class="input-group-btn">
  <button class="btn btn-default dropdown-toggle">button</button>
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu">
   <li><a href="">item1</a></li>
   <li><a href="">item2</a></li>
   </ul>
 </div>
 <input type="text" class="form-control" />
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
深入理解node.js之path模块
May 03 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
JS获取当前时间戳方法解析
Aug 29 Javascript
js实现滚动条自动滚动
Dec 13 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 #Javascript
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 #Javascript
Bootstrap组件(一)之菜单
May 11 #Javascript
Bootstrap 组件之按钮(二)
May 11 #Javascript
jQuery验证插件validate使用详解
May 11 #Javascript
JQuery validate插件验证用户注册信息
May 11 #Javascript
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
市场营销管理制度
2014/01/29 职场文书
幼儿园开学寄语
2014/04/03 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
感恩节活动策划方案
2014/05/16 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
2014年底工作总结
2014/12/15 职场文书
避暑山庄导游词
2015/02/04 职场文书
计划生育目标责任书
2015/05/09 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle