Spoiler, site için uygun bir araçtır. Çeşitli forumlarda ve bloglarda yaygın olarak kullanılır ve kullanıcının bir düğmeye basıldığında belirli bir öğeyi gizlemesine olanak tanır. Ayrıca, spoiler sitede iyi görünüyor ve sayfayı gereksiz yere aşırı yükleyen bölümlerin gizlenmesine yardımcı oluyor.
Bu gerekli
Jquery kütüphanesi
Talimatlar
Aşama 1
Spoiler, Java Script programlama dilinde yazılmış popüler jquery eklenti kitaplığı kullanılarak uygulanabilir. Programlama dilinin sayfanın HTML işaretleme kodu ile tam etkileşimini uygulamak için kullanılır. Jquery bağlantısı etiketi kullanılarak HTML kullanılarak yapılır. Komut dosyasının bulunduğu konumu belirtmeli ve türünü ayarlamalısınız: $ (belge).ready (işlev ()
Adım 2
Belirli bir paragrafta belirtilen metin parçası ayrı bir katmana yerleştirilmelidir - bunun yardımıyla spoilerin kendisinin kontrol edileceği bir div: Sasha otoyol boyunca yürüdü ve kurumayı emdi.
Aşama 3
Ardından, metni daraltacak ve genişletecek ilgili düğmelere karşılık gelen yağma adlı tüm div'lerin önünde oluşturmanız gerekir. İlk olarak, spoiler standart "hide ()" işlevi kullanılarak gizlenir: $ (“div [name = 'spoil']”). Hide (); Ardından, tüm spoiler için bir metin ve bir görüntü oluşturmanız gerekir, butonlar için arka plan olarak kullanılacak olan: $ (“P [isim = 'spoilbutton']”) Html (“Metni göster”);
4. Adım
Sayfadaki tüm düğmeleri bulun ve düğmenin önündeki ilk düzey başlıkları kontrol edin. Bunu yapmak için, h1 etiketlerini ada göre arayacak bir koşul oluşturun. Belirtilen başlık metni div'in içine sarılır: $ (“p [name = 'spoilbutton']”). Her (function () {If ($ (bu).prev (bu).get (0).tagName ==) “H1”) {Var NewSpoilButton =“”+ $ (bu).prev (bu).html () +” Metni göster”; $ (bu).prev (bu).replaceWith (“”); $ (bu).replaceWith (NewSpoilButton);}})
Adım 5
Ardından, fare düğmesinin tıklamasını tıklama ile işlemeniz gerekir. Bir tıklama algılanırsa, görüntülenebilir: $ (“div [ad = 'spoilbutton']”). Klik (function () {If ($ (bu).next (bu).css (“ekran”) = =” blok”) {
6. Adım
Sonra miras yazın. Bir div içinde metin, içeriği bir yayılma etiketine yerleştirilmiş olan p paragrafındadır: $ (bu).children ("p") Çocuklar ("span"). Html ("Metni göster"); Daralt spoiler'ı açın. Açık değilse, metni genişletin. Bu adım, miras kuralına dayanmaktadır: $ (bu).next (bu).slideUp (“normal”);} else {$ (bu).children (“p”). Çocuklar (“span”). Html (“Metni gizle”); $ (bu).next (bu).slideDown (“normal”);} false döndür; })
7. Adım
Ardından, komut dosyasının spoyleri gizleyeceği ve açacağı düğme üzerindeki fare tıklaması kaydedilir. $ (“P [name = 'spoilbutton']”). (function () öğesini tıklayın {If ($ (bu).next (bu).css (“ekran”) =”blok”) {$ (bu).next (bu).slideUp (“normal”); $ (bu).html (“Gizle”);} false döndür;}); Spoiler hazır. Eşleşen bir DIV bloğu bulunduğunda görünecektir.
