پلاگین های جاوا اسکریپت در بوت استرپ (2)

دسته بندی :اخبار سایت 13 می 2023 علیرضا بابامرادی 208

نحوه استفاده

با استفاده از Bootstrap JavaScript Data API، به سادگی باید چند ویژگی داده را منتقل کنید
برای تغییر وضعیت نمایش اسلاید برای شروع، data-toggle=”modal” را روی پیوند یا دکمه تنظیم کنید
که می خواهید از آن برای فراخوانی مودال استفاده کنید و سپس data-target=”#foo” را روی آنی تنظیم کنید
که از شناسه مودالش می‌خواهید استفاده کنید.

option

گزینه ها را می توان از طریق ویژگی های داده یا با جاوا اسکریپت وارد کرد. برای استفاده از داده ها
ویژگی ها، داده ها را به نام گزینه اضافه کنید برای توضیحات برخی از گزینه های مدال (به عنوان مثال، data-backdrop=””).

Methods
در زیر چند روش مفید برای استفاده مدال ها با متد ها آورده شده است.
options : محتوای شما را به صورت مدال فعال می کند. یک شی گزینه اختیاری را می پذیرد.
toggle : به صورت دستی یک مودال را تغییر می دهد.
show :به صورت دستی یک مودال را باز می کند.
hide : به صورت دستی یک مودال را پنهان می کند.

Events

در صورت نیاز به اتصال به تابع، Bootstrap رویدادهای فهرست شده درقسمت زیر را ارائه می دهد.
show : بعد از فراخوانی متد show شلیک می شود.
shown :هنگامی که مدال برای کاربر قابل مشاهده باشد، شلیک می شود.
hide :زمانی که متد hide instance فراخوانی شده باشد، فعال می شود
hidden : زمانی که مدال از کاربر مخفی شد، فعال می شود.

Dropdown

فهرست کشویی به طور گسترده در فصل 3 پوشش داده شد، اما تعامل آشکار شد
بر فراز. به عنوان یک تازه‌کننده، فهرست‌های کشویی را می‌توان به نوار ناوبری، قرص‌ها، برگه‌ها و دکمه‌ها اضافه کرد.
برای استفاده از کشویی، data-toggle=”dropdown” را به پیوند یا دکمه ای به آن اضافه کنید
کشویی را تغییر دهید.
اگر باید پیوندها را دست نخورده نگه دارید (که اگر مرورگر جاوا اسکریپت را فعال نکند مفید است)
از ویژگی data-target همراه با href=”#” استفاده کنید.
برای فراخوانی ضامن کشویی از طریق جاوا اسکریپت، از روش زیر استفاده کنید:
$(‘.dropdown-toggle’).dropdown()
ضامن کشویی یک روش ساده برای نمایش یا پنهان کردن کشویی دارد. که option هارا ندارد.

Scrollspy

.افزونه Scrollspy – به شما امکان می دهد بخش هایی از صفحه را بر اساس هدف قرار دهید
موقعیت اسکرول در پیاده سازی اولیه آن، با اسکرول کردن، می توانید کلاس های .active را اضافه کنید
به نوار ناوبری بر اساس موقعیت اسکرول. برای افزودن افزونه Scrollspy از طریق ویژگی های داده،
data-spy=”scroll” را به عنصری که می خواهید روی آن جاسوسی کنید (معمولاً بدنه) اضافه کنید و
data-target=”.navbar” به نوار ناوبری که می خواهید تغییرات کلاس را در آن اعمال کنید. برای
برای این کار، باید عناصری در بدنه صفحه داشته باشید که دارای شناسه های منطبق باشند
لینک هایی که از آنها جاسوسی می کنید.
برای Scrollspy، باید data-spy=”scroll” را به تگ <body> اضافه کنید.
data-target=”.navbar” که به عنصری که شما در حال جاسوسی از آن هستید اشاره می کند:
<body data-spy=”scroll” data-target=”.navbar”>…</body>
در نوار ناوبری، باید لنگرهای صفحه داشته باشید که به عنوان نشانگر برای آن عمل می کنند
عنصری برای جاسوسی.
اگر ترجیح می‌دهید به جای استفاده از داده‌های موجود، Scrollspy را با جاوا اسکریپت فراخوانی کنید.
شما می توانید این کار را با انتخاب عنصر مورد جاسوسی و سپس فراخوانی انجام دهید
تابع ()scrollspy.

برچسب‌ها:استخدام برنامه نویس, استخدام گرافیست, انیمیشن سازی, تبلیغ انیمیشنی, خرید سایت آماده, خرید قالب وردپرس, طراحی بنر, طراحی کارت ویزیت, طراحی لوگو, موشن گرافیک, نهال آی تی

علیرضا بابامرادی

تاریخ عضویت:19 سپتامبر 2022

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) عضویت در کانال

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

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

دیدگاهتان را بنویسید لغو پاسخ

لینک کوتاه:

پلاگین های جاوا اسکریپت در بوت استرپ (2)

نحوه استفاده

option

Events

Dropdown

Scrollspy

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

دیدگاهتان را بنویسید لغو پاسخ

مزایای عضویت در سیگما:

نوشته‌های تازه

آخرین دیدگاه‌ها

دسته بندی مطالب

لینک های کمکی

خدمات اداری

خدمات تیم نهال آی تی

خدمات تیم نهال آی تی

نماد اعتماد الکترونیکی