Einführung in die Verwendung benutzerdefinierter Datenattribute in der HTML- und Plug-in-Anwendung_HTML/Xhtml_Webseitenproduktion

Möglicherweise sehen Sie häufig HTML5-Attribute. Dies sind benutzerdefinierte Attribute von HTML5 und können viele Dinge direkt aufrufen. Obwohl es sich um Attribute von HTML5 handelt, sind sie im Grunde genommen dieselben kann normal in allen Browsern verwendet werden, auch in niedrigeren IE-Versionen. Hier ist eine kurze Einführung zur Verwendung:
1. Einfache Verwendung

Kopieren Sie den Code

Der Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

$(function(){
var _widget= $(" #widget").attr("data -text"); alarm(_widget);//Because data-text="123456", print out 123456
})

2. Verwendung es mit $.fn.extend und schreibe Plug-in

Code kopieren

Der Code lautet wie folgt:

Dies ist der Testbereich

Kopieren Sie den Code

Der Code lautet wie folgt:

//Plug-in-Erweiterungsteil
;(function($){
$.fn.extend({
Test:function(config){
/**
* @param effect effect
* config||{} führt nicht den Standardwert aus, wenn benutzerdefinierte Attribute in
übergeben werden*/
// Standardwert festlegen
config=$.extend({
effect:'click',
} ,config||{});
var effect=config.effect;
var _text=config._text; >if(effect=='click'){
$(this).click (function(){
alert('this click');
})
}else if(effect= ='mouseover'){
$(this).mouseover(function(){
alert("das ist Mouseover");
})
}
}
})
})(jQuery)

Code kopierenDer Code lautet wie folgt:

//Der aufrufende Teil, das Datenattribut in HTML, hängt davon ab
$(function(){
var _widget= $("#widget").attr("data- widget-config");
// Es gibt zwei Möglichkeiten, einen String in ein JSON-Objekt zu konvertieren
var widgetConfigJSON=eval("(" _widget ")");
// var widgetConfigJSON = (new Function( "return " _widget))();
$("#widget").Test( widgetConfigJSON); }“, das Klickereignis wird hier aufgerufen,
Wenn es data-widget-config="{ effect:'mouseover'}" ist, dann rufen Sie das Ereignis auf, wenn sich die Maus nach oben bewegt})