نحوه ساخت اسپویلر در سایت

فهرست مطالب:

نحوه ساخت اسپویلر در سایت
نحوه ساخت اسپویلر در سایت

تصویری: نحوه ساخت اسپویلر در سایت

تصویری: نحوه ساخت اسپویلر در سایت
تصویری: دوره رایگان آموزش طراحی و ساخت سایت با وردپرس در ۲ ساعت 😱 دو ساعت دیگه سایت خودت رو داری 2024, آوریل
Anonim

اسپویلر ابزاری مناسب برای سایت است. به طور گسترده ای در انجمن ها و وبلاگ های مختلف مورد استفاده قرار می گیرد و به کاربر اجازه می دهد تا در هنگام فشار دادن یک عنصر خاص را پنهان کند. علاوه بر این ، اسپویلر در سایت خوب به نظر می رسد و به پنهان کردن قسمتهایی که صفحه را بیش از حد غیر ضروری می کنند ، کمک می کند.

نحوه ساخت اسپویلر در سایت
نحوه ساخت اسپویلر در سایت

لازم است

کتابخانه Jquery

دستورالعمل ها

مرحله 1

اسپویلر را می توان با استفاده از کتابخانه پلاگین محبوب jquery که در زبان برنامه نویسی Java Script نوشته شده است ، پیاده سازی کرد. برای اجرای تعامل کامل زبان برنامه نویسی با کد نشانه گذاری HTML صفحه استفاده می شود. اتصال jquery با استفاده از HTML با استفاده از برچسب انجام می شود. شما باید محلی را که اسکریپت در آن قرار دارد تعیین کنید و نوع آن را تعیین کنید: $ (سند). آماده (تابع ()

گام 2

قطعه متن مشخص شده در یک پاراگراف خاص باید در یک لایه جداگانه محصور شود - یک div ، که با کمک آن خود اسپویلر کنترل می شود: ساشا در امتداد بزرگراه قدم زد و خشک شد.

مرحله 3

در مرحله بعدی ، شما باید در مقابل همه div ها با نام دکمه های مربوط به spoil ایجاد کنید که متن را می شکند و گسترش می دهد. ابتدا ، خود اسپویلر با استفاده از تابع استاندارد "hide ()" پنهان می شود: $ ("div [name = 'spoil"]). مخفی کردن () ؛ در مرحله بعدی ، باید متن و تصویر را برای همه اسپویلرها ایجاد کنید $ ("P [name = 'spoilbutton"]). Html ("نمایش متن")؛

مرحله 4

تمام دکمه های صفحه را پیدا کنید و عناوین سطح اول را در مقابل دکمه بررسی کنید. برای انجام این کار ، یک شرط ایجاد کنید که برچسب های h1 را با نام جستجو کند. متن عنوان مشخص شده به خود div تقسیم می شود: $ ("p [name = 'spoilbutton"]). هر (تابع () {If ($ (این).prev (این).get (0).tagName == "H1") {Var NewSpoilButton = " + $ (این).prev (این).html () + "نمایش متن"؛ $ (این).prev (این).replaceWith (")؛ $ (این).replaceWith (NewSpoilButton)؛}})

مرحله 5

در مرحله بعدی ، شما باید کلیک دکمه ماوس را با کلیک کنترل کنید. در صورت شناسایی یک کلیک ، می توان آن را نمایش داد: $ ("div [name = 'spoilbutton"]). (function () {If ($ (this).next (this).css ("display") = کلیک کنید) = "بلوک") {

مرحله 6

سپس ارث را بنویسید. در یک div ، متن در بند p است ، محتوای آن در یک برچسب دهانه قرار می گیرد: $ (این). کودکان ("p"). کودکان ("دهانه"). HTML ("نمایش متن") ؛ جمع شدن اسپویلر باز اگر باز نیست ، متن را گسترش دهید. این مرحله براساس قانون وراثت است: $ (این). بعدی (این).slideUp ("عادی")؛} دیگر {$ (این). بچه ها ("p"). کودکان ("دهانه"). Html ("پنهان کردن متن") ؛ $ (این). بعدی (این).slideDown ("عادی")؛} بازگشت نادرست ؛ })

مرحله 7

سپس همان کلیک ماوس بر روی دکمه ثبت می شود که توسط آن اسکریپت اسپویلر را پنهان کرده و باز می کند. $ ("P [name = 'spoilbutton']") کلیک کنید (تابع () {If ($ (این). بعدی (این).css ("نمایش") = "بلوک") {$ (این). بعدی (این).slideUp ("عادی")؛ $ (این).html ("پنهان کردن")؛} برگشت نادرست؛}) ؛ اسپویلر آماده است. وقتی بلوک DIV منطبق پیدا شد ، ظاهر می شود.

توصیه شده: