序文：最近、ブートストラップコンポーネントを使用していたとき、使いやすい問題が見つかりました。多くの単純なコンポーネントの初期化には、単純な選択タグなど、JSに多くの初期化コードを書く必要があります。バックグラウンドからデータを取得してオプションに入力する必要があるが、バックグラウンドからデータを取得するにはJS初期化が必要なため、ページが初期化されたときにJS初期化コードに多くの重複コードが発生するため、非常に面倒です。そこで、Bootstrapテーブルのデータ属性を思い出しました。データ - *を使用して、HTMLで簡単なコンポーネントを直接初期化できれば、とてもクールです。まず、ブートストラップテーブルのドキュメントを見てみましょう。
Bootstrapテーブルのほとんどすべてのプロパティとイベントがデータで使用できることがわかります。その後、ブロガーは調査を開始します。 data-*このことはどこから来たのですか？
1。jQuery data（）に関する予備研究
オンラインで検索した後、最終的にデータのソースを見つけました。 JQueryとHTML5からのものであることが判明しました。良いこと、本当に良いこと！ jQuery APIを見てみましょう
元の使用法は次のとおりです。
関数は実際には非常に明白です。これは、特定の属性とデータを要素に追加するか、値を取ることです。
data（）メソッドとHTML5データ - *属性の組み合わせを見てみましょう
ハハ、これは良いです。 html5 data-*によって設定された値は、jqueryのデータ（）メソッドを使用して取得できます。ここのルールは次のとおりです。
1）すべてのデータ属性は、「データ」から開始する必要があります。
2）属性は「 - 」で区切られます。
3）jQueryで属性を取得するときは、「データ」と「 - 」を削除するだけです。
これを基礎として、タグにプロパティを設定し、JSで対応するプロパティを取得する方法を知っています。コンボボックスの最後のカプセル化の例と組み合わせて、以下に説明しましょう。
2。JQUERYデータ（）はデータ - *初期化コンポーネントを実装します
以前のJSコンポーネントシリーズ - 独自のJSコンポーネントをカプセル化することを忘れないでください。この記事では、単純なコンボボックスをカプセル化することもできます。この記事では、URLを介してバックエンドからデータを取得できます。したがって、以下では、このコンポーネントの基礎に最善を尽くし、Data-*属性をSelectタグに直接追加して、ドロップダウンボックスコンポーネントを初期化します。
1。JSコンポーネントカプセル化コード
（function（$）{//1。jquery拡張法Combobox $ .fn.combobox = function（options、param）{if（typeof options == 'string'）{return $ .fn.combobox.methods [options]（this、param）;} // 2。 $。 Option.Text.PlaceHolder.// 4。 option.onbeLoad.call（option.param）; （I、varオプション> </option> '） （オプション）return。 $ .getJson（url、function（data）{jq.empty（）; var option = $（ '<option> </option>'）; option.attr（ 'value'、 ''）; option.text（ 'select'）; jq.append（option）; $。each（data、function（i、item）{var option = $（ '<option> <option> <option>項目['valuefield'）]; }}; // 6。デフォルトパラメーターリスト$ $ .fn.combobox.defaults = {url：null、param：null、null、null、null、valuefield： 'value'、textfield： 'text'、placeholder： 'select'、onbeforoad：function（param）{}、onloadsuccess：function（）{}、onchange（value）{}; //この段落は新しく追加され、初期化方法$（document）.ready（function（）{$（'。combobox '）。 }）（jQuery）;ほとんどのコードは、最後のコードと変わりません。次の段落に焦点を当てましょう
//この段落が新しく追加されました。ページの初期化が完了した後、初期化方法$（document）.ready（function（）{$（'。combobox '）。各（function（）{var $ combobox = $（this）; $ .fn.combobox.call（$ combobox.call、$ combox.data（）;}）}）;ページの初期化が完了した後、コンポーネントがスタイルセレクターを介して初期化されることは明らかです。それぞれが使用されます。複数の.comboboxスタイルがある場合は、それぞれを順番に非イニタイアル化します。コールメソッドを呼び出して、$ .fn.combobox.call（$ combobox、$ combobox.data（））を介してcomboboxの初期化を呼び出します。コールメソッドの2つのパラメーターは次のとおりです。
1）現在初期化されているjQueryオブジェクト
2）パラメーターリスト。ここでは、$ combox.data（）を介して取得されたデータ - *属性はすべてHTMLデータ - *属性です。すべてのdata-*属性をパラメーターとしてcomboboxの初期化方法に渡します。
2。データを介してHTMLで初期化 - *
<選択id = "search_" name = "search_province" data-url = "/home/getProvince" data-param = '{"type"： "0"}' data-text-field = "name" data-value-field = "id"> </select>データ - *属性を指定します。上記から、ここでの初期化はスタイルSelector.comboboxを介してコンポーネントを初期化することであることがわかっているため、データ - *を使用するにはコンポーネントを初期化する場合は、背景が初期化する必要があるタグを取得できるようにクラス= "コンボボックス"スタイルを設定する必要があります。
3.バックエンドC＃メソッド
パブリッククラスのHomeController：Controller {public List <String> lstprovince = new List <String>（）{"Beijing"、 "Tianjin"、 "Chongqing"、 "shanghai"、 "hebei"、 "shanxi"、 "liaoning"、 "jilin"、 "jiangian 「Anhui」、「Fujian」、「Jiangxi」、「Shandong」、「Henan」、「Hubei」、「Hunan」、「Guangdong」、「Hainan」、「Sichuan」、「Guizhou」、「Yunnan」、「Yannan」、「Shaanxi」、「Ta "" Quncibence "、" Quncibence "、" Quncince "」、モンゴルの自律地域」、「広東Zhuang自治地域」、「チベット自律地域」、「Ningxia hui自律地域」、「Xinxia Uygur自律地」、「香港特別管理地域」、「マカオ特別行政区」}; public jsonresult getprovince（string type）{var lstres = new list <ument>（）; for（var i = 0; i <10; i ++）{var omodel = new province（）; omodel.id = i; omodel.name = lstprovince [i]; LSTRES.ADD（オモデル）; } return json（lstres、jsonrequestbehavior.allowget）; }} public class province {public int id {get;セット; } public string name {get;セット; }}コードのテストについて何も言うことはありません。
4。デバッグ効果
効果を得てください
これは基本的に、データ - *を介してコンポーネントの初期化を完了します。
3。概要
上記は、html5 data-*属性と組み合わせたjquery data（）メソッドの使用を簡単に示しています。基本的にブロガーのニーズを満たすことができます。タグを直接初期化するために、JSコードのもう1つの行を記述する必要はありません。使用する場合は、jquery.jsとjquery.extension.jsファイルを参照してください。しかし、それはHTML5の機能であるため、ブラウザには特定の要件が必要である必要があることを知っています。もちろん、この使用機能は比較的基本的ですが、いくつかの単純なコンポーネントの初期化には十分です。
記事に誤った理解がある場合は、それを指摘してください。ブロガーは非常に感謝しています。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。