آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

مرجع کار با JS Popover در Bootstrap 4

دوره های مرتبط با این مقاله

مرجع کار با JS Popover در Bootstrap 4:

کامپوننت Popover بسیار شبیه کادر راهنمای ToolTip است. کادر Popover یک جعبه یا box است که در هنگام کلیک کاربر بر روی یک المنت، ظاهر می شود. تفاوت مهم Popover و کادر ToolTip این است که کادر Popover می تواند محتوای بیشتری نشان دهد. برای دریافت اطلاعات کامل درباره کامپوننت Popover، به بخش آموزش کادر Popover در سایت تحلیل داده بروید.

آموزش فعال کردن کادر Popover با خواص Data Attributes :

خاصیت data-toggle برابر با popover، کادر popover را فعال کرده و نشان می دهد. خاصیت title، متن بخش هدر (سر عنوان) کادر Popover را تعیین می کند. خاصیت data-content نیز، متنی که بایستی درون بدنه (body) کادر Popover نمایش داده شود را تعیین می کند. مثال : در کد مثال عملی زیر، یک تگ لینک <a> ایجاد کرده ایم که در صورت کلیک بر روی آن، کادر Popover باز می شود :

آموزش فعال کردن کادر Popover در جاوا اسکریپت :

کادرهای Popover، افزونه های صرفا CSS ی نیستند (CSS-only plugin)، لذا بایستی توسط jQuery فراخوانی و اجرای اولیه شوند. برای این منظور بایستی عنصر مورد نظر را انتخاب کرده و متد popover() را به صورت زیر، بر روی آن فراخوانی کنید :

مثال 2

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
امتحان کنید

آموزش ویژگی (option) کادر Popover:

ویژگی ها (options) کادر محاوره ای Popover را می توانید از طریق خواص data attributes یا کدهای جاوا اسکریپت، به عنصر اعمال کنید. جهت استفاده از خواص data attributes، بایستی نام ویژگی را به خاصیت data* اضافه کنید، مثل data-delay.

نام
نوع
پیش فرض
توضیح
animation
درست یا غلط Boolean
true
این خاصیت تعیین می کند آیا افکت CSS fade Transition به کادر Popover در هنگام باز و بسته شدن (به حالت تدریجی) اضافه شود یا خیر.
  • true : دارای افکت fade خواهد بود.
  • false : دارای افکت fade نخواهد بود.
Container
شی (String) یا Boolean.
false
کادر محاوره ای Popover را به یک المنت خاص الحاق می کند، برای مثال container : body.
content.
متنی string.
متنی string.
متن درون قسمت body یا بدنه کادر Popover را تعیین می کند.
delay.
عدد یا object.
o صفر.
مدت زمان باز و بسته شدن کادر Popover را بر حسب میلی ثانیه تعیین می کند.

برای تعیین یک زمان تأخیر جهت باز شدن و یک زمان تأخیر جهت بسته شدن، از ساختار زیر استفاده کنید : delay:{show: 500, hide:100} که در این صورت 500 میلی ثانیه طول می کشد تا کادر Popover باز شده و 100 میلی ثانیه طول می کشد تا بسته شود.

html.
boolean.
false.
این ویژگی تعیین می کند آیا کادر Popover، تگ های HTML را درون خود قبول کند (true) یا خیر (false).

توجه کنید که تگ های HTML بایستی در خاصیت title attribute وارد شده یا از ویژگی title option استفاده کنید. هنگامی که بر روی false (مقدار پیش فرض) تنظیم شود، برنامه از متد jQuery text() استفاده خواهد کرد. از این متد، در صورتی که نگران حملات XSS هستید، استفاده کنید.

Placement.
String.
“right”.
این خاصیت تعیین می کند کادر Popover در کدام سمت المنت باز شود، مقادیر قابل استفاده عبارتند از :
  • top : در بالای المنت باز می شود.
  • bottom : در زیر المنت باز می شود.
  • left: در سمت چپ المنت باز می شود.
  • right : در سمت راست المنت باز می شود.
  • auto : این حالت به مرورگر اجازه می دهد خودش به صورت خودکار، جهت باز شدن کادر Popover را تعیین نماید. برای مثال اگر بر روی مقدار “auto left” تنظیم شده است، کادر Popover در سمت چپ المنت باز خواهد شد و اگر فضای کافی وجود نداشته باشد و امکان پذیر نباشد، در سمت راست باز خواهد شد. یا اگر بر روی مقدار “auto top” تنظیم شود، کادر Popover در بالای المنت باز می شود، ولی اگر ممکن نبود و فضای کافی وجود نداشته باشد، در قسمت زیر آن باز خواهد شد.
selector
متنی (string) یا Boolean-false
false
کادر Popover را به یک المنت Selector متصل می کند.
template
متنی String
false
تگ های HTML پایه برای ایجاد المنت Popover را تعیین می کند.

عنوان یا title کادر Popover درون عنصر با کلاس popover-header قرار می گیرد. محتویات کادر popover درون عنصر با کلاس popover-body قرار می گیرد. کلاس arrow، یک فلش را در کادر popover ایجاد می کند. عنصر مادر یا دربرگیرنده اصلی کادر popover هم بایستی دارای کلاس popover باشد.

title
متنی String.
متنی “String”.
متن (Text)، هدر (سر عنوان) کادر Popover را تعیین می کند.
trigger.
متنی String.
“click”.
تعیین می کند چگونه کادر Popover، فراخوانی و اجرا شود. مقادیر قابل استفاده عبارتند :
  • ”click” : کادر Popover با کلیک بر روی المنت ظاهر می شود.
  • ”hover” : کادر Popover با عبور موس از روی المنت ظاهر می شود.
  • “focus” : کادر Popover در هنگام دریافت فوکوس برنامه ظاهر و فعال می شود (با زدن دکمه Tab یا کلیک روی آن و ...)، توجه شود که می توانید 2 یا چندین مقدار از مقادیر را برای المنت تعیین کنید، برای این منظور بایستی نام آن ها را با کاما، از هم جدا کنید.
offset
number یا متنی String
o صفر
کادر Popover را با اختلاف ترازبندی از بالا نسبت به المنت فراخوانی کننده آن، نشان می دهد. مثلا 30 واحد پایین تر یا بالاتر.

آموزش کار با متدهای (Method) کادر Popover :

در جدول زیر، لیست کامل متدهای (Methods)، کادر Popover را به همراه توضیح و کاربرد، ارائه کرده ایم :

متد
توضیح
متد popover(options)
این متد، کادر popover را بر حسب ویژگی (option) تعیین شده برای آن، فراخوانی و اجرا می کند. در ادامه، انواع ویژگی ها (options) قابل استفاده در این متد را نشان داده ایم.
متد popover(“show”)
کادر popover را نمایان کرده و نشان می دهد.
متد popover(“hide”)
کادر popover را مخفی می كند.
متد popover(“toggle”)
وضعیت کادر popover را تغییر می دهد (از حالت نمایان به مخفی و برعکس).
متد popover(“dispose”)
کادر popover را مخفی کرده و سپس از بین می برد.
popover(“enable”)
کادر popover را فعال کرده تا قابل نشان داده شدن باشد، مقدار پیش فرض است.
popover(“disable”)
کادر popover را غیر فعال کرده و دیگر قابل نمایش نیست، مگر اینکه دوباره فعال (enable) شود.
popover(“toggleEnabled”)
امکان فعال بودن یا غیر فعال بودن کادر popover را تغییر می دهد (از حالت فعال به غیر فعال و برعکس).
popover(“update”)
موقعیت قرارگیری کادر popover را به روزرسانی می کند.

آموزش کار با رویدادها (Events) کادر Popover:

در جدول زیر، لیست کامل رویدادهای (Events) کادر Popover را به همراه توضیح و کاربرد، نشان داده ایم :

رویداد
توضیح
show.bs.popover
این رویداد زمانی رخ می دهد که کادر popover آماده نمایش داده شدن و ظاهر شدن است.
shown.bs.popover
زمانی رخ می دهد که کادر popover کامل باز شده و ظاهر گشته است (پس از اتمام عملیات CSS Transition یا ظاهر و مخفی شدن تدریجی عنصر).
hide.bs.popover
این رویداد زمانی رخ می دهد که کادر popover در حال بسته شدن و مخفی شدن است.
hidden.bs.popover
زمانی رخ می دهد که کادر popover کاملا بسته و مخفی شده است (پس از اتمام عملیات CSS Transition یا ظاهر و مخفی شدن تدریجی عنصر).
inserted.bs. popover
این رویداد پس از اتمام رویداد Show.bs. popover و اضافه شدن template کامل کادر popover و DoM صفحه، روی می دهد.
  • 33
  •    38
  • تاریخ ارسال :   1398/09/05

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .