Einführung in die Verwendung benutzerdefinierter Datenattribute in HTML- und Plug-In-Anwendungen

<div id="widget" data-text="123456"></div>

$(Funktion(){
var _widget = $("#widget").attr("data-text"); alert(_widget); //Weil data-text="123456" ist, wird 123456 ausgegeben.
})

<div id="widget" data-widget-config="{effect:'click'}">Dies ist der Testbereich</div>

//Plugin-Erweiterungsteil
;(Funktion($){
$.fn.extend({
Test:Funktion(Konfiguration){
/**
* @param Effekt Effekt
* config||{} Wenn benutzerdefinierte Eigenschaften übergeben werden, wird der Standardwert nicht ausgeführt
*/
// Defaultwerte setzen
config=$.extend({
Wirkung: 'Klick',
},Konfiguration||{});
var Effekt = Konfigurationseffekt;
var _text=Konfigurationstext;
wenn(Effekt=='Klick'){
$(diese).klick(Funktion(){
alert('dieser Klick');
})
}sonst wenn(Effekt=='mouseover'){
$(diese).mouseover(Funktion(){
alert("Dies ist ein Mouseover");
})
}
}
})
})(jQuery)

//Aufrufteil, das Datenattribut in HTML hängt davon ab
$(Funktion(){
var _widget = $("#widget").attr("data-widget-config");
// Es gibt zwei Möglichkeiten, einen String in ein JSON-Objekt umzuwandeln
var widgetConfigJSON = eval("("+_widget+")");
// var widgetConfigJSON = (neue Funktion("return " + _widget))();
$("#widget").Test(widgetConfigJSON);
//Da das Datenattribut in HTML data-widget-config="{effect:'click'}" ist, wird hier das Klickereignis aufgerufen.
Wenn data-widget-config="{effect:'mouseover'}", wird das Ereignis der Mausbewegung darüber aufgerufen})