基于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 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
node实现基于token的身份验证
Apr 09 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
学习python的前途 python挣钱
2019/02/27 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Django如何将URL映射到视图
2019/07/29 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
高三毕业典礼演讲稿
2014/05/13 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书