Spoyler sayt uchun qulay vositadir. U turli forumlarda va bloglarda keng qo'llaniladi, bu foydalanuvchiga tugmani bosish paytida ma'lum bir elementni yashirishga imkon beradi. Bundan tashqari, spoyler saytda yaxshi ko'rinadi va sahifani ortiqcha yuklaydigan qismlarni yashirishga yordam beradi.
Bu zarur
Jquery kutubxonasi
Ko'rsatmalar
1-qadam
Spoylerni Java Script dasturlash tilida yozilgan mashhur jquery plaginlari kutubxonasi yordamida amalga oshirish mumkin. U dasturlash tilining sahifaning HTML belgilash kodi bilan to'liq o'zaro ta'sirini amalga oshirish uchun ishlatiladi. Jquery aloqasi HTML yordamida yorlig'i yordamida amalga oshiriladi. Siz skript joylashgan joyni belgilashingiz va uning turini belgilashingiz kerak: $ (document).ready (function ()
2-qadam
Muayyan xatboshida ko'rsatilgan matn parchasi alohida qatlam - div bilan yopilishi kerak, uning yordamida spoyler o'zi boshqariladi: Sasha shosse bo'ylab yurib, quriydi.
3-qadam
Keyinchalik, barcha divlar oldida buzilgan mos keladigan tugmachalarni yaratishingiz kerak, ular matnni kengaytiradi va kengaytiradi. Birinchidan, spoylerning o'zi standart "hide ()" funktsiyasi yordamida yashiringan: $ (“div [name = 'spoil']”). Hide (); Keyin barcha spoylerlar uchun matn va rasm yaratishingiz kerak, bu tugmalar uchun fon sifatida ishlatiladi: $ (“P [name = 'spoilbutton']”). Html (“Matnni ko'rsatish”);
4-qadam
Sahifadagi barcha tugmachalarni toping va tugma oldida birinchi darajali sarlavhalarni tekshiring. Buning uchun h1 teglarini nomlari bo'yicha qidiradigan shart yarating. Belgilangan sarlavha matni divning ichiga o'raladi: $ (“p [name = 'spoilbutton']”). Har biri (function () {If ($ (this).prev (this).get (0).tagName == "H1") {Var NewSpoilButton = " + $ (bu).prev (bu).html () + "matnni ko'rsatish"; $ (bu).prev (bu).replaceWith ("); $ (bu).replaceWith (NewSpoilButton);}})
5-qadam
Keyin sichqoncha tugmachasini bosish bilan ishlashingiz kerak. Agar chertish aniqlansa, uni ko'rsatish mumkin: $ (“div [name = 'spoilbutton']”). (Function () {If ($ (this).next (this).css ("display") =) = "Blokirovka") {
6-qadam
Keyin merosni yozing. Div ichida matn p bandida joylashgan bo'lib, uning mazmuni oraliq yorlig'iga joylashtirilgan: $ (this). Children ("p"). Children ("span"). Html ("Show text"); Collapse ochiq spoyler. Agar u ochiq bo'lmasa, matnni kengaytiring. Ushbu qadam meros qoidasiga asoslanadi: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). Html ($ (This).next (this).slideDown ("normal");} return false; })
7-qadam
Keyin tugmachani bosgan sichqoncha yoziladi, shu bilan skript spoylerni yashiradi va ochadi. $ (“P [name = 'spoilbutton']”). (Function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next tugmachasini bosing. (this).slideUp ("normal"); $ (this).html ("Hide");} return false;}); spoiler tayyor. Mos keladigan DIV blok topilganda paydo bo'ladi.
