Spoyler sayt üçün əlverişli bir vasitədir. Müxtəlif forumlarda və bloglarda geniş istifadə olunur və istifadəçiyə bir düyməni basarkən müəyyən bir elementi gizlətməyə imkan verir. Üstəlik, spoyler saytda yaxşı görünür və səhifəni lazımsız yerə yükləyən hissələri gizlətməyə kömək edir.
Vacibdir
Jquery kitabxanası
Təlimat
Addım 1
Spoyler, Java Script proqramlaşdırma dilində yazılmış məşhur jquery plug-in kitabxanasından istifadə edərək həyata keçirilə bilər. Proqramlaşdırma dilinin səhifənin HTML işarələmə kodu ilə tam qarşılıqlı əlaqəsini həyata keçirmək üçün istifadə olunur. Jquery bağlantısı etiketindən istifadə edərək HTML istifadə edilir. Skriptin yerləşdiyi yeri təyin etməli və növünü təyin etməlisiniz: $ (document).ready (function ()
Addım 2
Müəyyən bir abzasda göstərilən mətn parçası ayrı bir təbəqəyə əlavə edilməlidir - div, köməyi ilə korluğun özü idarə ediləcək: Saşa magistral yolda gəzdi və qurudu əmdi.
Addım 3
Sonra, bütün divlərin qarşısında mətni çökdürəcək və genişləndirəcək xarab olan müvafiq düymələr yaratmalısınız. Birincisi, spoyler özü standart "hide ()" funksiyasından istifadə edərək gizlədilir: $ (“div [name = 'spoil']”). Gizlə (); Bundan sonra bütün spoiler üçün bir mətn və bir şəkil yaratmalısınız, düymələr üçün arxa plan olaraq istifadə ediləcək: $ (“P [name = 'spoilbutton']”). Html (“Mətni göstər”);
Addım 4
Səhifədəki bütün düymələri tapın və düymənin qarşısında ilk səviyyə başlıqlarını yoxlayın. Bunu etmək üçün h1 etiketlərini adlarına görə axtaracaq bir şərt yaradın. Göstərilən başlıq mətni divin özünə bükülür: $ (“p [name = 'spoilbutton']”). Hər biri (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (bu).prev (bu). Html () +”mətni göstərmək”; $ (bu).prev (bu).replaceWith (“”); $ (bu).replaceWith (NewSpoilButton);}})
Addım 5
Bundan sonra, siçan düyməsini basmaqla kliklə idarə etməlisiniz. Bir klik aşkar edilərsə, onu göstərmək olar: $ (“div [name = 'spoilbutton']”). (Function () {If ($ (this).next (this).css (“display”) = =”Blok”) {
Addım 6
Sonra miras yazın. Bir div daxilində, mətn p bəndindədir, məzmunu bir aralıq etiketinə yerləşdirilir: $ (bu). Uşaqlar ("p"). Uşaqlar ("span"). Html ("Mətni göstər"); Çıx açıq spoyler. Açıq deyilsə, mətni genişləndirin. Bu addım varislik qaydasına əsaslanır: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). Html ("Mətni gizlət"); $ (bu).next (bu).slideDown ("normal");} false qayıt; })
Addım 7
Sonra düymənin üstündəki siçanın vurulması qeydə alınır, bunun sayəsində skript korlanaraq gizlənəcək. $ (“P [name = 'spoilbutton']”). (Function () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next düyməsini vurun. (bu).slideUp ("normal"); $ (bu).html ("Gizlət");} false qayıt;}); Spoiler hazırdır. Uyğun bir DIV bloku tapıldıqda görünəcək.
