基于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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
JS实现一个简单的日历
Feb 22 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
js实现窗口全屏示例详解
Sep 17 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通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
php中使用websocket详解
2016/09/23 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
使用JS读秒使用示例
2013/09/21 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
python线性插值解析
2020/07/05 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
营业员演讲稿
2013/12/30 职场文书
项目建议书格式
2014/03/12 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
商标侵权律师函
2015/05/27 职场文书
怎样写观后感
2015/06/19 职场文书
值班管理制度范本
2015/08/06 职场文书