Spoiler adalah alat yang nyaman untuk situs. Ini banyak digunakan di berbagai forum dan blog, memungkinkan pengguna untuk menyembunyikan elemen tertentu pada saat menekan tombol. Selain itu, spoiler terlihat bagus di situs dan membantu menyembunyikan bagian-bagian yang tidak perlu membebani halaman.
Itu perlu
Perpustakaan Jqueryque
instruksi
Langkah 1
Spoiler dapat diimplementasikan menggunakan perpustakaan plug-in jquery populer yang ditulis dalam bahasa pemrograman Java Script. Ini digunakan untuk mengimplementasikan interaksi penuh bahasa pemrograman dengan kode markup HTML halaman. Koneksi jquery dilakukan menggunakan HTML menggunakan tag . Anda harus menentukan lokasi tempat skrip berada dan mengatur jenisnya: $ (document).ready (function ()
Langkah 2
Fragmen teks yang ditentukan dalam paragraf tertentu harus ditutup dalam lapisan terpisah - div, dengan bantuan spoiler itu sendiri akan dikendalikan: Sasha berjalan di sepanjang jalan raya dan mengisap pengeringan.
Langkah 3
Selanjutnya, Anda perlu membuat di depan semua div bernama merusak tombol yang sesuai yang akan menutup dan memperluas teks. Pertama, spoiler itu sendiri disembunyikan menggunakan fungsi "sembunyikan ()" standar: $ ("div [name = 'spoil']"). Hide (); Selanjutnya, Anda perlu membuat teks dan gambar untuk semua spoiler, yang akan digunakan sebagai background untuk tombol: $ (“P [name = 'spoilbutton']”) Html (“Show text”);
Langkah 4
Temukan semua tombol di halaman dan periksa judul tingkat pertama di depan tombol. Untuk melakukan ini, buat kondisi yang akan mencari tag h1 berdasarkan nama. Teks judul yang ditentukan membungkus ke dalam div itu sendiri: $ (“p [name = 'spoilbutton']”) Setiap (fungsi () {If ($ (ini).prev (ini).get (0).tagName == “H1”) {Var NewSpoilButton =“”+ $ (ini).prev (ini).html () +” Tampilkan teks”; $ (ini).prev (ini).replaceWith (“”); $ (ini).replaceWith (NewSpoilButton);}})
Langkah 5
Selanjutnya, Anda perlu menangani klik tombol mouse dengan klik. Jika klik terdeteksi, maka dapat ditampilkan: $ (“div [name = 'spoilbutton']”) Klik (function () {If ($ (this).next (this).css (“display”) = =” blok”) {
Langkah 6
Kemudian menulis warisan. Di dalam div, teksnya ada di paragraf p, yang isinya ditempatkan dalam tag span: $ (this).children (“p”). Children (“span”). Html (“Show text”); Ciutkan buka spoiler. Jika tidak terbuka, perluas teksnya. Langkah ini didasarkan pada aturan pewarisan: $ (this).next (this).slideUp (“normal”);} else {$ (this).children (“p”). Children (“span”). Html (“Sembunyikan teks”); $ (ini).next (ini).slideDown (“normal”);} return false; })
Langkah 7
Kemudian klik mouse pada tombol direkam, yang dengannya skrip akan menyembunyikan dan membuka spoiler. $ (“P [nama = 'spoilbutton']”) Klik (fungsi () {Jika ($ (ini).next (ini).css (“tampilan”) =”blok”) {$ (ini).next (ini).slideUp (“normal”); $ (ini).html (“Sembunyikan”);} return false;}); Spoiler siap. Ini akan muncul ketika blok DIV yang cocok ditemukan.
