در این جلسه از دوره آموزش بوت استرپ به بررسی پلاگین POPOVER در بوت استرپ می پردازیم.
پلاگین POPOVER چیست ؟
پلاگین Popover شبیه به یک tooltip است. این پلاگین مانند پلاگین tooltip عمل می کند یعنی زمانی که روی یک عنصر کلیک می شود محتویات آن به کاربر نمایش داده می شود.تفاوت این پلاگین با پلاگین tooltip در این است که popover می تواند مطالب بیشتری داشته باشد.
چگونه می توان پلاگین POPOVER را در بوت استرپ ایجاد کرد؟
- پلاگین popover را به بوت استرپ اضافه کنید.(نحوه انجام این کار در جلسات پیش توضیح داده شده است).
- ویژگی “attribute – toggle = “popover را به عنصر اضافه کنید.
- ویژگی title را به عنصر اضافه کنید.این ویژگی متن هدر popover را مشخص می کند.
- ویژگی data-content را به عنصر اضافه کنید که برای نمایش محتوای عنصر کاربرد دارد.
- Popovers باید با jQuery راه اندازی شود.عنصر مشخص شده را انتخاب کنید و با استفاده از روش ()popover , پاپ آور را در سند فعال کنید.
به نحوه نوشتن تگ ها دقت کنید.
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>کد زیر همه popovers را در سند فعال می کند:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
بیشتر بخوانید : پیجر در بوت استرپ ( بررسی کامل در بوت استرپ )
به مثال زیر دقت کنید:
<div class="container">
<h3>Popover Example</h3>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
تغییرموقعیت POPOVER در بوت استرپ :
- در بوت استرپ به طور پیش فرض popover در سمت راست عنصر نمایش داده می شود.
- مکان نمایش popover در بوت استرپ را می توان تغییر داد .
- برای تغییر موقعیت popover به بالا , پایین , سمت چپ یا سمت راست عنصر , از ویژگی data-placement استفاده کنید.
به مثال زیر دقت کنید.
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>نکته: می توانید از ویژگی “data-placement” با مقدار “auto” استفاده کنید که به مرورگر اجازه می دهد موقعیت popover را تعیین کند. به عنوان مثال، اگر مقدار” data-placement =”auto left باشد، popover در صورت داشتن فضا در سمت چپ نمایش داده می شود در غیر این صورت در سمت راست نمایش داده خواهد شد.
نحوه بستن پنجره POPOVER در بوت استرپ :
- به صورت پیش فرض در بوت استرپ زمانی که دو بار روی عنصر کلیک کنید پنجره بسته می شود.
- می توانید از ویژگی “data-trigger = “focus استفاده کنید تا هنگام کلیک در خارج پاپ آپ پاپ آپ بسته شود.
در مثال زیر این موضوع بررسی شده است.
<div class="container">
<h3>Popover Example</h3>
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
: DATA-TRIGGER=”HOVER”ویژگی
اگر می خواهید همزمان با کنار رفتن اشاره گر موس از روی عنصر , popover دیگر نمایش داده نشود می توانید از این ویژگی استفاده کنید.
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
