前の記事では、ブートストラップコンポーネントシリーズにいくつかの有用なコンポーネントを紹介しました（推奨）。次に、この記事では、ブートストラップコンポーネントシリーズにいくつかの有用なコンポーネントを紹介します（推奨2）。興味のある友達は一緒に学びます！
7。マルチ値入力コンポーネントマニフェスト
テキストボックスのマルチバリュー入力に関して、それは常に一般的な要件でした。今日、ブロガーは、すべての人に便利なマルチ値入力コンポーネントを推奨しています。私に感謝しないでください、私を「赤いスカーフ」と呼んでください！
1。エフェクトディスプレイ
ローカルマルチバリュー入力ボックス
リモートマルチバリュー入力ボックス
2。ソースコードの説明
オープンソースコミュニティと共有したいかわいい人に感謝します。オープンソースアドレス。
3。コードの例
（1）ローカル多値入力
まず、次のファイルを参照する必要があります
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/jquery-manifest-master/src/jquery.manifest.cs" rel = "styleSheet"/> <スクリプト " src = "〜/content/bootstrap/js/bootstrap.js"> </script> <scrip src = "〜/content/jquery-manifest-master/build/jquery.ui.widget.js"> </script> <script src = "〜/content-jquery-manifest-manifest-manifest/jcery
ブートストラップのJSおよびCSSファイルは必要ありません。この記事は良いスタイルのためにあるため、参照されます。マニフェストコンポーネントはブートストラップに依存するのではなく、jQueryに依存します。さらに、jquery.manifest.css、jquery.ui.widget.js、jquery.marcopolo.jsの3つのファイルも参照する必要があります。
次に、HTMLとJSの初期化があります
<input type = 'text' autocomplete = "off" id = "txt_man"/> <script = "text/javascript"> $（function（）{$（ '＃txt_man'）。manifest（）;}）; </scrip>上記の簡単な手順を通じて、上記の効果を生成できます。とても簡単ではありませんか？その使用法のいくつかを見てみましょう
//共通プロパティ：テキストボックス内のすべてのアイテムのコレクションを取得var値= $（ '＃txt_man'）。マニフェスト（ 'values'）; //共通方法1：最後のアイテム$（ '＃txt_man'）。マニフェスト（ 'remove'、 '：last'）; //共通メソッド2：アイテムテキストボックスに新しいアイテムを追加します。 2番目のパラメーターの形式は、json data $（ '＃txt_man'）の形式によって決定されます。マニフェスト（ 'add'、{id： "1"、name： "abc"}）; //共通方法3：リモート検索データ$（ '＃txt_man'）。 $（ '＃txt_man'） $（ '＃txt_man'）。（2）リモート多値入力
リモート検索入力への方法では、URLアドレスを提供し、データを取得してからブラウザに戻す必要があります。簡単にするために、この記事では、ソースコードWebサイトのURLを使用して効果を表示します。
まず、JSファイルを参照する必要があります
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/jquery-manifest-master/src/jquery.manifest.cs" rel = "styleSheet"/> <スクリプト " src = "〜/content/bootstrap/js/bootstrap.js"> </scrip> <script src = "〜/content/jquery-manifest-master/build/jquery.ui.widget.js"> </scrip> <スクリプトsrc = "〜/content/jquery-manifest-master/build/parts/jquery.marcopolo.js"> </script> <script src = "〜/content/jquery-manifest-master/build/jquery.manifest.js"> </script>
上記と比較して、ファイルjquery.marcopolo.jsへの追加の参照があります。
次に、HTMLとJSの初期化があります
<form action = "https://api.foursquare.com/v2/venues/search?callback=？" method ""> <div> <div> <入力タイプ= 'text' id = "txt_man2"/> <img src = "〜/content/jquery-manifest-master/bushid.gif"/> </div> </form> <script type = "text/javascript"> $（functid（）{$（ '＃txt_man2'）。 （data、$ item、$ mpitem）{return data.name;}、formatvalue：function（data、$ value、$ item、$ mpitem）{return data.id;}、marcopolo：{data：{client_id： 'no2mtqvbqanw3q3sg23ofvmegyowizdt4e1qhrpzo0bfcn4x'、client_secret： 'lg2wrkks1sxz2fmkdg01ldw1kdtekktulm0xevwrn0lhb' '20150601'}、formatdata：function（data）{return data.response.venues;}、formatiTem：function（data、$ item）{return data.name;}、minchars：3、param： 'query'}、必須：true}）;}）; </script>各パラメーターの重要性については、必要な場合は簡単に理解できるはずです。ブロガーは、このリモート検索方法の返品値を簡単に監視しました
公園の友人がこのリモートメソッドを自分で使用する場合は、このデータ形式を参照して実装できます。
8。テキストボックス検索コンポーネントBootstrap-Typeahead
実際、多くのコンポーネントには、テキストボックス検索の機能に関するこの機能があります。たとえば、jquery UIには、ブロガーが自動完成を実現するために使用していたオートコンプリートコンポーネントがあります。ブートストラップテキストボックスの自動検索コンポーネントは、オンラインで浮上しています。今日このコンポーネントを選んだ理由は、Bootstrapのスタイルに似ており、コンポーネントが小さく、シンプルで実用的だと思うからです。
1。エフェクトディスプレイ
ローカル静的検索（データソースはローカル）
リモート検索（データソースはAJAXリクエストを通じてリモートで取得されます）
2。ソースコードの説明
ソースコードの説明
3。コードの例
参照する必要がある最初のファイル：主にCSSとJSファイルが含まれています。 JQueryとBootstrapからのサポートが必要です。
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/demo/css/prettify src = "〜/content/jquery-1.9.1.js"> </script> <scrit src = "〜/content/bootstrap/js/bootstrap.js"> </script> <スクリプトsrc = "〜/content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"> </script>
次に、コンポーネントの初期化
<input type = 'text' id = "txt_man" />
データソースローカル
<script type = "text/javascript"> $（function（）{$（ "＃txt_man"）。typeahead（{source：[key：1、value： 'toronto'}、{key：2、value： 'montreal'}、{key：3、value： 'new York'}、{key： 'value：' buffalo 'buffalo' buffalo 'buffalo' buffalo 'buffalo' buffalo 'buffalo' bublalo }、{key：6、value： 'columbus'}、{key：7、value： 'dallas'}、{key：8、value： 'vancouver'}、{key：9、value： 'seattle'}、{key：10、value： 'los Angeles'}]データソースは、AJAXリクエストを通じて取得されます
<script type = "text/javascript"> $（function（）{$（ "＃txt_man"）。typeahead（{ajax：{url： '/home2/typeaheaddata'、timeout：300、method： 'post'、triggerlength：1、loadingclass：null、display：null、null、null：null、preprocess：null、preprocess： "value"、val： "key"}）;}）; </script>背景に対応するテスト方法
public jsonresult typeaheaddata（）{var lstres = new list <object>（）;一般的なプロパティ：
•表示：表示されたフィールド名
•Val：実際の値
•アイテム：デフォルトで表示される検索結果の数。デフォルト値は8です
•ソース：ローカルデータソースは、配列としてフォーマットされています。
•ajax：ajaxが要求するオブジェクトは、直接文字列URLまたはオブジェクトオブジェクトにすることができます。オブジェクトオブジェクトの場合、URLについては話しません。 TriggerLengthプロパティは、複数の文字の入力が検索をトリガーすることを示します。
一般的に使用されるイベント：
•ItemSelected：検索値が選択されたときにトリガーされます。
<script type = "text/javascript"> $（function（）{$（ "＃txt_man"）。typeahead（{ajax：{url： '/home2/typeaheaddata'、timeout：300、method： 'post'、triggerlength：1、loadingclass：null、display：null、null、null：null、preprocess：null、preprocess： "value"、val： "key"、itemselected：function（item、val、text）{}}）;}）; </script>パラメーターアイテムは、選択したオブジェクトを表し、パラメーターVALは選択したアイテムの実際の値を表し、テキストは選択したアイテムの表示値を表します。
9。Bootstrapステップコンポーネント
ブートストラップステップコンポーネントについては、前の記事でYSTEPウィジェットを導入しました。タスクの進捗状況を表示する上で特定の役割を果たすことができますが、一部の複雑なビジネスでは、現在のステップに従って対応するビジネスに対処することは少し無力です。今日、ブロガーは非常に良い効果を持つステップコンポーネントを導入します。このコンポーネントを使用すると、プログラマーは複雑なステップデザインを心配する必要がなくなりました。
1。エフェクトディスプレイ
スタイルを垣間見ることができます
「前のステップ」と「次のステップ」の手順に従ってください
その他のステップ
2。ソースコードの説明
このコンポーネントは、Blogger Onlineによって見つかりました。多くのスタイルと使用法がブートストラップからのものであることがわかりました。私が参照する必要があるのは、JSとCSSファイルだけです。ソースコードソースはまだ見つかりません。誰かがソースコードソースを知っている場合は、ブロガーに伝えることができます。さらに、著者の労働結果を尊重するために、ブロガーは独創性を尊重しなければなりません！
3。コードの例
参照する必要があるファイル
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/bootstrap-step/css/bs-is-fun.css" rel = "stylesheet"/> <script src = " src = "〜/content/bootstrap/js/bootstrap.js"> </script> <script src = "〜/content/bootstrap-step/js/brush.js"> </script>
BS-IS-FUN.CSSおよびBRUSH.JSを参照する必要があり、コンポーネントはjQueryとBootstrapのサポートが必要です。
次に、コンポーネントの初期化があります。
（1）矢印
<ul> <li> <a> step1 </a> </li> <li> <a> step2 </a> </li> <li> <a> step3 </a> </li> </ul>
静的なステップの場合、上記の写真に矢印ステップの効果を確認するために上記のHTMLコードのみが必要です。ここでのアクティブなスタイルは、ステップが通過したスタイルを表しています。
（2）正方形
<ul> <li> <a> step1 </a> </li> <li> <a> step2 </a> </li> <li> <a> step3 </a> </li> </ul>
（3）円形の形状
<ul> <li> <a> step1 </a> </li> <li> <a> step2 </a> </li> <li> <a> step3 </a> </li> </ul>
（4）進捗バー
<ul> <li> <a> step1 <span> </span> </a> </li> <li> <a> step2 <span> </span> </a> </li> <li> <a> step3 <span > </span> </a> </li> <li> <a> step4 <span> </span> </a> </li> <li> <a> step5 <span> </span> </a> </li> </ul>
（5）前のステップ、次のステップ
上の写真の「前のステップ」と「次のステップ」は、ブートストラップモーダルコンポーネントで自分で定義されているか、参照用にコードが投稿されています。
<div id = "mymodalnext"> <div> <div> <div> <button type = "button" button "data-dismiss =" modal "aria-label =" close "> <span aria-hidden =" true ">×</span> </button> <h4>オプション構成</h4> <ul> <a>ステップ2 <span> </span> </a> </li> <li> <a>ステップ3 <Span> </span> </a> </li> <li> <a>ステップ4 <Span> </span> </a> </li> </li> </li> </li> </div> <div> <div> <div div> <div div div> "carousel" carousel = "fight int" "filed" "filed役割= "listbox"> <div> <p>ステップ1 </p> <div>ロールの構成</div> <div> <div> <入力タイプ= "テキスト"/> </div> <div> <button = "button"> save </button> </div> <p>ステップ2 </p> <div> type = "button"> save </button> </div> <div> <p>ステップ3 </p> </div> <div> <p>ステップ4 </p> </div> <p>ステップ5 </p> </div> <div> <p>ステップ6 </p> </div> </div> </div type = "button"> next </button> </div> </div> </div>
もちろん、2つのボタンのクリックイベントを登録する必要があります
$（ "＃myModalNext .Modal-Footerボタン"）。各（function（）{$（this）.click（function（）{if（$（this）.hasclass（ "mn-next"））{$（ "＃mymodalnext .carousel"）。carousel（ 'next'）; li.active "）。 li.active "）ロジックは不完全である可能性があり、正式に使用するとテストが必要です。
10。ボタンロードコンポーネントラッダブートストラップ
ボタンの読み込みに関して、ブロガーは長い間最適化するのに適したコンポーネントを見つけたいと思っていました。処理されていない場合、繰り返される操作の可能性は間違いありません。今日はこのような小さなことを見てみましょう。
1。エフェクトディスプレイ
最初の出会い
カスタムカラー、サイズ、進行状況バー
2。ソースコードの説明
ソースコードアドレス
3。コードの例
参照する必要があるファイル
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-theemeless.min.cs src="~/Content/jquery-1.9.1.js"></script><script src="~/Content/bootstrap/js/bootstrap.js"></script><script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/spin.min.js"></script><script src = "〜/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"> </script>
コンポーネントの初期化：4つのボタンを初期化します
<ボタンデータスタイル= "Expand-left"> <span> expand-left </span> </button> <button data-style = "expand-right"> <span> expand-right </span> </button> <button data-style = "zoom-in"> <span> zoom-in </span> </button> <button = "zoom-out"> </button> </> </> </n < {$（ 'button'）。クリック（function（e）{e.preventdefault（）; var l = ladda.create（this）; l.start（）; l.setprogress（0-1）; $。post（ "/home2/typeaheaddata"、{}、{}、{}、function（data、statu）{console（statu）; l.stop（）;}）;}）;}）;コードの疑い：理解するのは難しくないはずです。コンポーネントの初期化に伴うコードvar l = ladda.create（this）; l.start（）;ここで、これは現在クリックされているボタンのオブジェクトを表します（これはjQueryオブジェクトの代わりにDOMオブジェクトであることに注意してください）。リクエストが完了したら、負荷を閉じます。
（1）すべてのデータスタイルのオプションは次のとおりです。興味がある場合は、試して、効果が何であるかを確認できます。
data-style = "Expand-left"
data-style = "Expand-right"
data-style = "Expand-up"
data-style = "Expand-Down"
data-style = "zoom-in"
data-style = "zoom-out"
data-style = "Slide-left"
data-style = "Slide-right"
data-style = "Slide-up"
data-style = "スライドダウン"
data-style = "契約"
（2）ボタンのサイズを調整する必要がある場合、コンポーネントにはデータサイズのプロパティが組み込まれています。すべてのデータサイズのオプションは次のとおりです。
data-size = "xs"
data-size = "s"
data-size = "l"
（3）ボタンの色を設定する必要がある場合は、Data-Spinner-Colorを使用してください
data-spinner-color = "＃ff0000"
（4）ボタンの進行状況バーの設定
ladda.bind（ 'button'、{callback：function（instance）{var progress = 0; var interval = setInterval（）{progress = math.min（progress + math.random（） * 0.1、1）; instance.setProgress（Progress === 1）{intoun 200）;}}）;}）;現在の実行の進行状況は、主に文のinstance.setprogress（進行状況）を介して設定され、進行値は0〜1の間です。もちろん、上記は進行状況効果をテストするためのコードです。公式プロジェクトでは、現在の要求実行状況を計算して、進行状況を動的に返す必要があります。
11。コンポーネントブートストラップスイッチを切り替えます
Bootstrapの中国のWebサイトのホームページでは、そのようなコンポーネントを見つけることができます
1。エフェクトディスプレイ
初期効果
さまざまな属性とイベント
2。ソースコードの説明
ブートストラップスイッチソースコードアドレス：https：//github.com/nostalgiaz/bootstrap-switch
Bootstrap-Switchドキュメントとデモ：http：//www.bootstrap-switch.org/examples.html
3。コードの例
参照する必要があるファイル
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/bootstrap-switch-master/bootstrap-switch-master/dist/css/bootstrap3/boottrap-switch.css src = "〜/content/jquery-1.9.1.js"> </script> <スクリプトsrc = "〜/content/bootstrap/js/bootstrap.js"> </script> <script> <content/content/bootstrap-switch-master/bootstrap-switch-master//js/js/bootstrap-switch.js ">
コンポーネントはjQueryとブートストラップに依存します
次に、HTMLとJSの初期化があります
<入力型= "チェックボックス" checked /> $（function（）{$（ 'input [type = checkbox]'）。bootstrapswitch（{size： "varge"}）;}）サイズ属性は必要ありません。デフォルトのスタイルを使用する場合、パラメーターは渡されません。
一般的に使用されるプロパティ
•サイズ：スイッチサイズ。オプションの値は「ミニ」、「小」、「通常」、「大規模」です
•oncolor：スイッチのオンボタンの色。オプションの値には、「プライマリ」、「情報」、「成功」、「警告」、「危険」、「デフォルト」が含まれます。
•オフカラー：オフボタンの色のスイッチの色。オプションの値「プライマリ」、「情報」、「成功」、「警告」、「危険」、「デフォルト」
•ontext：スイッチ内のボタンのテキスト、デフォルトは「on」です。
•オフテキスト：スイッチのテキストはデフォルトで「オフ」です。
•oninit：コンポーネントを初期化するイベント。
•onswitchchange：スイッチが変更されたときのイベント。
一般的なイベントと方法を使用してドキュメントを直接表示することができ、公式は非常に詳細な説明を提供します。
12。スコアリングコンポーネントブートストラップスターレーティング
誰もが10日目と10番目のタオバオの評価の評価を知っている必要があります。誤ってブートストラップスタイルの評価コンポーネントを見つけました。面白いと思いました。将来のeコマース、コミュニティ、フォーラムシステムに役立つかもしれないので、私はそれを共有します。
1。エフェクトディスプレイ
2。ソースコードの説明
ソースコードのダウンロード
3。コードの例
このコンポーネントには、jQueryおよびブートストラップスタイルのサポートが必要です
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/bootstrap-star-star-rating-master/bootstar-star-star-rating-master/css/star-rating.css" rel = "styleSheet"/> <スクリプトsrc = "〜/content/jquery-1.9.1.js"> </script> <スクリプトsrc = "〜/content/bootstrap-star-star-rating-master/bootstrap-star-star-rating-master/js/star-rating.js"> </scrip> <スクリプトsrc = "〜/content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/loces/zh.js"> </script>
HTML初期コンポーネントを直接介して
<入力ID = "input-2b" type = "number" min = "0" max = "5" step = "0.5" data-size = "xl" data-symbol = "" "" data-default-caption = "{rating} hearts =" {} "> <input id =" input-21a ""タイプ= "" "" typing = 0 "" "typ = 0" data-size="xl"><input id="input-21b" value="4" type="number" min=0 max=5 step=0.2 data-size="lg"><input id="input-21c" value="0" type="number" min=0 max=8 step=0.5 data-size="xl" data-stars="8"><input id="input-21d" value="2" type="number" min = 0 max = 5 step = 0.5 data-size = "sm"> <input id = "input-21e" value = "0" type = "number" min = 0 max = 5 step = 0.5 data-size = "xs"> <input id = "input-21f" value = "0" type = "number" min = 0 max = 5ステップmax = "5" step = "0.5" data-stars = 5data-symbol = "" "data-default-caption =" {rating} hearts "data-star-captions =" {} "> <input id =" input-22 "value =" "type =" number "min = 0 max = 5ステップコンポーネントは、class = "rating"を介して初期化されます。理解しやすいパラメーターは次のとおりです。
•値：コンポーネントの初期化時のデフォルトスコアを表します
•最小：最小スコア
•最大：最大スコア
•ステップ：毎回追加された最小スケール
•データサイズ：星のサイズ
•データスター：星の数
$（ "＃input-21a"）。val（）を使用して、現在のスコアを取得できます。
上記は、編集者が紹介したブートストラップコンポーネントシリーズの有用なコンポーネントです（推奨2）。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！