Préface: Les deux articles précédents encapsulent certains composants de forme de base, et cet article continue de résumer plusieurs autres composants basés sur bootstrap. Contrairement à l'article précédent, il existe plusieurs composants dans cet article qui nécessitent une prise en charge de certains fichiers JS.
Catalogue d'article de la série Bootstraphelper
C # Série avancée - encapsuler son propre composant htmlhelper étape par étape: bootstraphelper
C # Série avancée - encapsule son propre composant htmlhelper étape par étape: bootstraphelper (ii)
C # Série avancée - encapsuler son propre composant HTMLHelper étape par étape: bootstraphelper (3: avec code source)
1. NumberboxExtensions
NumberboxExtensions est une zone de texte numérique basée sur le style bootstrap. Il est encapsulé par Spinner, un composant numérique auto-incréable introduit par le blogueur. Ceux qui ne comprennent pas le composant Spinner peuvent consulter le deuxième composant introduit dans http://www.vevb.com/article/88490.htm.
Grâce à l'introduction précédente, nous savons que l'initialisation du spinner de composant auto-croissant ne nécessite pas d'écriture de code JS. Il peut être initialisé directement en configurant l'attribut de données dans le HTML. Cela apporte une grande commodité à notre encapsulation. Nous avons seulement besoin de transmettre les paramètres d'initialisation couramment utilisés comme paramètres de la méthode d'extension, puis de les transformer en attribut de données correspondant en arrière-plan et de le retourner à l'extrémité avant.
Sans plus tarder, mettez d'abord le code source encapsulé.
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Web; Utilisation de System.Web.Mvc; Namespace Bootstrapextensions {Générer un numéro de texte statique //// // ////// <parammary> "html"> name = "id"> id </ param> /// <retourne> return la boîte de texte numéro </peeturns> public static mvchtmlString numberTextBox (ce bootstraphelper html, string id) {return numberTextBox (html, id, null, null, null, null); } /// <summary> /// générer une zone de texte numérique /// </ résumé> /// <param name = "html"> Exemple de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "value"> Text Box Valent </onsam> /// <returnSterS Bootstraphelper html, chaîne id, valeur objet) {return numberTextBox (html, id, valeur, null, null, null); } /// <summary> /// générer une zone de texte numérique /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "Value"> La valeur de la zone de texte </ param> /// <param name = "MIN"> La valeur minimale de la valeur d'auto-croissance </ param> /// <param <Awnwears> Renvoie la zone de texte numérique </preminds> public static mvChtmlString NumberTextBox (ce bootstraphelper html, valeur objet, int? min, int? max) {return numberTextBox (html, null, valeur, min, max, null, null); } /// <summary> /// générer une zone de texte numérique /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "Value"> Valeur de la zone de texte </// </ <param name = "min"> Min Self-Growth </ Param> // <<Param Name = "Min"> Min Self-Growth </ Param> // <<Param Name = "Min"> Min Self-Growth </ Param> // <<Param Name = "Min"> Min Self-Growth </ Param> // <<Param Name = "Min"> Min Self-Growth </ Param> // <<Param Name = "Min"> MIN auto-croissance </ param> /// <retourne> renvoie la boîte de texte numérique </ returns> public static mvchtmlString numberTextBox (ce bootstraphelper html, string id, objet valeur, int? min, int? max) {return numberTextBox (html, id, valeur, min, max, null, null); } /// <summary> /// générer une zone de texte de numéro /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "value"> La valeur de la valeur de texte </ / /// <// <param name = "Min"> MIN name = "Max"> Auto-croissance maximale </param> /// <param name = "Step"> Numéro Auto-croissance </param> /// <returns> Renvoie le numéro de texte </peeturns> Public Static MvchtmlString NumberTextBox (This Bootstraphelper HTML, Numéro de chaîne, valeur d'objet, int? Max, étape, null); } /// <summary> /// Générer la zone de texte du numéro /// </ résumé> /// <param name = "html"> Exemple de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "valeur"> Valeur de la boîte de texte </// <paramy = "MAXIM-" MAXIMAUM auto-croissance </ param> /// <param name = "Step"> Numéro auto-croissance </ param> /// <param name = "règle"> Règle d'auto-croissance </param> /// <retourne> Renvoie le nombre de texta </ returns> public static mvchtmlstring nombrextbox (ce buootstraPhelper html, la valeur d'objet? {TagBuilder tag = new tagbuilder ("div"); Tag.MergEattTribute ("classe", "Spinner de groupe d'entrée"); Tag.MergEattTribute ("Data-Trigger", "Spinner"); System.Text.StringBuilder SB = new System.Text.StringBuilder (); //sb.append("<Input type = 'text' class = 'form-control text-center' value = '1' data-min = '- 10' data-max = '10 'data-step =' 2 'data-rule =' quantité '> "); sb.append ("<input type = 'text' class = 'form-control text-center'"); if (! string.isnullorempty (id)) {sb.append ("id = '"). append (id) .append ("'"); } if (value! = null) {sb.append ("value = '"). append (value.toString ()). append ("'"); } else {sb.append ("value = '1'"); } if (min! = null) {sb.append ("data-min = '"). APPEND (min) .append ("'"); } if (max! = null) {sb.append ("data-max = '"). append (max) .append ("'"); } if (Step! = null) {sb.append ("data-Step = '"). APPEND (Step) .append ("'"); } if (règle! = null) {sb.append ("Data-Rule = '"). APPEND (Rule.ToString ()). APPEND ("'"); } else {sb.append ("data-rule = 'quantité'"); } sb.append ("/>"); sb.append ("<span class = 'input-group-addon'>"); sb.append ("<a href = 'javascript ;;' class = 'spin-up' data-spin = 'up'> <i class = 'fa fa-caret-up'> </i> </a>"); sb.append ("<a href = 'javascript :;' class = 'spin-down' data-spin = 'down'> <i class = 'fa fa-caret-down'> </i> </a>"); sb.append ("</span>"); tag.innerhtml = sb.toString (); return mvchtmlString.create (tag.toString ()); }} public Enum Spinningrule {défaut, devise, quantité, pourcentage, mois, jour, heure, minute, deuxième,}}En plus de l'ID et de la valeur, les paramètres requis pour l'initialisation du composant sont principalement min, max, étape, règle, etc., correspondant aux données de données, de données de données, de données, de données de données et d'autres paramètres du composant.
L'utilisation est assez simple. Tout d'abord, reportez-vous aux fichiers JS et CSS pertinents sur la page correspondante, puis appelez-le comme celui-ci dans CSHTML:
Copiez le code comme suit: @ bootstrap.numbertextbox (null, "1", 1, 10, 2, null)
Obtenez le résultat:
C'est beaucoup plus pratique que de copier un grand morceau de code HTML à chaque fois. Vous sentez-vous un peu ému?
2. DateTimeBoxExtensions
Avec les composants numériques ci-dessus comme base, l'étape suivante consiste à résumer les composants temporels. Le blogueur prévoit également d'utiliser l'attribut de données pour l'initialiser, mais après avoir recherché longtemps, il n'y a aucun moyen d'initialiser l'attribut de données dans le datatimepicker. Il n'y a aucun moyen, donc le blogueur ne fera qu'initialiser l'attribut de données par lui-même.
1. Plan initial
Créons un nouveau fichier: bootstrap-datetimepicker-helper.js. Le code à l'intérieur est le suivant
$ (function () {var DateTimeDefault = {Locale: 'zh-cn', // culture chinoise}; $ .each ($ (". Date"), fonction (index, item) {var data = $ (item) .data (); var param = $ .Extend ({}, datetimedefault, data ||}); $ ( });});Ensuite, écrivez le code HTML comme celui-ci
<div class = 'input-group Date' data-format = "yyyy-mm-dd" data-maxdate = "2017-01-10" data-mindate = "2010-01-10"> <input type = 'text' /> <span> <span> </span> </span> </div>
Il semble qu'il n'y ait pas de problème, et au début, le blogueur pensait qu'il n'y avait pas de problème. Mais les choses sont allées à l'encontre de mes souhaits! Il y a une chose que le blogueur n'a pas considéré, c'est-à-dire que les noms d'attribut obtenus par la méthode Data () dans jQuery seront convertis en minuscules. C'est-à-dire que les données-maxdate écrites en HTML, mais le résultat obtenu via la méthode des données () devient maxdate, comme le montre la figure ci-dessous:
Ensuite, lorsque le DatetimePicker est initialisé, une exception JS est signalée. Cette méthode ne fonctionne pas.
2. Plan d'amélioration
Étant donné que la méthode ci-dessus ne fonctionne pas, nous devons l'améliorer. Y a-t-il des paramètres dans la méthode des données () qui peuvent l'empêcher d'être minuscules? Après avoir cherché, je n'ai trouvé aucune réponse. En fin de compte, il n'y avait aucun moyen, le blogueur prévoyait de le transformer par lui-même, donc le code JS est devenu comme ceci:
$ (function () {var datetimeDefault = {format: 'yyyy-mm-dd', // date Formatting, only the date Llove: 'zh-cn', // chinois Culture Maxdate: '2017-01-01', // maximum date handate: '2010-01-01', // minimum ViewMode: 'Day activéddates: false,}; $ .each ($ (". Date"), fonction (index, item) {var data = $ (item) .data (); $ .each (data, function (key, valeur) {for (i in datetimedefault) {if (key == i.tolowercase (); $ .Exttend ({}, dateTimeDefault, data || {}); $ (item) .DateTimePicker (DatetimeDefault);});});Le principe est de comparer les résultats obtenus par la méthode Data () avec le nom d'attribut du DatetimeDefault après la conversion minuscule. Si la même chose est vraie, l'attribut de données dans le HTML sera écrasé. Après le débogage plusieurs fois, je n'ai trouvé aucun problème.
L'écriture du code comme celle-ci peut en effet résoudre nos problèmes ci-dessus, mais notre variable DatetimeDefault doit contenir suffisamment de paramètres par défaut pour atteindre l'objectif de la couverture. Bien sûr, il n'y a que quelques paramètres qui sont généralement modifiés dans le projet, et seuls certains attributs par défaut que nous devons souvent modifier sont ajoutés ici.
D'accord, avec ce qui précède comme base théorique, notre datatimebox sera facilement encapsulée. Téléchargez simplement le code.
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Web; Utilisation de System.Web.mvc; Namespace Bootstrapextensions {Generate Date Control /// </summary> /// <Param Name = "Html"> Extension Date <//// <ID = "HTML"> Extension Instruction de méthode d'extension </ Param> Box TAG </ param> /// <Awereds> Renvoie la balise HTML qui rend le contrôle de date de date </ptents> public static MVCHTMLString DateTimeBox (Ce bootstraphelper html, string id) {return DatetimeBox (html, id, null, null, null, null, null); } /// <summary> /// Générer le contrôle de la date /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id de la balise de boîte de texte </ param> /// <param name = "value"> Valeur par défaut de Text Box Tag </ Param> // <Returns> Renvoie le tag html TAG TAGLE RENDERS THE Text the Date Control </ Returns> MVCHTMLSTRING DateTimeBox (Ce Bootstraphelper HTML, String ID, Valeur d'objet) {return DateTimeBox (html, id, valeur, null, null, null, null); } /// <summary> /// Générer le contrôle de la date /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ / param> /// <param name = "id"> id de l'étiquette de la zone de texte <///// <param name = "value"> Valeur par défaut de l'étiquette de la zone de texte </ / param> // <param name = "Format"> à partir du format pour l'affichage de la zone </ param> name = "format"> <param name = "maxdate"> valeur minimale de la date </ param> /// <param name = "Mindate"> Valeur maximale de la date </param> /// <retourne> Renvoie la balise HTML qui rend le contrôle de date de date </ returns> String MinDate) {return DateTimeBox (html, id, valeur, format, maxdate, MinDate, null, null); } /// <summary> /// Générer le contrôle de la date /// </ résumé> /// <param name = "html"> Exemple de méthode d'extension </ param> /// <param name = "id"> id de l'étiquette de la zone de texte </// <Param name = "Format"> Show Date Format </ Param> // </ <param name = "Format"> Show Date Format name = "maxdate"> Valeur minimale de la date </ param> /// <param name = "Mindate"> Valeur maximale de la date </ param> /// <param name = "ViewMode"> Browse Mode of Date Control </Aram> /// <Param Name = "ShowClear"> Fait le bouton clair que le bouton est affiché </ param> /// <Returns> STATIC STATIC Le balise HTML qui Renders est affichée </// <Returns> STATIC STATIQU MVCHTMLSTRING DateTimeBox (Ce Bootstraphelper HTML, String ID, Valeur d'objet, Format de chaîne, String MaxDate, String Mindate, String ViewMode, bool? ShowClear) {TagBuilder Tag = new TagBuilder ("Div"); Tag.MergEattTribute ("classe", "Date de groupe d'entrée"); if (! string.isnullorempty (format)) {tag.mergETTribute ("data-format", format); } if (! string.isnullorempty (maxdate)) {tag.mergattribute ("data-maxdate", maxdate); } if (! string.isnullorempty (MinDate)) {tag.mergETTribute ("data-lindate", MinDate); } if (! string.isnullorempty (visualMode)) {tag.mergEattrait ("data-ViewMode", ViewMode); } if (showClear! = null) {tag.MergETTribute ("Data-ShowClear", showClear.ToString ()); } System.text.stringBuilder sb = new System.Text.StringBuilder (); sb.append ("<input type = 'text' class = 'form-control'"); if (! string.isnullorempty (id)) {sb.append ("id = '"). append (id) .append ("'"); } if (value! = null) {sb.append ("value = '"). append (value.toString ()). append ("'"); } SB.APPEND ("/>"). APPEND ("<span class = 'input-group-addon'>") .append ("<span class = 'Glyphicon Glyphicon-Calendar'> </span>") .append ("</span>"); tag.innerhtml = sb.toString (); return mvchtmlString.create (tag.toString ()); }}}Ensuite, notre page CSHTML n'a besoin que de référencer notre JS et CSS
<link href = "~ / contenu / bootstrap-datetimepicker / css / bootstrap-datetimepicker.css" rel = "Stylesheet" /> <script src = "~ / content / bootstrap-datetimepicker / js / moment-with-locales.js"> </ script> <script src = "~ / contenu / bootstrap-datetimepicker / js / bootstrap-dattetimepicker-helper.js"> </ script>
Puis utilisez-le directement
<div> @ bootstrap.datetimebox ("starttime", null, null, null, null, null) </div> <v> @ bootstrap.datetimebox ("Endtime", null, null, null, null, null, null) </div>Obtenir des résultats
3. TextAreExtensions
L'encapsulation du champ de texte de TextArea est relativement simple, car sa structure est similaire à celle de la zone de texte. Donnons directement le code source de l'encapsulation.
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Web; Utilisation de System.Web.Mvc; Namespace Bootstrapextensions {Classe statique publique TextAreExtensions {/// <résumé> /// TextArea Text Field /// </ Summary> /// <Param Name = "html"> Extension Méthode Instruction Instruction </ Param> // <param name = "id"> id </ param> /// <retourne> html balise </ returns> public static mvchtmlString textareAbox (ce bootstraphelper html, string id) {return textAnbox (html, id, null, null, null); } /// <summary> /// TextArea Text Field /// </summary> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "value"> value </ param> /// <param name = "cssclass"> style </ param> /// <renvoie> html tag </ returns> style style </ param> /// <renvoie> html Tag </ Returns> STATY STATIC MVCHTMLSTRING TextAreAbox (Ce Bootstraphelper HTML, String ID, Valeur d'objet, String CSSClass) {return textAreAbox (html, id, valeur, cssclass, null, null); } /// <summary> /// textarea text field/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="value">value</param> /// <param name="cssClass">Style</param> /// <param name="rows">Number of rows</param> /// <retourne> html balise </ returns> public static mvchtmlString textareAbox (ce bootstraphelper html, chaîne id, valeur objet, chaîne cssclass, int? lignes) {return textAbox (html, id, value, cssclass, lignes, null); } /// <summary> /// textarea text field/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="value">value</param> /// <param name="cssClass">Style</param> /// <param name="rows">Number of rows</param> /// <param name = "Cols"> Nombre de colonnes </param> /// <retourne> html balise </ returns> public static mvchtmlString textareAbox (ce bootstraphelper html, chaîne id, valeur objet, chaîne cssclass, int? Rows, int? Cols) {tagbuilder tag = news tagbuilder (""); tag.addcssclass ("form-control"); if (! string.isnullorempty (id)) {tag.mergETTribute ("id", id); } if (value! = null) {tag.mergETTribute ("value", value.toString ()); } if (! string.isnullorempty (cssclass)) {tag.addcssclass (cssclass); } if (lignes! = null) {tag.mergEattTribute ("lignes", lignes.toString ()); } if (Cols! = null) {tag.mergETTribute ("Cols", Cols.ToString ()); } return mvchtmlString.create (tag.toString ()); }}}Seules quelques paramètres les plus simples et les COL sont prises en charge. Si votre projet a des besoins spéciaux, comme l'initialisation dans une riche boîte de montage de texte, vous pouvez également l'améliorer vous-même.
Comment utiliser
<div> @ bootstrap.TextAreAbox ("id", "", "", 3, 5) </div>Il y a une question à mentionner ici, c'est-à-dire que nous l'écrivons directement, mais le résultat est:
Il semble que notre attribut COLS ne fonctionne pas. Il s'avère que tant que votre balise est ajoutée avec le style Class = 'Form-Control', il remplira l'intégralité de la div et la solution est également très simple. Par exemple, nous pouvons effectuer un traitement sur la div:
Copiez le code comme suit: <div> @ bootstrap.textAreabox ("", "", "", 3, 5) </div>
Étant donné que l'attribut COLS ne fonctionne pas, les COL dans les paramètres peuvent être considérés comme supprimés.
4. SelectExtensions
Il est temps pour la boîte déroulante SELECT Tangled. Pourquoi dites-vous qu'il est emmêlé? Parce qu'il y a de nombreux problèmes à considérer lors de l'écapsulation, comme:
Comment gérer les valeurs d'options statiques? Comment les transmettre à l'arrière-plan? Est-il encapsulé le sélection d'origine ou encapsulé en méthodes et événements de sélection en fonction de certains composants (tels que select2)?
Plus tard, j'y ai pensé, quel est le but de l'encapsulation? N'est-ce pas juste pour être plus pratique à utiliser? S'il est scellé trop fort, sera-t-il pratique à utiliser? Heureusement, il a été directement encapsulé dans la sélection la plus simple. Le blogueur a l'intention de faire ceci:
S'il s'agit d'une option statique, écrivez directement la balise de sélection native; S'il s'agit d'une option dynamique, passez l'URL correspondante à l'arrière-plan et générez l'option après avoir obtenu les données. Le code encapsulé est le suivant:
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Web; Utilisation de System.Web.Mvc; Namespace BootstrapExtensions {Classe statique publique SelectExtensions {/// <summary> // RETOUR SELECT TAG //// / Summary> /// <Param Name = "HTML"> Méthode d'extension Instance </ paramor /// <retourne> sélectionnez TAG </ RETOURS> public static mvchtmlstring selectBox (Ce bootstraphelper html, string id) {return selectBox (html, id, null, null, null, null, null); } /// <summary> /// return SELECT TAG /// </ Summary> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "ID"> TAG ID </ param> /// <param name = "Value"> TAG SELECT VALAGE </ Param> /// <retourne> select tag </peets> public static mvchtmtmtmlStmlString </natters> public static mvchTmTmtmlStmlString (this boboSTRAPHELL html, chaîne ID, valeur d'objet) {return selectBox (html, id, valeur, null, null, null, null); } /// <summary> /// return select tag /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> Tag ID </ param> /// <param name = "Value" TAG Valeur sélectionnée </ Param> /// <Param Name = "CSSCLASS"> Style de balise </ param> // <retourne> SELECT TABLE <RETOURS> STATIQUE STATIQUE </ Param> // MVCHTMLSTRING SELECTBOX (Ce bootstraphelper HTML, String ID, Valeur d'objet, chaîne CSSClass) {return selectBox (html, id, valeur, cssclass, null, null, null); } /// <summary> /// Return select tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">Tag id</param> /// <param name="value">Tag selected value</param> /// <param name="cssClass">Tag style</param> /// <param name="url">url for requesting Données </ param> /// <param name = "URL"> URL pour demander des données </ param> /// <param name = "TextField"> Afficher le champ </ param> /// <param name = "ValueField"> Field de valeur </ param> /// <retourne> SELECT TAG </ Returns> Public Static MvchtmlString selectBox (This BootstraphelPer HTML, String ID, String ID, String Csclass, String HTAPHELPER HTML, String ID, String Value, String CSSClass, String HTAPHER HTML, String ID, String Value, STRING CSSCLASS, STRACKELPLER HTML, String ID, String Value, String CSSClass, STRINGH URL, String TextField, String ValueField) {return selectBox (html, id, valeur, cssclass, url, null, textfield, valueField); } /// <summary> /// return select tag /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id tag </ param> /// <param name = "value"> TAG Valeur sélectionnée </ param> /// <param name = "CSSCLASS"> Style de balise </ param URL </ param> /// <param name = "param"> Paramètres demandés </ param> /// <param name = "TextField"> Afficher les champs </ param> /// <param name = "ValueField"> Fields de valeur </ param> /// <Param Name = "ValueField"> FIELDS DE VALEUR </ / Param> // <Param Name = "ValueField"> Valeur name = "multiple"> est un choix multiple </ param> /// <retourne> sélectionnez tag </peeturns> public static mvchtmlString selectBox (this bootstraphelper html, string id, objet value, string cssclass, string url, string param, string textfield, string valuefield, bool multiple = false) {tagbuilder tag = new tagbuilder ("select"); tag.addcssclass ("form-control"); if (! string.isnullorempty (id)) {tag.mergETTribute ("id", id); } if (value! = null) {tag.mergETTribute ("value", value.toString ()); } if (! string.isnullorempty (cssclass)) {tag.addcssclass (cssclass); } if (! string.isnullorempty (url)) {tag.mergEattrait ("data-url", url); } if (! string.isnullorempty (param)) {tag.mergEattTribute ("data-param", param); } if (! string.isnullorempty (param)) {tag.mergEattTribute ("data-param", param); } if (! string.isnullorempty (valueField)) {tag.mergETTribute ("Data-Value-Field", ValueField); } if (! string.isnullorempty (TextField)) {tag.mergEattrait ("Data-Text-champ", TextField); } if (multiple) {tag.mergEattrait ("multiple", "multiple"); } return mvchtmlString.create (tag.toString ()); }}}Ensuite, le front-end utilise JS pour initialiser, et il doit y avoir une utilitaire de fichier JS.Combobox.js:
(Fonction ($) {// 1. Définir la méthode de l'extension jQuery combobox $ .fn.combobox = function (options, param) {if (typeof options == 'string') {return $ .fn.combobox.methods [options] (this, param);} // 2. Fuger les paramètres passés dans les paramètres d'appel et par défaut des options = $ .Extend (}, $ .fn.combobox.Default, options || {}); Option.Text (option. Options.OnbeForEload.Call (Target, Options.Param); (ITTRESSIONNEMENTS) {Var. return Options.Onchange (Target.Val);});} // 5. $ .getjson (url, fonction (data) {jq.empty (); var option = $ ('<opoption> </ option>'); option.attr ('value', ''); option.text ('s'il vous plaît sélectionner'); jq.append (option); $ .each (data, function (i, item) {var option = $ ('<option> </ option>'); item [jq.attr ('value')); }}; // 6. Paramètres par défaut Liste $ .fn.Combobox.defaults = {url: null, param: null, data: null, valuefield: 'value', textfield: 'text', placeholder: 's'il vous plaît sélectionner', onBeforeLoad: function (param) {}, onloadsuccress: function () {}, onChange: function (value) {}}; // Ce paragraphe est nouvellement ajouté, et la méthode d'initialisation $ (document) .ready (function () {$ ('select'). Chaque (fonction () {var $ combobox = $ (this); $ .fn.combobox.call ($ combobox, $ combobox.data ());})});}) (jquery);Ce fichier JS provient d'un article précédent du blogueur //www.vevb.com/article/92595.htm
Puis l'appel frontal
<v> @ bootstrap.selectbox ("sel", null, null, "/ home / getdept", null, "name", "id") </div>5. Résumé
À ce stade, la première version de notre bootstraphelper a été essentiellement terminée et les principaux composants du package sont les suivants:
Bien sûr, tout le monde aime le plus de code source le plus. Adresse de code source
Si vous pensez que cet article peut vous aider, veuillez le recommander.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.