Bagaimana Membina Lebih Baik UX dengan Data HTML5- * Atribut
Pernahkah anda mahu menambah data peribadi kepada elemen HTML tertentu untuk kemudian mengaksesnya dengan JavaScript? Sebelum HTML5 muncul di pasaran, menyimpan data khusus yang dikaitkan dengan DOM adalah kekecohan sebenar, dan pemaju terpaksa menggunakan semua jenis hacks jahat, seperti memperkenalkan atribut yang tidak standard atau menggunakan kaedah setUserData () yang usang untuk mengatasi masalah.
Untungnya anda tidak perlu berbuat demikian, kerana HTML5 telah memperkenalkan global baru data- * atribut yang memungkinkan untuk memasukkan maklumat tambahan pada sebarang elemen HTML. Baru data- * sifat-sifatnya menjadikan HTML lebih mudah diperpanjang, Oleh itu membolehkan anda membina aplikasi yang lebih kompleks, dan mencipta pengalaman pengguna yang lebih canggih tanpa perlu menggunakan teknik intensif sumber seperti panggilan Ajax, atau pertanyaan pangkalan data pelayan.
Sokongan pelayar dari atribut global yang baru agak baik, kerana ia disokong oleh semua penyemak imbas moden (IE8-10 sebahagiannya menyokong mereka).
Sintaks bagi data- * Atribut
Sintaks baru data- * atribut adalah sama dengan atribut atribut aria. Anda boleh memasukkan sebarang tali kecil pada tempatnya * tanda. Anda juga perlu memberikan nilai kepada setiap atribut dalam bentuk rentetan.
Katakan anda ingin mencipta Tentang kita halaman, dan menyimpan nama jabatan di mana setiap pekerja berfungsi. Anda tidak perlu melakukan apa-apa selain daripada menambah data-jabatan atribut khusus kepada elemen HTML yang sesuai dengan cara berikut:
- John Doe
- Jane Doe
Custom data- * atribut adalah global, sama seperti kelas dan ID atribut, jadi anda boleh menggunakannya pada setiap elemen HTML. Anda juga boleh menambah sebanyak data- * atribut ke tag HTML yang anda inginkan. Dalam contoh di atas, contohnya, anda boleh memperkenalkan atribut tersuai baru yang dipanggil pengguna-pengguna untuk menyimpan nama pengguna pekerja.
- John Doe
- Jane Doe
Sebagai peraturan umum, jika anda ingin menambah atribut tersuai anda sendiri kepada elemen HTML, anda mesti mempunyai awalan dengannya data- tali. Begitu juga, apabila anda melihat atribut prefix data dalam kod orang lain, anda boleh mengetahui dengan pasti bahawa ia adalah atribut tersuai yang diperkenalkan oleh pengarang.
Kapan Menggunakan dan Bila Tidak Menggunakan Atribut Tersuai
W3C mentakrifkan adat data- * sifat seperti itu:
“Atribut data tersuai adalah bertujuan untuk menyimpan data peribadi peribadi ke halaman atau aplikasi, yang mana tidak terdapat atribut atau unsur yang lebih sesuai.”
Ia patut dipertimbangkan untuk digunakan data- * sifat-sifatnya apabila anda tidak dapat mencari sebarang atribut semantik lain untuk data yang ingin anda simpan.
Ia bukan idea terbaik untuk menggunakannya semata-mata untuk tujuan penggayaan, seperti yang anda boleh pilih dari kelas dan juga gaya sifat-sifatnya. Jika anda ingin menyimpan jenis data yang HTML5 mempunyai atribut semantik, seperti masa tarikh atribut untuk elemen, gunakan itu bukan atribut prefix data.
Penting untuk ambil perhatian bahawa data- * atribut menyimpan data itu peribadi ke halaman atau aplikasi, yang bermaksud bahawa mereka akan diabaikan oleh ejen pengguna, seperti bot enjin carian dan aplikasi luaran. Atribut-atribut yang di atur data boleh semata-mata diakses oleh kod yang berjalan di laman web yang menjadi tuan rumah HTML.
Custom data- * atribut digunakan secara meluas oleh rangka frontend, seperti Yayasan Bootstrap dan Zurb, juga. Berita baiknya ialah anda tidak semestinya perlu tahu cara menulis JavaScript jika anda ingin menggunakan atribut yang di atur data sebagai sebahagian daripada kerangka kerja, kerana anda hanya perlu menambahkannya ke kod HTML untuk memicu fungsinya plugin JavaScript yang telah ditulis.
Coretan kod di bawah menambah petua alat di sebelah kiri ke butang dalam Bootstrap dengan menggunakan data bertukar-tukar dan juga penempatan data atribut tersuai, dan memberikan nilai yang sesuai kepada mereka.
Sasaran data- * Atribut dengan CSS
Walaupun ia tidak disyorkan untuk digunakan data- * hanya untuk tujuan penggayaan, anda boleh memilih unsur HTML yang dimilikinya dengan bantuan pemilih sifat umum. Jika anda mahu memilih setiap elemen yang mempunyai atribut prefix yang tertentu, gunakan sintaks ini dalam CSS anda:
li [data-user] color: blue;
Ambil perhatian bahawa bukan nama pengguna yang akan dipaparkan dalam warna biru dalam coretan kod di atas - selepas semua data yang disimpan dalam atribut tersuai tidak dapat dilihat - tetapi nama pekerja yang terkandung dalam elemen (dalam contoh “John Doe” dan “Jane Doe”).
Jika anda hanya mahu memilih unsur di mana atribut-prefix yang data mengambil nilai tertentu, inilah sintaks yang hendak digunakan:
li [data-department = "IT"] border: solid 1px blue;
Anda boleh menggunakan semua pemilih atribut CSS yang lebih rumit, seperti pemilih gabungan saudara umum ([data-value ~ = "foo"]) atau pemilih kad liar ([data-value * = "foo"]), dengan atribut prefix data juga.
Akses data- * Atribut dengan JavaScript
Anda boleh mengakses data yang disimpan dalam adat data- * atribut dengan JavaScript dengan menggunakan sama ada sifat dataset, atau jQuery's data () kaedah.
JavaScript Vanilla
The dataset harta adalah hak milik HTMLElement antara muka, ini bermakna anda boleh menggunakannya pada sebarang tag HTML. The dataset harta memberikan akses kepada semua adat data- * atribut elemen HTML yang diberikan. Atribut dikembalikan sebagai a DOMStringMap objek yang mengandungi satu entri bagi setiap data- * atribut.
Dalam kami Tentang kita contoh halaman anda dengan mudah boleh menyemak atribut tersuai “Jane Doe” telah menggunakan dataset harta dengan cara berikut:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", jabatan: "IT" Anda dapat melihatnya dalam kembali DOMStringMap objek yang data- awalan dikeluarkan dari nama atribut (pengguna bukannya pengguna-pengguna, dan jabatan bukannya data-jabatan). Anda perlu menggunakan atribut dalam format yang sama jika anda hanya ingin mengakses nilai atribut prefix data tertentu (bukan senarai semua atribut tersuai seperti dalam coretan kod di atas).
Anda boleh mengambil nilai tertentu data- * atribut sebagai harta bagi dataset harta. Seperti yang saya nyatakan sebelum ini, anda perlu menghilangkannya data- awalan daripada nama harta itu, jadi jika anda mahu mengakses nilai Jane pengguna-pengguna atribut, anda boleh melakukannya dengan cara ini:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's data () kaedah
The data () Kaedah jQuery memungkinkan untuk mendapatkan nilai atribut prefix data. Di sini anda juga perlu meninggalkan data- awalan daripada nama atribut untuk mengaksesnya dengan betul. Dalam contoh kami, anda boleh memaparkan mesej amaran dengan nama jabatan di mana “Jane” berfungsi dengan kod berikut:
("jane"). hover (fungsi () var jabatan = $ ("# jane") .data ("jabatan"); jabatan (jabatan);); The data () kaedah perlu digunakan dengan berhati-hati, kerana ia bukan hanya berfungsi sebagai cara untuk mendapatkan nilai atribut prefix data, tetapi juga untuk melampirkan data ke elemen DOM dengan cara berikut:
var town = $ ("# jane"). data ("bandar", "New York"); Data tambahan yang anda sertakan dengan jQuery data () kaedah jelas tidak akan muncul dalam kod HTML sebagai yang baru data- * atribut, jadi jika kedua-dua teknik tersebut digunakan pada masa yang sama, elemen HTML yang diberikan akan menyimpan dua set data, satu dengan HTML dan yang lain dengan jQuery.
Dalam contoh kami “Jane” mendapat data tersuai baru ("bandar") dengan jQuery, tetapi pasangan kunci baharu ini tidak akan muncul dalam HTML sebagai yang baru data bandar atribut. Menyimpan data dalam dua cara yang berbeza bukan amalan terbaik untuk mengatakan sekurang-kurangnya, jadi hanya gunakan salah satu daripada dua kaedah sekaligus.
Kebolehcapaian dan data- * Atribut
Sebagai data yang diadakan dalam adat data- * atribut adalah persendirian, teknologi bantuan mungkin tidak dapat mengaksesnya. Jika anda ingin memastikan kandungan anda dapat diakses untuk pengguna kurang upaya, tidak disarankan untuk menyimpan kandungan yang boleh menjadi penting bagi pengguna dengan cara ini.
