المفسد هو أداة ملائمة للموقع. يستخدم على نطاق واسع في العديد من المنتديات والمدونات ، مما يسمح للمستخدم بإخفاء عنصر معين في وقت الضغط على الزر. علاوة على ذلك ، يبدو المفسد جيدًا على الموقع ويساعد على إخفاء تلك الأجزاء التي تؤدي إلى زيادة تحميل الصفحة دون داعٍ.
انه ضروري
مكتبة Jquery
تعليمات
الخطوة 1
يمكن تنفيذ المفسد باستخدام مكتبة jquery plug-in الشهيرة المكتوبة بلغة برمجة Java Script. يتم استخدامه لتنفيذ التفاعل الكامل للغة البرمجة مع كود ترميز HTML للصفحة ، ويتم اتصال jquery باستخدام HTML باستخدام علامة . يجب عليك تحديد المكان الذي يوجد فيه البرنامج النصي وتعيين نوعه: $ (document).ready (function ()
الخطوة 2
يجب وضع جزء النص المحدد في فقرة معينة في طبقة منفصلة - div ، والتي سيتم التحكم في المفسد نفسه من خلالها: سار ساشا على طول الطريق السريع وامتصاص التجفيف.
الخطوه 3
بعد ذلك ، تحتاج إلى إنشاء أزرار مطابقة أمام جميع divs المسماة spoil والتي ستؤدي إلى انهيار النص وتوسيعه. أولاً ، يتم إخفاء المفسد نفسه باستخدام وظيفة "إخفاء ()" القياسية: $ ("div [name = 'spoil']"). Hide () ؛ بعد ذلك ، تحتاج إلى إنشاء نص وصورة لجميع المفسدين ، والتي سيتم استخدامها كخلفية للأزرار: $ ("P [name = 'spoilbutton']"). Html ("إظهار النص")؛
الخطوة 4
ابحث عن جميع الأزرار الموجودة على الصفحة وتحقق من عناوين المستوى الأول أمام الزر. للقيام بذلك ، قم بإنشاء شرط يبحث عن علامات h1 بالاسم. يلتف نص العنوان المحدد في div نفسه: $ (“p [name = 'spoilbutton']”). كل (وظيفة () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (this).prev (this).html () +”إظهار النص” ؛ $ (هذا).prev (هذا).replaceWith (“”) ؛ $ (هذا).replaceWith (NewSpoilButton)؛}})
الخطوة الخامسة
بعد ذلك ، تحتاج إلى التعامل مع النقر فوق زر الماوس بنقرة واحدة. إذا تم الكشف عن نقرة ، فيمكن عرضها: $ (“div [name = 'spoilbutton']”). انقر فوق (الوظيفة () {If ($ (this).next (this).css ("display") = =”block”) {
الخطوة 6
ثم اكتب الميراث. داخل div ، يكون النص في فقرة p ، يتم وضع محتواها في علامة span: $ (this).children (“p”). Children (“span”). Html (“Show text”) ؛ Collapse فتح المفسد. إذا لم يكن مفتوحًا ، فقم بتوسيع النص. تستند هذه الخطوة إلى قاعدة الوراثة: $ (this).next (this).slideUp (“normal”)؛} else {$ (this).children (“p”). Children (“span”). Html (“Hide text”)؛ $ (this).next (this).slideDown (“normal”)؛} return false؛ })
الخطوة 7
ثم يتم تسجيل نقرة الفأرة على الزر ، والتي من خلالها يخفي البرنامج النصي ويكشف عن المفسد. $ (“P [name = 'spoilbutton']”). انقر فوق (function () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next (this).slideUp (“normal”)؛ $ (this).html (“Hide”)؛} return false؛})؛ Spoiler جاهز. سيظهر عند العثور على كتلة DIV مطابقة.
