Komentar: Mungkin saat Anda menggunakan jQuery Mobile, Anda akan sering melihat penggunaan data-peran, tema data, dll. Ini adalah atribut khusus HTML5. Artikel ini telah menyusun beberapa. Teman yang membutuhkannya bisa merujuknya.
Mungkin ketika Anda menggunakan JQuery Mobile, Anda akan sering melihat Data-Role, Data-Theme, dll., Misalnya: Kode berikut dapat mencapai efek header:
<Div Data-Role = "Header">
<h1> Saya judul </h1>
</div>
Jelajahi ponsel Anda, efeknya adalah sebagai berikut:
Mengapa Anda dapat mencapai efek hitam di bagian bawah dan memusatkan teks dengan menulis rol data = header?
Artikel ini memberikan cara paling sederhana untuk mengimplementasikannya, sehingga setiap orang dapat memiliki pemahaman yang intuitif tentang penggunaan ini.
Kami menulis halaman HTML untuk menyesuaikan atribut data-chb = header. Kami berharap warna latar belakang area div dengan atribut ini berwarna hitam, teksnya putih, dan pusatnya ditampilkan; Div yang tidak memiliki atribut kustom data-CHB ditampilkan dalam mode default. Kode HTML adalah sebagai berikut:
<body>
<Div Data-ChB = "Header">
<h1> Saya menggunakan div atribut kustom data-chb </h1>
</div>
<br/>
<div>
Saya tidak menggunakan data-CHB untuk menyesuaikan atribut, jadi saya akan menunjukkannya sebagaimana mestinya;
</div>
</body>
Untuk mencapai efek tampilan warna latar belakang hitam, teks putih, dan tampilan tengah, kami menentukan CSS berikut:
<tyle>
.ui_header {
Latar Belakang: Hitam;
Teks-Align: tengah;
Warna: Putih;
Perbatasan: 1px Solid #000;
}
</tyle>
Kemudian kami menggunakan metode JS berikut untuk secara dinamis menambahkan definisi CSS saat halaman dimuat, dan mengubah gaya tampilan div dengan atribut data-chb:
<type skrip = "Teks/JavaScript">
window.onload = function () {
var elems = document.geteLementsByTagname ("div");
if (elems! = null && elems.length> 0) {
var length = elems.length;
// Transfusikan semua kontrol Div
untuk (var i = 0; i <panjang; i ++) {
var elem = elem [i];
// Dapatkan properti kustom dari kontrol
var customAttr = elem.dataset.chb;
// Anda juga dapat memperoleh properti khusus dengan metode berikut
// var customAttr = elem.dataset ["chb"];
// Jika itu adalah nilai header yang telah kita selesaikan, itu berarti perlu diproses
if (customAttr == "header") {
// tambahkan gaya
elem.setAttribute ("class", "ui_header");
}
}
}
}
</script>
Halaman terakhir menampilkan efek berikut:
Orang selalu suka menambahkan properti khusus ke tag HTML untuk menyimpan dan memanipulasi data. Tetapi masalah dengan melakukan ini adalah bahwa Anda tidak tahu apakah skrip lain akan mengatur ulang properti khusus Anda di masa depan. Selain itu, sintaks HTML Anda tidak mematuhi spesifikasi HTML, serta beberapa efek samping lainnya. Inilah sebabnya mengapa Anda telah menambahkan properti data khusus ke spesifikasi HTML5, dan Anda dapat melakukan banyak hal yang berguna dengannya.
Anda dapat membaca spesifikasi terperinci HTML5, tetapi penggunaan atribut data khusus ini sangat sederhana. Anda dapat menambahkan atribut apa pun yang dimulai dengan data- ke tag HTML. Atribut ini tidak ditampilkan di halaman. Ini tidak akan mempengaruhi tata letak dan gaya halaman Anda, tetapi dapat dibaca dan dapat ditulis.
Cuplikan berikut adalah tag HTML5 yang valid:
<Div
Data-myid = "3e4ae6c4e"> Beberapa data yang luar biasa </div>
Tapi, bagaimana Anda membaca data ini? Anda tentu dapat mengulangi melalui elemen halaman untuk membaca properti yang Anda inginkan, tetapi jQuery memiliki metode bawaan untuk memanipulasi properti ini. Gunakan metode .data () jQuery untuk mengakses data ini-* properti. Salah satu metode adalah .Data (OBJ), yang muncul setelah versi jQuery 1.4.3, dan dapat mengembalikan atribut data yang sesuai.
Misalnya, Anda dapat menggunakan metode penulisan berikut untuk membaca nilai atribut data-myid:
var myid = jQuery ("#Awesome"). Data ('myid');
console.log (myid); Anda juga dapat menggunakan sintaks JSON di properti data-*, misalnya, jika Anda menulis html berikut:
<Div Data-Awesome = '{"Game": "on"}'> </div>
Anda dapat secara langsung mengakses data ini melalui JS. Melalui nilai kunci JSON, Anda bisa mendapatkan nilai yang sesuai:
var gamestatus = jQuery ("#Awesome-json"). Data ('Awesome'). Game;
console.log (gamestatus); Anda juga dapat menetapkan nilai ke atribut data-* secara langsung melalui metode .data (kunci, nilai). Hal penting yang perlu Anda perhatikan adalah bahwa atribut data-* ini harus terkait dengan elemen tempat mereka berada, dan tidak memperlakukannya sebagai alat penyimpanan untuk menyimpan apa pun.
Penerjemah menambahkan: Meskipun data-* adalah atribut yang hanya muncul di HTML5, jQuery bersifat universal, jadi di halaman atau browser non-HTML5, Anda masih dapat menggunakan metode .data (OBJ) untuk memanipulasi data.