Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Navigasi Dropdown: Cara Mempertahankan Pilihan yang Dipilih Pada Pemuatan Halaman

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Bayangkan Anda menggunakan elemen <select> untuk bernavigasi antar halaman - biasanya yang dipilih akan kembali ke opsi default ketika halaman dimuat ulang. Hari ini kita akan belajar bagaimana mempertahankan opsi yang dipilih, memastikan bahwa halaman apa pun yang Anda pilih tetap dipilih bahkan setelah halaman baru disajikan. Untuk mendemonstrasikannya, kita akan menggunakan proyek demo dengan beberapa halaman statis. Ayo mulai!

Struktur Proyek

Struktur proyek terlihat seperti ini – beberapa halaman HTML dengan beberapa aset:

HTML

Di dalam setiap halaman HTML ada elemen select:

Setiap opsi dikaitkan dengan halaman statis. Tautan ke halaman terkait disimpan dalam atribut data-url.

Dalam kasus nyata, menu select kita mungkin berisi kategori semua posting blog. Jadi mari kita bayangkan bahwa dengan memilih opsi All, semua posting blog muncul. Kemudian jika kita memilih opsi Animals, tulisan yang termasuk dalam kategori Animals muncul, dan seterusnya.

Atribut data-url mungkin berisi url absolut alih-alih yang relatif, seperti ini:

CSS

Secara default, ada batasan browser mengenai style yang dapat kita terapkan pada elemen select. Misalnya, tidak ada pendekatan CSS lintas-browser untuk menata elemen option.

Dengan mengingat hal itu, mari kita tambahkan beberapa aturan CSS yang akan meningkatkan tampilan select di semua browser:

styling the select element
Elemen select yang ditata (dan emoji untuk mengklarifikasi halaman mana yang kita gunakan)

Berikut stylenya:

Patut disebutkan bahwa sejumlah library JavaScript yang powerful tersedia untuk memanipulasi elemen select. Dua contoh adalah Chosen.js dan Select2.js.

JavaScript

Setiap kali opsi dipilih, halaman terkait harus dimuat dan opsi target harus ditandai sebagai selected. Kita akan membahas dua metode serupa yang sama-sama menerapkan ini.

Metode Pertama

Berkenaan dengan metode pertama, kita harus melakukan hal-hal berikut:

  1. Mengambil laman url yang berkaitan dengan opsi yang dipilih dan kekuatan pengalihan ke Halaman ini.
  2. Iterate melalui semua opsi, ambil nilai atribut data-url mereka, dan periksa untuk melihat apakah nilai ini merupakan bagian dari url halaman atau tidak. Jika ya, kita menandai opsi terkait sebagai selected dan melompat keluar dari loop.

Berikut adalah kode yang dibutuhkan:

Seperti yang sudah dibahas di atas, dalam proyek nyata nilai atribut data-url mungkin merupakan url absolut. Dalam skenario seperti itu, kita dapat memperbarui bagian kedua dari kode kita sebagai berikut:

Catatan: Alih-alih menambahkan atribut selected ke opsi yang sesuai melalui JavaScript, kita bisa mengaturnya secara statis di HTML. Jadi misalnya, di halaman Animals kita bisa menambahkan atribut selected ke opsi Animals. Namun, ini bukan pendekatan yang fleksibel karena di situs dinamis semua opsi (yang mungkin memiliki kategori posting) mungkin akan berbagi halaman/templat yang sama (lebih lanjut tentang itu dalam tutorial WordPress yang akan datang).

Metode Kedua

Metode kedua, yang sangat mirip dengan yang pertama, memanfaatkan penyimpanan lokal.

Berkenaan dengan metode ini, kita harus melakukan hal-hal berikut:

  1. Ambil url halaman terkait dengan opsi selected, simpan di penyimpanan lokal, dan paksa redirection ke halaman ini.
  2. Iterasi semua opsi, ambil nilai data-url, dan periksa untuk melihat apakah nilai ini sama dengan nilai yang disimpan di penyimpanan lokal atau tidak. Jika ya, kita menandai opsi terkait sebagai selected dan melompat keluar dari loop.

Berikut adalah kode yang dibutuhkan:

Catatan: Solusi ini dilengkapi dengan salah satu batasan. Jika kita menavigasi ke halaman (misalnya halaman Animals) tanpa terlebih dahulu memilih opsi terkait, kita tidak akan melihat opsi yang diharapkan seperti selected. Itu terjadi karena tidak ada nilai url di penyimpanan lokal atau nilai yang disimpan tidak ada yang benar.

Kesimpulan

Dalam tutorial ini, kita membahas dua metode untuk mempertahankan opsi selected pada pemuatan halaman. Meskipun kita menggunakan beberapa data statis sebagai demonstrasi, saya harap Anda memahami ide itu dan Anda dapat menerapkan pengetahuan yang diperoleh hari ini di proyek Anda.

Dalam tutorial mendatang, kita akan memeriksa cara menggabungkan teknik yang dibahas di sini di situs web WordPress. Sampai jumpa!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.