入力ボックスにコンテンツを入力した後、これらのコンテンツをクリアする場合は、入力ボックスの右側にある小さな丸いフォークボタンを直接クリックできます。
文章
パスワード
メール
URL
検索
電話
番号
DateTime
使い方
リセット入力入力入力ボックスコンテンツプラグインを使用して、jQueryおよびbootstrapファイル、およびjquery.bootstrap-pureclearbutton.jsファイルをインポートします。
<link rel = "styleSheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/boottrap.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"> src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> <script> <script> <script> <"text/javascript" src = "js/jquery.bootstrap-purecleclecleclecleclecleclecleclecleclecton.js"> </scrip>
HTML構造
このjQueryボタンプラグインのHTML構造は、次の2つの形式のいずれかで使用できます。
<input type = "text" data-pure-clear-button> <入力タイプ= "text" data-pure-clear-button = "true">
プラグインを初期化します
ページが読み込まれたら、次の方法を使用してプラグインを初期化できます。
$ .pureclearbutton.setDefault（{icon： 'glyphicon-plus'}）;方法
jQueryプラグインには4つの方法があります。
.pureclearbuttn（ 'create'）：指定された入力ボックスにクリア/リセットボタンを作成します。
.PureClearButtn（ 'Destroy'）：指定された入力ボックスにクリア/リセットボタンを破棄します。
.pureclearbuttn（ 'show'）：指定された入力ボックスにクリア/リセットボタンを表示します。
.pureclearbuttn（ 'hide'）：指定された入力ボックスにクリア/リセットボタンを非表示にします。
以下は、コンテンツを拡張するためです：ブートストラップ入力ボックス
1.追加のElements.input-Group-Addonを追加します
Autsourcing Elements.input-Group> input-Group-Addon+Form-Control
<div> <span>追加要素</span> <入力タイプ= "テキスト"/> </div>
2。ボックスグループサイズを入力します
control class.input-group-*：.input-group-lg/.input-group-sm
<div> <span id = "sizing-addon1">追加要素</span> <入力型= "text"> </div>
3.追加要素に複数の選択肢または複数の選択肢を追加する
余分な要素で単一またはマルチセレクトボタン要素をネストする
<div> <span> <入力タイプ= "Radio" /> < /span> <入力タイプ= "テキスト" /> < /div>
4。追加の要素はボタンです
追加ボタンclass.input-group-btn
<div> <span> <butth>追加要素ボタン</button> </span> <入力タイプ= "text" class = "form-control"/> </div>
5.追加の要素は、ドロップダウンボタンメニューです
.input-group-btnには、ドロップダウンボタンメニュー要素（トリガーやドロップダウンメニューを含む）が含まれています
<div> <div> <ボタンData-toggle = "Dropdown"> button <span> </span> </button> <ul> <li> <a href = "" "> item1 </a> </li> <li> <a href =" "> item2 </a> </li> </ul> </div> <入力="テキスト "/> </div> div> div> div> div> div> div> div>
6.追加の要素は、[スプリット]ボタンドロップダウンメニューです
追加の要素には、スプリットボタンドロップダウンメニュー（ボタン、トリガー、ドロップダウンメニュー）が含まれます
<div> <div> <butth> button </button> <button data-toggle = "ドロップダウン"> </span> </button> <ul> <li> <a href = "" "> item1 </a> </li> <li> <a href =" "> item2 </a> </li> </ul
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。