快捷導(dǎo)航

基于Bootstrap重置輸入框內(nèi)容按鈕插件

更新時間：2016年05月12日 09:07:53 投稿：lijiao

pureClearButton是一款基于Bootstrap的非常實用的用于清空和重置input輸入框內(nèi)容的jQuery按鈕插件，感興趣的小伙伴們可以參考一下

當(dāng)好在輸入框中輸入一些內(nèi)容之后，如果想清除這些內(nèi)容，可以直接點擊輸入框右側(cè)的小圓叉按鈕即可。

text
password
email
url
search
tel
number
datetime

使用方法

使用該重置input輸入框內(nèi)容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件。

<link rel="stylesheet" >
<link rel="stylesheet" >
<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結(jié)構(gòu)

這個jQuery按鈕插件的HTML結(jié)構(gòu)可以使用下面兩種格式中的任意一種。

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

初始化插件

在頁面加載完畢之后，可以使用下面的方法來初始化該插件。

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

方法

該jQuery插件有4個可用的方法：
.pureClearButtn('create')：在指定輸入框中創(chuàng)建一個清除/重置按鈕。
.pureClearButtn('destroy')：在指定輸入框中銷毀一個清除/重置按鈕。
.pureClearButtn('show')：在指定輸入框中顯示一個清除/重置按鈕。
.pureClearButtn('hide')：在指定輸入框中隱藏一個清除/重置按鈕。

下面再為大家進(jìn)行擴(kuò)展內(nèi)容：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包含下拉按鈕菜單元素(包括觸發(fā)器和下拉菜單)

<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、額外元素為分裂式按鈕下拉菜單

額外元素包含分裂式按鈕下拉菜單(按鈕，觸發(fā)器和下拉菜單)

<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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: