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

نحوه کارکردن با popover
برای فعال کردن popover با جاوا اسکریپت، از تابع .popover() استفاده کنید
گزینه هایی که ممکن است نیاز داشته باشید:
$(‘#example’).popover(options)

Options

همه گزینه ها را می توان از طریق Bootstrap Data API یا مستقیماً با جاوا اسکریپت ارسال کرد.

متد ها

در اینجا چند روش مفید برای پاپاور آورده شده است.
options : پاپاورها را برای یک مجموعه عناصر راه اندازی می کند:
$().popover(options)
Show : پاپاور یک عنصر را نشان می دهد:
$(‘#element’).popover(‘show’)
Hide : پاپاور یک عنصر را پنهان می کند:
$(‘#element’).popover(‘hide’)
Toggle : پاپاور یک عنصر را تغییر می دهد:
$(‘#element’).popover(‘toggle’)
Destroy : پاپاور یک عنصر را پنهان و از بین می برد:
$(‘#element’).popover(‘destroy’)

Alerts

با Data API، اضافه کردن قابلیت رد کردن به پیام‌های هشدار آسان است.
می‌توانید یک هشدار را به‌صورت دستی با متد ()alert. JavaScript ببندید یا از ویژگی‌های داده در ارتباط با یک لنگر یا دکمه استفاده کنید.
در اینجا نحوه رد کردن از طریق جاوا اسکریپت آمده است:
$(“.alert”).alert()
در اینجا نحوه رد کردن از طریق Data API آمده است:
<a class=”close” data-dismiss=”alert” href=”#”>&times;</a>

متد Close

برای فعال کردن بسته شدن همه هشدارها، روش زیر را اضافه کنید. برای فعال کردن هشدارها برای متحرک کردن
وقتی بسته هستند، مطمئن شوید که کلاس .fade و .in قبلاً روی آنها اعمال شده است.
$(“.alert”).alert(‘close’)

event ها

همانطور که در جدول 4-8 نشان داده شده است، دو رویداد وجود دارد که می توانند به کلاس هشدار Bootstrap مرتبط شوند.
Close : هنگامی که متد close instance فراخوانی می شود، این رویداد بلافاصله فعال می شود.
Closed : این رویداد زمانی فعال می شود که هشدار بسته شده باشد (منتظر تکمیل انتقال CSS می شود.
به عنوان مثال، اگر می‌خواهید پس از بسته شدن یک هشدار، عملکردی را فعال کنید، می‌توانید
از این تابع استفاده کنید:
$(‘#my-alert’).bind(‘closed’, function () {
// do something…
})

buttons

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

Loading State

برای افزودن وضعیت بارگیری به یک دکمه، کافی است data-loadingtext=”Loading…” را به عنوان یک ویژگی به دکمه اضافه کنید:
<button type=”button” class=”btn btn-primary” data-loading-text=”Loading…”>
Submit!</button>
وقتی روی دکمه کلیک می‌شود، کلاس .disabled اضافه می‌شود و به این شکل ظاهر می‌شود
دیگر نمی توان کلیک کرد

Single Toggle

وقتی روی دکمه ای با ویژگی data-toggle=”button” کلیک می کنید، الف
کلاس .active اضافه شده است:
<button type=”button” class=”btn btn-primary” data-toggle=”button”>Toggle
</button>

Checkbox Buttons

دکمه‌ها می‌توانند مانند چک باکس‌ها کار کنند و به کاربر اجازه می‌دهند بسیاری از آنها را انتخاب کند
گزینه ها در یک گروه دکمه برای افزودن این تابع، data-toggle=”buttonscheckbox” را برای تغییر حالت چک باکس در گروه btn. اضافه کنید:
<div class=”btn-group” data-toggle=”buttons-checkbox”>
<button type=”button” class=”btn btn-primary”>Left</button>
<button type=”button” class=”btn btn-primary”>Middle</button>
<button type=”button” class=”btn btn-primary”>Right</button>
</div>

Radio Buttons

دکمه‌های رادیویی مشابه باکس‌ها عمل می‌کنند. تفاوت اولیه
این است که یک دکمه رادیویی اجازه انتخاب چندگانه را نمی دهد – فقط یک دکمه در گروه
را می توان انتخاب کرد. برای اضافه کردن تغییر حالت رادیویی در گروه btn، data-toggle=”buttonsradio” را اضافه کنید:
<div class=”btn-group” data-toggle=”buttons-radio”>
<button type=”button” class=”btn btn-primary”>Left</button>
<button type=”button” class=”btn btn-primary”>Middle</button>
<button type=”button” class=”btn btn-primary”>Right</button>
</div>