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

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

//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)

//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})