Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--استفاده از پلاگین Popover در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت پانزدهم آموزش در زیر قرار داده شده است.

استفاده از پلاگین Popover در بوت استرپ                                                           قسمت هجدهم

این پلاگین شبیه به Tooltip می باشد بدین صورت که زمانی که کاربر بر روی عنصری کلیک کرد Popover نمایش داده می شود

با این تفاوت که پلاگین Popover می تواند شامل محتوای بسیار بیشتری باشد

چگونه یک Popover ایجاد کنیم؟

  • برای ایجاد یک Popover خصوصیت "data-toggle="popover را به المان مورد نظرمان اضافه می کنیم
  • از خصوصیت title برای مشخص کردن هدر Popover استفاده میکنیم و از خصوصیت data-content برای مشخص کردن متنی که درون بدنه Popover باید نمایش داده شود استفاده می کنیم

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

  • Popover باید با Jquery مقدار دهی اولیه شود به صورت زیر ابتدا المان مورد نظرمان را انتخاب می کنیم سپس متد ()popover را صدا می زنیم

<script>
   $(document).ready(function(){
      $('[data-toggle="popover"]').popover(); 
   });
</script>

به مثال زیر توجه کنید 

<body>

<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>

</body>

 

نتیجه اجرای مثال بالا :

      

6358396387821136551.png

موقعیت Popovers :

  • به طور پیش فرض Popover در سمت راست المان مربوطه قرار می گیرد
  • برای تغییر موقعیت Popover به سمت راست , چپ , بالا,  پایین از خصوصیت data-placement استفاده می شود
  • همچنین می توانید خصوصیت data-placement را به صورت "auto" مقدار دهی کنید که در این صورت تصمیم گیری اینکه  Popover  کجا قرار بگیرد بر عهده Browser میباشد که با توجه به موقعیت صفحه Popover را کجا قرار دهد

<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>

6358396398750361662.png

بستن Popovers :

  • به طور پیش فرض  Popover  با کلیک دوباره  بر روی المان مربوطه بسته می شود
  • با استفاده از خصوصیت "data-trigger="focus شما میتوانید المان را با کلیک برروی هر جایی از صفحه که خارج از المانمان می باشد  ببندید
  • اگر شما می خواهید Popover شما به گونه ای باشد که زمانی که موس بر روی آن قرار گرفت نمایش داده شود و زمانی که موس کنار می رود نمایش خاتمه پیدا کند (Hover) باید از خصوصیت data-trigger  استفده کنید

 

پایان قسمت هجدهم

 ادامه آموزش در قسمت نوزدهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید. 

منبع : https://www.w3schools.com

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.