Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Cara yang Tepat Untuk Membuat jQuery Akordeon Kustom

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Frida Wahyu (you can also view the original English article)

Akordeon bisa sangat berguna untuk menampilkan banyak bagian data yang berbeda dalam jumlah ruang yang kecil. jQuery UI memiliki fungsi Akordeon yang dibangun, tetapi menurut jQuery UI Build your Download, ukuran jQuery UI dan akordeon skrip adalah 25kb dan 16.6kb, masing-masing. Hari ini, saya akan menunjukkan cara membangun akordeon khusus yang lebih "hemat bandwidth".

Unduh lampiran dari sidebar untuk melihatnya.

Itu tampak seperti banyak hanya untuk satu akordeon sederhana. Terutama ketika Anda menambahkan skrip jQuery biasa, yang 18kb diperkecil dan Gzip. Jadi alih-alih meningkatkan waktu pemuatan laman Anda dengan fungsi tambahan yang tidak diperlukan, mengapa tidak membuat sesuatu dari awal?

Saya juga berpikir bahwa menulis sesuatu dari awal benar-benar memberi Anda pemahaman yang jauh lebih baik tentang cara menggunakan jQuery secara efektif, tanpa selalu menggunakan kode orang lain.

Jadi rencana untuk tutorial ini adalah untuk menunjukkan membuat akordion menggunakan fungsi UI jQuery, kemudian buat satu menggunakan beberapa pengkodean khusus. Mari gunakan bilah sisi blog sebagai contoh.

Markup

Markup ini sangat sederhana, hanya item daftar untuk setiap bagian dalam akordeon:

CSS

Kami akan menambahkan beberapa gaya yang sangat mendasar sehingga akordeon terlihat lebih rapi. Karena tutorial ini terutama berfokus pada JavaScript, saya akan menjalankan apa yang kami lakukan dengan CSS dengan cepat.

Karena saya selalu memulai dari stylesheet kerangka kerja sederhana saya sendiri, saya akan menggunakannya di sini juga:

Selanjutnya, saya akan menghapus margin dan daftar-gaya dari daftar unordered akordeon dan daftar keturunan dan menambahkan batas bawah ke daftar unordered akordeon (Anda akan melihat mengapa itu hanya perbatasan bawah segera).

Kemudian, saya akan menambahkan perbatasan di sekitar setiap bagian akordeon, kecuali batas bawah. Juga, saya akan menghapus perbatasan dari daftar item yang merupakan keturunan dari bagian akordeon dan hanya menambahkan batas bawah. Jika itu adalah anak terakhir dari daftar tanpa keturunan yang diatur, saya akan menghapus batas bawah. Ya, saya tahu ini tidak akan berfungsi di IE, tetapi itu tidak penting.

Selanjutnya, saya akan memberi style pada tautan utama yang akan mengalihkan akordeon sehingga mereka lebih menonjol:

Akhirnya, saya hanya akan melakukan beberapa gaya dasar pada sub daftar akordeon sehingga mereka terlihat sedikit lebih bagus:

Mari kita lihat di mana kita sejauh ini. Ini juga akan terlihat seperti apa akordeon ketika kita menggunakan jQuery UI Accordion dan JavaScript dinonaktifkan.

Accordion Markup

Sepertinya kita perlu menambahkan beberapa CSS tambahan untuk IE6 untuk menjelaskan bug whitespace:

Akordeon jQuery UI

jQuery UI Home Page

Sekarang setelah kami mendapatkan semua markup dan styling lengkap, sangat mudah untuk menerapkan akordeon UI jQuery. Pertama, kita hanya perlu memasukkan jQuery dan skrip jQuery UI kita.

Kemudian, kita perlu menginisialisasi akordeon pada daftar tak terurut dengan id akordeon:

Dan di sana Anda memilikinya, akordion yang berfungsi.

Working Accordion

Untuk membuat butir akordeon yang saat ini terbuka lebih menonjol, saya menambahkan sedikit CSS ekstra:

Nama kelas ui-accordion-selected -(ui-akordeon yang dipilih) secara otomatis ditambahkan ke bagian akordeon saat ini.

Akta jQuery Kustom kami

Sekarang kita telah melakukan akordeon UI jQuery, sekarang saatnya untuk membuat kita sendiri. Satu hal yang tidak terlalu saya sukai tentang versi UI jQuery adalah cara tampilannya ketika JavaScript dinonaktifkan. Saya lebih suka memilikinya sehingga hanya satu bagian yang terbuka pada satu waktu.

Untuk mencapai ini, saya akan menambahkan sedikit PHP. Anda dapat dengan mudah menyelesaikan ini dengan bahasa pemrograman apa pun juga.

Gagasan di balik ini adalah bahwa kita akan meneruskan variabel dalam URL, dan jika variabel tersebut bertepatan dengan setiap bagian, kami menetapkan kelas current -saat ini- ke bagian itu. Jauh lebih mudah untuk melihat ini dalam kode, jadi lihatlah:

Anda juga harus memperhatikan bahwa saya mengubah url dari masing-masing link yang beralih bagian akordeon untuk menyesuaikan dengan pernyataan if untuk bagian. Jadi pada dasarnya, jika JavaScript dinonaktifkan, Anda akan dibawa ke halaman baru dengan bagian itu terbuka.

Kami juga perlu menghapus skrip akordeon jQuery UI, dan termasuk kami sendiri:

Tambahan CSS

Dengan sedikit perubahan pada markup ini, kita perlu menambahkan sedikit CSS tambahan. Kami tidak lagi memiliki kelas ui-accordion-selected (ui-akordion yang dipilih) yang ditugaskan ke daftar item; sekarang kelas current. Kami juga harus memperhitungkan perubahan nama kelas ini di negara bagian untuk akordeon:

Jadi apa yang ingin kita lakukan adalah menyembunyikan semua daftar yang tidak terurut, kecuali mereka adalah keturunan dari daftar item dengan kelas current. Saya juga menambahkan ID body ke halaman demo ini sehingga kami dapat menggunakan stylesheet yang sama untuk kedua contoh.

Kustomisasi JavaScript

Pertama, kami ingin menjalankan skrip setelah dokumen dimuat, jadi kami mulai dengan ini:

Kami ingin akordeon berfungsi saat tautan tajuk diklik, tetapi kami tidak ingin meninggalkan halaman sehingga kami harus memastikan dan return false (mengembalikan yang salah):

Selanjutnya, saya tidak suka garis besar yang muncul di sekitar tautan saat mereka diklik, jadi saya tidak mengaturnya:

Ada dua kasus berbeda untuk skrip ini.

  1. Tautan yang diklik adalah bagian yang sudah terbuka.
  2. Tautan yang diklik bukanlah bagian yang sudah terbuka.

Kasus Pertama

Ini bukan fungsi yang dimiliki versi jQuery UI, tapi saya pikir pengguna harus bisa menutup semua bagian jika mereka mau. Jika tautan yang diklik memiliki induk yang memiliki kelas saat ini, kami ingin menggeser daftar tidak berurutan dan menghapus kelas saat ini.

Hal lain yang mengganggu saya tentang versi UI jQuery, adalah bahwa Anda dapat menggulir akordeon sehingga hampir tidak terlihat, klik, dan kemudian interaksi terjadi di atas apa yang dapat Anda lihat. Gulir ke bawah pada contoh UI jQuery dan cobalah.

Jadi solusi saya adalah menggunakan skrip kecil yang indah ini yang disebut jQuery ScrollTo. Ini adalah skrip yang sangat kecil yang menambahkan pengguliran halaman yang mulus.

Mari tambahkan ke kepala dokumen sebelum skrip akordeon kami:

Saat rubrik naik, saya ingin menggulir jendela ke bagian atas akordeon:

Parameter pertama dari fungsi adalah target untuk menggulir ke, dan yang kedua adalah jumlah waktu yang diperlukan.

Kasus Kedua

Kasus ini terjadi ketika bagian yang mengklik saat ini tidak terbuka. Jadi hal pertama yang ingin kita lakukan adalah menyembunyikan bagian yang sedang terbuka dan menghapus kelas saat ini (bagian kode ini sangat mirip dengan kasus pertama):

Selanjutnya, kami ingin membuka bagian yang kami klik dan tambahkan kelas saat ini:

Terakhir, mari gulir jendela ke bagian atas akordeon, seperti yang kita lakukan pada kasus pertama:

Itu dia. Serius Apakah Anda pikir membuat akordion bisa sesederhana itu?

Kesimpulan

Sekarang, mari kita bandingkan ukuran file JavaScript menggunakan tab Net di Firebug.

Firebug

Dalam contoh UI jQuery, total file JavaScript sekitar 73 kb. Dalam contoh khusus kami, dengan gulir tambahan jendela, total file JavaScript sekitar 57 kb. Sekarang, itu mungkin tidak tampak seperti banyak, tetapi bayangkan jika Anda memiliki situs lalu lintas yang sangat tinggi. Itu bisa menjadi banyak byte yang disimpan. Plus, sekarang Anda lebih mengerti tentang jQuery.

Sekarang coba dan tulis jQuery Anda sendiri

Advertisement
Advertisement
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.