Pengenalan kepada penggunaan atribut tersuai data dalam HTML dan aplikasi pemalam_HTML/Xhtml_Pengeluaran halaman web

Anda mungkin sering melihat beberapa HTML dengan atribut data Ini adalah atribut tersuai HTML5 dan boleh melakukan banyak perkara. Walaupun ia adalah atribut HTML5, untungnya ia adalah biasa kepada jQuery boleh digunakan secara normal dalam semua penyemak imbas, termasuk versi IE yang lebih rendah. Berikut ialah pengenalan ringkas tentang cara menggunakannya:
1 Penggunaan mudah

Salin kod

Kod. adalah seperti berikut:

Salin kod

Kod adalah seperti berikut: $(function(){ var _widget= $(" #widget").attr("data -text"); alert(_widget);//Because data-text="123456", print out 123456

})

2. Gunakan ia dengan $.fn.extend dan tulis Plug-in

Salin kod

Kodnya adalah seperti berikut:

Ini ialah kawasan ujian

🎜>

Salin kod

Kod adalah seperti berikut:

//Bahagian sambungan plag masuk

;(function($){ $.fn.extend({ Test:function(config){ /*** kesan kesan @param

* config||{} tidak melaksanakan nilai lalai apabila atribut tersuai dihantar dalam

*/

// Tetapkan nilai lalai
config=$.extend({
effect:'klik',
} ,config||{}); >jika(effect=='klik'){
$(this).klik (function(){
alert('this click');
})
} else if(effect= ='mouseover'){
$(this).mouseover(function(){
alert("this is mouseover");
})
}
}
})
})(jQuery)







Salin kod


Kodnya adalah seperti berikut:

//Bahagian panggilan, atribut data dalam HTML bergantung pada ini
$(function(){
var _widget= $("#widget").attr("data- widget-config");

// Terdapat dua cara untuk menukar rentetan kepada objek json

var widgetConfigJSON=eval("(" _widget ")"); // var widgetConfigJSON = (Fungsi baharu( "return " _widget))(); $("#widget").Test( widgetConfigJSON); //Kerana atribut data dalam HTML ialah data-widget-config="{effect:'click'); }", acara klik akan dipanggil di sini, Jika ia data-widget-config="{ effect:'mouseover'}", kemudian panggil acara apabila tetikus bergerak ke atas})