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

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

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

 text
 password
 email
 url
 search
 tel
 number
 datetime

使用方法

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script type="text/javascript" src="https://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="https://www.jb51.net/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> <span>额外元素</span> <input type="text"/> </div>

2、输入框组尺寸

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

<div> <span>额外元素</span> <input type="text"> </div>

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

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

<div> <span> <input type="radio" /> </span> <input type="text" /> </div>

4、额外元素为按钮

额外按钮类.input-group-btn

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

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

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

<div> <div> <button data-toggle="dropdown">button <span></span></button> <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> <input type="text" /> </div>

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

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

<div> <div> <button>button</button> <button data-toggle="dropdown"><span></span></button> <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> <input type="text" /> </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpxgz.html