基于Bootstrap重置输入框内容按钮插件
发布于 2017-04-02 04:55:32 | 101 次阅读 | 评论: 0 | 来源: 网友投递
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
pureClearButton是一款基于Bootstrap的非常实用的用于清空和重置input输入框内容的jQuery按钮插件，感兴趣的小伙伴们可以参考一下
当好在输入框中输入一些内容之后，如果想清除这些内容，可以直接点击输入框右侧的小圆叉按钮即可。
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>
以上就是本文的全部内容，希望对大家的学习有所帮助。