Tabs: Ia ' s Complicated ™

Apabila pemaju front-end junior mempelajari JavaScript, menguasai nama kelas beralih adalah teknik yang cepat dan berkesan.

 const Button = document.QuerySelector (".-button");
const element = document.QuerySelector (". Kandungan");

Button.AdDeventListener ("klik", fungsi () {
  element.classlist.toggle ("Sparkles");
});

Menggunakan helah ini, kita boleh membina tab.

Pelaksanaan mudah

Jika kita telah menguasai kemahiran menukar nama kelas, kita perlu membina antara muka tab. Hanya tambahkan beberapa kod untuk mengendalikan acara klik untuk melaksanakan tab mudah, seperti:

Tab ini tersedia sepenuhnya. Saya menggunakan pautan utama untuk membuat pautan melompat antara pautan dan kawasan tab, yang sememangnya munasabah. Tab boleh diakses melalui papan kekunci, mempunyai gaya fokus, dan boleh diaktifkan menggunakan kekunci kembali .

Tetapi adakah ini cukup? Tab Sempurna?

Tidak mudah

Masalahnya ialah kami tidak melakukan apa -apa rawatan khas untuk pemprosesan papan kekunci, dan antara muka tab mungkin memerlukan pemprosesan papan kekunci. Heydon Pickering menerangkan ini:

Tidak seperti pautan ke halaman yang sama, tab tidak memindahkan pengguna ke kawasan/panel kandungan yang berkaitan. Ia hanya memaparkan kandungan secara visual. Ini memberi manfaat kepada pengguna yang ingin beralih di antara kawasan yang berbeza tanpa kembali ke bahagian atas halaman setiap kali (termasuk mereka yang menggunakan pembaca skrin).

Ini membawa kesan sampingan yang tidak disenangi: Jika pengguna mahu bergerak ke kawasan melalui papan kekunci dan berinteraksi dengan kandungan dalaman mereka, mereka mesti secara berurutan melintasi semua tab di sebelah kanan tab semasa, yang disusun dalam fokus.

Ternyata terdapat banyak aspek tingkah laku lain yang perlu dipertimbangkan dalam antara muka tab. Dalam penjelasan Heydon, kunci tab sebenarnya boleh digunakan sebagai cara untuk melompat dari tab itu sendiri ke apa yang berkaitan dengan tab itu, dengan itu memindahkan fokus. Tab Shift membawa tumpuan kembali. Kemudian gunakan kekunci anak panah untuk menukar tab. Semua ini memerlukan lebih banyak JavaScript, dan juga beberapa HTML untuk membolehkan keadaan fokus ... ditambah beberapa atribut aria-*, saya tidak mempunyai kepakaran yang cukup untuk menjelaskan mengapa mereka penting.

Hasil akhir adalah seperti berikut:

Jadi persoalannya menjadi: adakah kemahiran kita untuk menukar nama kelas berbahaya ke web kerana mereka tidak mengambil aspek ini? Adakah menggunakan mana -mana alat asas menjejaskan kebolehcapaian web? Saya tidak mempunyai idea. Masalah ini terlalu besar untuk saya. Walau bagaimanapun, ini adalah soalan yang patut difikirkan.

Memori otot

Jika kita mula -mula belajar menulis tab seperti demo pertama, selagi tidak ada yang mengkritik kita kerana berbuat demikian, kita akan menggunakannya berulang kali. Saya menulis demo dalam kira -kira tiga minit kerana saya telah melakukannya berkali -kali. Mewujudkan tab ini pastinya sebahagian daripada ingatan otot saya.

Ramai orang berfikir rangka kerja JavaScript adalah scourge di web, kerana mereka seolah -olah memimpin era akses yang paling teruk. Tetapi bagaimana jika ingatan otot membina tab adalah dengan menggunakan UI tab pra-dibina, ia membawa semua ciri yang betul dan meninggalkan gaya terutamanya kepada anda?

Ini adalah tab Reach UI (dengan asumsi kita menggunakan React ...).

Saya tidak meminta anda menukar projek anda untuk bertindak balas untuk mendapatkan beberapa tab percuma, tetapi React sudah besar. Sekiranya mod yang baik itu menjadi pilihan de facto, kesannya mungkin mendapat keuntungan bersih ke atas kebolehaksesan. Sekurang -kurangnya mungkin bagi saya. Ia mungkin menghalang saya daripada menulis antara muka tab secara manual untuk kali ke -359.

Atas ialah kandungan terperinci Tabs: Ia ' s Complicated ™. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!