Introduction à l'utilisation des attributs personnalisés de données dans la production de pages HTML et plug-in application_HTML/Xhtml_Web

Vous pouvez souvent voir du HTML avec des attributs de données. Ce sont des attributs personnalisés de HTML5 et peuvent faire beaucoup de choses. Il est très pratique d'appeler directement JS. Bien qu'ils soient des attributs de HTML5, ils sont heureusement communs à jQuery, ils le sont donc essentiellement. peut être utilisé normalement dans tous les navigateurs, y compris les versions inférieures d'IE. Voici une brève introduction à son utilisation :
1 Utilisation simple

Copiez le code

Le code. est la suivante :

Copier le code

Le code est le suivant :

$(function(){
var _widget= $(" #widget").attr("data -text"); alert(_widget);//Parce que data-text="123456", imprimer 123456
})

2. Utilisez avec $.fn.extend et écrivez Plug-in

Copier le code

Le code est le suivant :

Voici la zone de test

Copiez le code

Le code est le suivant :

//Pièce d'extension du plug-in
;(function($){
$.fn.extend({
Test:function(config){
/**
* @param effect effect
* config||{} n'exécute pas la valeur par défaut lorsque des attributs personnalisés sont transmis dans
*/
// Définir la valeur par défaut
config=$.extend({
effect:'click',
} ,config||{});
var effect=config.effect
var _text=config._text; >if(effet=='clic'){
$(this).click (function(){
alert('ce clic');
})
}else if(effect= ='mouseover'){
$(this).mouseover(function(){
alert("c'est un survol de la souris");
})
}
}
})
})(jQuery)

Copier le codeLe code est le suivant :

//La partie appelante, l'attribut data en HTML en dépend
$(function(){
var _widget= $("#widget").attr("data- widget-config");
// Il existe deux façons de convertir une chaîne en objet json
var widgetConfigJSON=eval("(" _widget ")");
// var widgetConfigJSON = (new Function( "return " _widget))();
$("#widget").Test( widgetConfigJSON);
//Parce que l'attribut data en HTML est data-widget-config="{effect:'click' }", l'événement click sera appelé ici,
S'il s'agit de data-widget-config="{ effect:'mouseover'}", alors appelez l'événement lorsque la souris bouge vers le haut})