Spoiler adalah blok informasi yang awalnya disembunyikan dari pengguna dan hanya muncul ketika pengguna mengklik tombol tertentu. Di website saya, dalam bentuk spoiler, ada ATURAN menambahkan komentar. Jika Anda mengklik kata RULES yang disorot, blok dengan aturan akan terbuka di bawah.
Seperti yang saya tulis di atas, saya akan menunjukkan beberapa metode yang pada dasarnya serupa, tetapi menggunakan skrip yang berbeda dan melakukan animasi yang berbeda. Di bawah ini adalah contohnya.
Mari kita lihat masing-masing metode agar Anda dapat menerapkan salah satunya di website Anda. Namun sebelum kita melakukan itu, mari kita definisikan perpustakaan jquery. Jika Anda sudah menghubungkannya sebelumnya, maka mulailah melihat metodenya; jika belum, maka hubungkan di header atau footer.
Sekarang mari kita mulai secara berurutan.
Metode No.1Padahal, cara paling sederhana, ketika diklik, blok langsung muncul. Kalau ditekan lagi langsung hilang. Sederhana saja. Metode ini Saya juga menggunakannya.
Tambahkan skrip yang sangat sederhana. Anda dapat menambahkannya langsung ke tempat Anda ingin menampilkan blok, Anda dapat menghubungkannya di header atau footer, atau Anda dapat memasukkannya ke dalam file, yang kemudian dapat Anda sambungkan ke situs, lagi, di mana saja.
$(dokumen).siap(fungsi())( $(".spoiler-body").hide(); $(".spoiler-title").klik(fungsi())( $(ini).next( ).
Skrip bekerja dengan blok yang diberi kelas spoiler-body dan menampilkannya ketika tombol, blok, atau tautan diklik, secara umum, apa pun yang diberi kelas spoiler-title. Untuk menampilkan blok, skrip menggunakan metode sakelar.
Spoiler Tampilkan/sembunyikan Teks tersembunyi yang muncul saat diarahkan
Tombol yang akan terbuka adalah teks di dalam tag b, seperti yang saya katakan, Anda dapat menggunakan tag apa saja.
Baiklah, mari kita tetapkan gaya minimal. Parameter utamanya adalah display:none untuk blok yang akan disembunyikan. Ini adalah suatu keharusan, jika tidak maka tidak akan berhasil.
Judul spoiler(kursor:pointer;).spoiler-body(tampilan:tidak ada;latar belakang:#f1f1f1;)
Tidak ada lagi yang diperlukan, semuanya harus berfungsi. Ada satu hal lagi. Anda dapat membuat animasi ini sedikit lebih halus. Untuk melakukannya, tambahkan nilai dalam milidetik dalam tanda kurung setelah metode sakelar.
Misalnya: beralih(500) . Sekarang blok tersebut tidak akan terbuka secara instan, tetapi dalam setengah detik 0,5. Blok pembuka akan muncul secara diagonal dari kiri atas ke kanan bawah. Anda dapat melihatnya pada contoh di atas.
Untuk metode ini dan metode lainnya, blok dan kelas yang sama akan digunakan, jadi saya tidak akan menulis semuanya lagi. Hanya skripnya saja yang berbeda.
Cara ini membuka blok dengan lancar dan muncul dari atas ke bawah. Untuk menampilkannya, script menggunakan metode slideToggle.
$(dokumen).siap(fungsi())( $(".spoiler-title").klik(fungsi())( $(ini).parent().children(".spoiler-body").slideToggle( ); mengembalikan salah; ));
Di sini, seperti pada opsi pertama, Anda dapat mengubah waktu animasi. Secara default nilainya adalah 400 milidetik. Jika ingin mempercepat atau memperlambat, tambahkan nilai dalam tanda kurung.
Misalnya: slideToggle(600) .
Cara ini intinya sama dengan cara kedua, animasinya sama, tapi ada satu fitur menarik. Tombol yang ditekan untuk membuka blok berubah. Dalam contoh yang Anda lihat, itu hanya teks - Tampilkan teks yang, ketika blok dibuka, berubah menjadi Sembunyikan teks.
Jika Anda menambahkan sedikit imajinasi, Anda dapat menambahkan gambar atau blok sebagai pengganti teks, yang dapat Anda hias dengan gaya. Fungsi berikut digunakan dalam metode ini.
$(dokumen).siap(fungsi())( $(".spoiler-body").hide(); $(".spoiler-title").klik(fungsi())( $(ini).toggleClass( "dibuka ").toggleClass("ditutup").next().slideToggle(); if($(ini).hasClass("dibuka")) ( $(ini).html("Sembunyikan teks"); ) lain ( $(ini).html("Tampilkan teks");
Anda dapat mengubah waktu animasi menggunakan cara yang sama seperti cara kedua.
Itu pada dasarnya, inilah tiga metode utama yang ingin saya tunjukkan. Mana yang tepat untuk Anda terserah Anda. Sekarang Anda dapat dengan mudah mengatur blok yang muncul setelah Anda menekan tombol.
Apakah Anda menggunakan spoiler di situs web Anda dan mengapa?
Itu saja, terima kasih atas perhatiannya. π
Sebagian besar dari Anda, setelah membaca judul artikel ini, akan mengatakan bahwa menangani peristiwa klik dengan CSS adalah hal yang mustahil. Namun, hal ini tidak sepenuhnya benar. Dan pada artikel ini saya akan menunjukkan bagaimana Anda dapat menangani event klik hanya dengan menggunakan CSS.
Katakanlah kita memiliki tab tertentu, mengkliknya akan membuka konten tab ini. Sebagian besar akan melakukan semua ini dalam JavaScript, namun kenyataannya, dalam kasus ini, peristiwa klik dapat dengan mudah ditangani melalui CSS.
Pertama, kode HTML yang paling umum:
Isi 1
tab 1
Konten 2
tab 2
Tidak ada yang aneh, hanya saja nama tabnya terletak di bawah konten, nanti Anda akan mengerti alasannya. Dan sekarang kode CSSnya:
tab (
mengapung: kiri; /* Meletakkan semua tab dalam satu baris */
margin: 10 piksel; /* Mengindentasi tab satu sama lain */
}
.isi(
tampilan: tidak ada; /* Sembunyikan isinya */
padding-atas: 20px; /* Sehingga judul tab berada di bawah konten */
posisi: mutlak; /* Untuk mencegah konten memindahkan elemen pada halaman */
}
.tabs:aktif .konten (
tampilan: blok; /* Saat kita mengklik tab, kita membuka konten konten */
}
.content:hover (
tampilan: blok; /* Saat kursor melayang di atas konten, jangan tutup */
}
Algoritmenya adalah sebagai berikut: ketika Anda mengklik nama tab, elemen semu yang aktif secara otomatis terpicu, tetapi karena ini hanya akan berfungsi ketika tombol ditekan, segera setelah kami melepaskannya, konten akan ditutup. Untuk mencegah hal ini terjadi, kami menambahkan kondisi bahwa jika kursor diarahkan ke konten (elemen semu yang melayang), maka itu tidak akan ditutup. Dan agar kursor kita otomatis mengarah ke konten dengan mengklik tab, kami menempatkan tombol di bawah konten, dan juga membuat kolom di atas. Jadi, dengan mengklik nama tab, kita juga mengklik kontennya, jadi setelah mengklik kita dapat melepaskan tombol mouse dengan aman, dan kita akan terus βmenahanβ konten sambil mengarahkan kursor.
Hari ini kami akan berbicara dengan Anda tentang bagaimana Anda dapat menyembunyikan elemen dengan mengkliknya. Atau klik untuk menampilkannya. Atau pada klik pertama - sembunyikan, dan pada klik kedua - tampilkan. Secara umum, saya pikir Anda mengerti apa yang saya bicarakan. Hal serupa dijelaskan dalam artikel ini.
Namun hari ini semuanya akan berbeda. Efeknya akan sama, namun hilang dengan cepat, seketika, dan tidak mulus. Untuk melakukan ini, mari buat markup yang sama:
< div class = "block" > < h1 class = "extremum-click" >teko< div class = "extremum-slide" >Kisah ini tentang bagaimana saya pergi ke hutan untuk memetik jamur dan menemukan teko ajaib.Sekarang mari kita tulis gayanya. Secara default, blok teks disembunyikan. Mari tambahkan beberapa efek visual dan, yang paling penting, kita akan sedikit meningkatkan skripnya. Dengan mengklik judulnya, kami akan menyorotnya dengan warna. Berikut gaya-gayanya:
.extremum-slide ( batas : 1px solid ; padding : 50px ; tampilan : tidak ada ; ) .red ( warna latar : merah ; )Sekarang naskahnya sendiri, yang akan menghidupkan semua ini:
$(dokumen) .siap (fungsi () ( $(".block") .on ("klik" , ".klik-ekstrim" , fungsi () ( $(ini ) .toggleClass ("merah" ) .siblings ( ".slide-ekstrem" ) .slideToggle (0 ) ) ;Itu saja - Anda bisa menikmati hasilnya. Tidak ada yang istimewa untuk diceritakan: kita klik pada judul.klik ekstrem, teks.slide ekstrem ditampilkan dan pada saat yang sama judul yang sama disorot. Saat berikutnya Anda mengklik judulnya, blok teks menghilang.
Semua kode halaman:
.extremum-slide ( border:1px solid; padding:50px; display:none; ) .red ( background-color:red; ) $(document).ready(function() ( $(".block").on( "klik", ".klik-ekstrim", function() ( $(this).toggleClass("red").siblings(".extremum-slide").slideToggle(0); ));Teko Teko Cerita ini tentang bagaimana saya suatu kali pergi ke hutan untuk memetik jamur dan menemukan teko ajaib.
Teko Cerita ini tentang bagaimana saya pergi ke hutan untuk memetik jamur dan menemukan teko ajaib.
Di hampir setiap situs Anda dapat melihat tombol - Lebih detail, Informasi, Buka/Sembunyikan informasi dan sejenisnya. Ketika Anda mengkliknya, sebuah blok dengan informasi yang relevan secara bertahap terbuka. Bagaimana cara menerapkannya?
Cukup sederhana. Menggunakan JS (perpustakaan jQuery). Mari kita sambungkan dari server Google:
Sekarang contoh lengkapnya. Agar tidak membongkar dan membingungkan Anda, saya akan mengomentari semua poin utama langsung di dalamnya.
$(dokumen).siap(fungsi() (
$("A#pemicu").toggle(fungsi() ( // Menampilkan blok tersembunyi
},
$("DIV#kotak").fadeIn(); //memudar -
penampilan halus
fungsi() (
// Sembunyikan bloknya
$("DIV#kotak").fadeOut(); // fadeOut - hilangnya mulus
kembali salah; // jangan ikuti tautannya
)); // akhir dari tombol()
)); // akhir dari siap()
Menampilkan/menyembunyikan informasi Konten blok tersembunyi Jangan lupakan itu
dalam contoh ini
Mari kita lihat hasil membuka dan menyembunyikan blok menggunakan jQuery:
Bagaimana cara membuat spoiler di jquery atau beberapa blok buka/tutup? Karena banyaknya permintaan dari pembaca, saya membuat bagian terpisah dengan contoh dan file untuk diunduh. Jika Anda memiliki beberapa blok spoiler yang perlu dibuka dan ditutup dengan lancar menggunakan jquery, atau jika Anda memerlukan perintah untuk menutup atau membuka semuanya, lihat contoh di bawah ini:
Spoiler
$(dokumen).siap(fungsi())(
$(".spoiler_links").klik(fungsi())(
});
});
$(ini).parent().children("div.spoiler_body").toggle("normal");
kembali salah;
.spoiler_body (tampilan: tidak ada;)
.spoiler_links (kursor:penunjuk;)
.spoiler_links (kursor:penunjuk;)
Spoiler No. 1 tampilkan / sembunyikan
Teks di spoiler pertama
Teks di spoiler pertama
Contohnya sudah lengkap. Anda hanya memerlukan koneksi Internet untuk memuat jQuery dari perpustakaan Google.
Dalam proses pembuatan situs web atau blog dan selanjutnya mengisinya dengan konten, karena berbagai alasan, terkadang ada kebutuhan untuk menyembunyikan beberapa bagian teks, menempatkan informasi yang lebih banyak di blok yang tersembunyi untuk sementara waktu, namun tetap menunjukkan ke pengguna apa yang tersedia sesuatu yang lain, dan beri dia kesempatan untuk melihat konten tersembunyi tanpa berpindah ke baris atau halaman berikutnya.
Sebelumnya, sekumpulan javascript digunakan untuk mengimplementasikan solusi seperti itu, namun sekarang semua ini dapat dilakukan dengan sangat mudah menggunakan properti yang luar biasa.
Hari ini kita akan melihat cara paling sederhana membuat blok konten tersembunyi di halaman situs dan pesan individual yang terbuka saat Anda mengklik elemen teks tertentu, hanya menggunakan properti CSS3. Peralihan dapat berupa satu kata, frasa yang disorot, seluruh kalimat, atau ikon informatif.
Blok seperti itu sering digunakan pada halaman dengan sejumlah besar konten, agar lebih terstruktur dan kompak, semua konten dibagi menjadi apa yang disebut grup, di mana hanya judul yang disajikan kepada pengguna, semua teks disembunyikan secara default dan dapat dilihat dengan mengklik elemen tertentu (lihat di atas).
Mari kita coba melakukannya tanpa air yang tidak perlu, lihat seluruh mekanisme sederhana ini beraksi, dengan contoh yang jelas, dan Anda juga dapat mengedit sesuatu jika Anda mau:
Contoh No.1Sebagai saklar untuk blok drop-down dengan informasi tambahan teks yang tidak disorot atau ditandai digunakan, dengan undangan tegas untuk mengkliknya, yang harus Anda lakukan tanpa rasa takut atau ragu untuk melihatnya)))
Seperti yang Anda lihat, semuanya bekerja lebih dari sempurna, konten tersembunyi muncul tanpa masalah dan menghilang dengan satu klik ringan pada mouse, dan pada saat yang sama kami menggunakan kode yang dapat dieksekusi seminimal mungkin, baik dalam kerangka html maupun dalam formasi gaya css. Tanpa menghubungkan perpustakaan javascript tambahan, dengan kekhawatiran abadi apakah perpustakaan tersebut dinonaktifkan di sisi pengguna.
Semua ini dimungkinkan berkat kelas semu CSS3 :checked yang diterapkan pada elemen antarmuka seperti tombol radio (). Apa yang sebenarnya kami lakukan adalah dalam tag kami menetapkan atribut type nilai checkbox , serta pengidentifikasi id="hd-1" yang sesuai dengan pengidentifikasi unik for="hd-1" dari saklar blok saat ini. Kami akan menyembunyikan kotak centang secara menyeluruh dan selamanya dengan mengatur properti display: none di class.hide;
Sebenarnya tidak ada yang istimewa untuk dijelaskan di sini; seluruh mekanisme untuk menghidupkan dan mematikan blok tersembunyi terdiri dari tiga elemen:
- Kotak centang - tag dengan nilai kotak centang dari atribut tipe dan pengidentifikasi tautan tertentu
- Heading (saklar teks) - tag dengan nilai pengidentifikasi unik untuk atribut for (pengidentifikasi harus sama dengan pengidentifikasi tag input dengan nilai kotak centang atribut type).
- Blok konten adalah tag div, yang akan berisi, hingga waktu yang lebih baik, hingga pengguna mengklik, berbagai konten tersembunyi (teks, gambar, dll., dll.)
Saya harap dari penjelasan saya yang kacau ini menjadi jelas apa maksud sebenarnya. CSS menerapkan gaya baru (menggunakan kelas semu yang dicentang) untuk menampilkan blok konten yang sebelumnya disembunyikan hanya ketika pengguna mengklik elemen yang dikaitkan dengan kotak centang dengan pengidentifikasi unik.
Sebuah catatan penting berikut dari semua ini:
Saat Anda menggunakan beberapa blok tersembunyi di halaman yang sama, setiap tombol radio harus memiliki ID unik yang berbeda dari ID di blok lainnya.
Jadi, dengan kata lain kita telah memilah apa yang terjadi di mana dan mengapa, sekarang, mari kita lihat kerangka html dari keseluruhan struktur:
| < input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Klik di sini untuk membuka!< div>Konten tersembunyi......< input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Klik di sini untuk membaca lebih lanjut!< div>Konten tersembunyi... |
Klik di sini untuk membuka! Konten tersembunyi...... Klik di sini untuk membaca lebih lanjut! Konten tersembunyi...
Selanjutnya kita langsung menuju ke formasi gaya CSS, yang tanpanya seluruh struktur ini tidak akan berfungsi. Kode paling minimum, tanpa hiasan apa pun, hanya sedikit menyorot latar belakang untuk blok drop-down untuk menentukan bagi Anda dan menampilkan bingkai teks tersembunyi. Anda dapat mendesain blok sesuka Anda, menambahkan batas, sudut membulat, menyorot teks, atau .
1.CSS| . bersembunyi, . sembunyikan + label ~ div ( tampilan: tidak ada; ) /* memberi label tampilan teks */ . sembunyikan + label, . sembunyikan: dicentang + label ( bantalan: 0 ; warna: hijau; kursor: penunjuk; batas- bawah: 1 piksel bertitik hijau; ) . sembunyikan: dicentang + label + div ( tampilan: blok; latar belakang: #efefef; - moz- kotak- bayangan: inset 3px 3px 10px #7d8e8f; - webkit- kotak- bayangan: inset 3px 3px 10px #7d8e8f; kotak- bayangan: inset 3px 3px 10px #7d8e8f; bantalan: 10px ) |
/* menyembunyikan kotak centang dan blok konten */ .hide, .hide + label ~ div ( tampilan: tidak ada; ) /* tampilan teks label */ .hide + label, .hide:checked + label ( padding: 0; warna: hijau ; kursor: penunjuk; batas bawah: 1 piksel bertitik hijau; ) /* tampilan teks label saat sakelar aktif */ .hide: dicentang + label ( warna: merah; batas bawah: 0; ) /* saat kotak centang aktif, tampilkan blok dengan konten */ .hide:checked + label + div ( tampilan: blok; latar belakang: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; bayangan kotak: sisipan 3px 3px 10px #7d8e8f;
Ini semua, untuk contoh pertapa, adalah jumlah minimum yang cukup. Tapi kita tidak akan menjadi kita sama sekali jika kita tidak menambahkan setidaknya beberapa barang, dan lebih baik memberi tahu pengguna secara visual di mana harus mengklik.
Pada contoh kedua, saya menambahkan simbol sederhana berupa plus, yang dengan jelas menunjukkan bahwa ada sesuatu yang tersembunyi di sini, ketika ditekan, langsung berubah menjadi minus, dan saya menambahkan sedikit animasi ke blok tersembunyi dengan konten kapan mereka muncul, dan semua ini secara eksklusif dengan bantuan keajaiban CSS3.
| /* menyembunyikan kotak centang dan blok konten */ . bersembunyi, . sembunyikan + label ~ div ( tampilan: tidak ada; ) /* memberi label tampilan teks */ . sembunyikan + label ( margin: 0 ; padding: 0 ; warna: hijau; kursor: penunjuk; tampilan: blok sebaris; ) /* tampilan teks label saat saklar aktif */ . sembunyikan: dicentang + label ( warna: merah; batas- bawah: 0 ; ) /* ketika kotak centang aktif, tampilkan blok dengan konten */ . sembunyikan: dicentang + label + div ( tampilan: blok; latar belakang: #efefef; - moz- kotak- bayangan: inset 3px 3px 10px #7d8e8f; - webkit- kotak- bayangan: inset 3px 3px 10px #7d8e8f; kotak- bayangan: inset 3px 3px 10px #7d8e8f; margin- kiri: 20px; /* sedikit animasi saat muncul */ - webkit- animasi: fade ease- dalam 0,5 detik; - moz- animasi: fade ease- dalam 0,5 detik; kemudahan- dalam 0,5 detik; ) /* animasi ketika blok tersembunyi muncul */ @- moz- bingkai utama memudar ( dari ( opacity: 0 ; ) ke ( opacity: 1 ) ) @- webkit- bingkai utama memudar ( dari ( opacity: 0 ; ) ke ( opacity: 1 ) ) @ keyframe memudar ( dari ( opacity: 0 ; ) ke ( opacity: 1 ) ). sembunyikan + label: sebelum ( latar belakang- warna: #1e90ff; warna: #fff; konten: "\002 B" ; tampilan: blok; float: kiri; ukuran font: 14px; font- berat: tebal; tinggi: 16px; garis- tinggi: 16 piksel; teks- rata: tengah; - webkit- batas- radius: 50%; sembunyikan: dicentang + label: sebelumnya ( konten: "\221 2" ; ) |
/* menyembunyikan kotak centang dan blok konten */ .hide, .hide + label ~ div ( tampilan: tidak ada; ) /* tampilan teks label */ .hide + label ( margin: 0; padding: 0; warna: hijau; kursor : pointer; display: inline-block; ) /* tampilan teks label saat saklar aktif */ .hide: dicentang + label ( warna: merah; border-bottom: 0; ) /* saat kotak centang aktif, tampilkan blok dengan konten */ . ; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; /* sedikit animasi saat muncul */ -webkit-animation:fade ease-in 0.5s; fade ease-in 0.5s; ketika blok tersembunyi muncul */ @-moz-keyframes fade ( dari ( opacity: 0; ) ke ( opacity: 1 ) ) @-webkit-keyframes fade ( dari ( opacity: 0 ; ) ke ( opacity: 1 ) ) @keyframes memudar ( dari ( opacity: 0; ) ke ( opacity: 1 ) .hide + label:before ( background-color: #1e90ff;
warna: #fff;
konten: "\002B";
tampilan: blok;