Préface: Récemment, lorsque j'utilisais le composant bootstrap, j'ai trouvé un problème de facilité d'utilisation. De nombreuses initialisations de composants simples nécessitent d'écrire beaucoup de code d'initialisation dans JS, comme une balise de sélection simple. Parce qu'il n'a qu'à obtenir des données à partir de l'arrière-plan et à les remplir dans l'option, mais obtenir des données à partir de l'arrière-plan nécessite l'initialisation JS, donc elle provoque beaucoup de code en double dans le code d'initialisation JS lorsque la page est initialisée, ce qui semble très ennuyeux. Je me suis donc souvenu de l'attribut de données dans la table bootstrap. Ce serait tellement cool si je pouvais utiliser les données - * pour initialiser les composants simples directement dans le HTML. Regardons d'abord la documentation du tableau bootstrap:
Vous pouvez voir que presque toutes les propriétés et événements de la table bootstrap peuvent être utilisés dans Data- *, ce qui est plutôt bien. Ensuite, le blogueur commencera à rechercher. data- * D'où vient cette chose?
1. Une étude préliminaire sur les données jQuery ()
Après avoir cherché en ligne, j'ai finalement trouvé la source de données *. Il s'est avéré être de jQuery et HTML5. De bonnes choses, de très bonnes choses! Jetons un coup d'œil à l'API jQuery
L'utilisation originale est la suivante:
La fonction est en fait très évidente, qui consiste à ajouter certains attributs et données à l'élément, ou prendre des valeurs.
Jetons un coup d'œil à la combinaison de la méthode Data () et de l'attribut HTML5 Data- *
Haha, cette chose est bonne. La valeur définie par HTML5 Data- * peut être obtenue à l'aide de la méthode Data () de JQuery. Les règles ici sont comme suit:
1) Tous les attributs de données doivent commencer par "Data-",
2) Les attributs sont séparés par "-",
3) Lorsque vous prenez des attributs dans jQuery, supprimez simplement "données" et "-".
Avec cela comme base, nous savons comment définir des propriétés dans la balise, puis prendre les propriétés correspondantes en js. Expliquons-le ci-dessous en combinaison avec l'exemple de la dernière encapsulation de Combobox.
2. JQuery data () implémente les données - * composant d'initialisation
N'oubliez pas la série de composants JS précédente - encapsulant vos propres composants JS. Vous pouvez également encapsuler un simple combobox dans cet article, qui peut récupérer les données du backend via l'URL. Ainsi, ci-dessous, nous ferons toujours de notre mieux à la base de ce composant et ajouterons directement l'attribut Data- * à la balise SELECT pour initialiser le composant de la boîte déroulante.
1. Code d'encapsulation des composants 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 () {$ ('. ComboBox'). Chaque (fonction () {var $ combobox = $ (this); $ .fn.comboBox.call ($ combobox, $ combobox.data ());})}); }) (jQuery);La plupart des codes ne sont pas différents du dernier. Concentrons-nous sur le paragraphe suivant
// Ce paragraphe est nouvellement ajouté. Une fois l'initialisation de la page terminée, la méthode d'initialisation $ (document) .ready (function () {$ ('. ComboBox'). Chaque (fonction () {var $ combobox = $ (this); $ .fn.combobox.call ($ comboBox, $ combobox.data ());})});Il est évident qu'après la fin de l'initialisation de la page, le composant est initialisé via le sélecteur de style. Chacun est utilisé, s'il existe plusieurs styles .combobox, détirez chacun à son tour. Appelez la méthode d'appel pour appeler l'initialisation de ComboBox via $ .fn.combobox.call ($ combobox, $ combobox.data ());. Les deux paramètres de la méthode d'appel correspondent à:
1) l'objet jQuery actuellement initialisé
2) Liste des paramètres. Ici, les attributs de données * obtenus via $ comboBox.data () sont tous les attributs de données HTML. Passez tous les attributs de données * en tant que paramètres dans la méthode d'initialisation de ComboBox.
2. Initialiser en html via des données- *
<select id = "search_" name = "search_province" data-url = "/ home / getProvince" data-param = '{"type": "0"}' data-text-field = "name" data-value-field = "id"> </ select>Spécifiez l'attribut Data- *. À partir de ce qui précède, nous savons que l'initialisation ici est d'initialiser le composant via le sélecteur de style.Combobox, il est donc nécessaire que si vous souhaitez utiliser des données - * Pour initialiser le composant, vous devez définir un style class = "combobox" afin que l'arrière-plan puisse obtenir les balises qui doivent être initialisées.
3. Méthode backend C #
classe publique HomeController: Controller {public list <string> lstprovince = new list <string> () {"beijing", "tianjin", "chongqing", "shanghai", "hebei", "shanxi", "liaoning", "jilin" "Anhui", "Fujian", "Jiangxi", "Shandong", "Henan", "Hubei", "Hunan", "Guangdong", "Hainan", "Sichuan", "Guizhou", "Yunnan", "Yannan" "Région autonome de la Mongolie intérieure", "région autonome de Guangxi Zhuang", "Région autonome du Tibet", "Ningxia Hui Autonomous Region", "Xinxia Uygur Autonomous Region"; public JSonResult getProvince (Type de chaîne) {var lstres = new list <provvince> (); pour (var i = 0; i <10; i ++) {var omodel = new province (); omodel.id = i; omodel.name = lStProvince [i]; lstres.add (omodel); } return json (lstres, jsonrequestbehavior.allowget); }} public class province {public int id {get; ensemble; } Nom de chaîne publique {get; ensemble; }}Il n'y a rien à dire sur le test du code.
4. Effet de débogage
Obtenir l'effet
Cela complète essentiellement l'initialisation du composant via les données- *.
3. Résumé
Ce qui précède démontre brièvement l'utilisation de la méthode jQuery Data () combinée avec l'attribut Data- * HTML5. Il peut essentiellement répondre aux besoins des blogueurs: vous n'avez pas besoin d'écrire une autre ligne de code JS pour initialiser directement la balise. Lorsque vous l'utilisez, reportez-vous simplement aux fichiers jQuery.js et jQuery.extension.js. Mais nous savons que comme il s'agit d'une fonctionnalité dans HTML5, il doit y avoir certaines exigences pour le navigateur. Bien sûr, cette fonction d'utilisation est relativement basique, mais elle suffit pour l'initialisation de certains composants simples.
S'il y a une compréhension incorrecte dans l'article, veuillez le souligner et le blogueur sera très reconnaissant.
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.