جلسه سی و نهم از دوره آموزش Bootstrap : پلاگین Popover

پلاگین Popover

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

popover شبیه به پلاگین tooltip است ، یک view گسترش یافته کامل با یک عنوان را فراهم می کند. برای فعال شدن popover ،  یک کاربر فقط باید مکان نما را روی عنصر قرار دهد. محتوای popover را می توان به طور کامل با استفاده از Bootstrap Data API پر کرد.  این متد نیاز به یک tooltip دارد.

اگر بخواهیم که این پلاگین را به صورت جداگانه وارد کنیم ، در این صورت به فایل popover.js نیاز خواهیم داشت. در غیر این صورت ،  همان طور که در مقاله "مروری بر پلاگین های بوت استرپ" ذکر شد ، می توانیم از یکی از فایل های bootstrap.js یا bootstrap min.js.min.js استفاده نماییم.

نحوه کاربرد

پلاگین popover محتوا و نشانه گذاری را بر اساس تقاضا ایجاد می کند و به طور پیش فرض popover را بعد از عنصر trigger آنها قرار می دهد. ما می توانیم popover را در دو روش زیر اضافه کنیم :

• از طریق ویژگی های داده : برای افزودن popover ، مقدار "data-toggle=”popover را به یک تگ anchor/button اضافه می کنیم. عنوان anchor متن یک popover خواهد بود. به طور پیش فرض ، popover از طریق پلاگین در قسمت بالا تنظیم می شود.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

• از طریق جاوا اسکریپت : popover ها از طریق جاوا اسکریپت با استفاده از قاعده نوشتاری زیر فعال می شوند :

$('#identifier').popover(options)

نکته : پلاگین Popover مانند پلاگین dropdown و سایر پلاگین های بحث شده در مقاله های قبلی ، فقط پلاگین های css نیستند. برای استفاده از این پلاگین ، باید آن را با استفاده از jquery فعال کنیم. برای فعال کردن تمام popover ها در صفحه خود کافی است از این اسکریپت استفاده کنیم :

$(function () { $("[data-toggle = 'popover']").popover(); });

مثال

مثال زیر ، نحوه کاربرد پلاگین popover از طریق ویژگی های داده را نشان می دهد :

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

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

خروجی قطعه کد فوق به صورت زیر می باشد :

آپشن ها

آپشن های مشخصی وجود دارند که می توان از طریق Bootstrap Data API یا از طریق جاوا اسکریپت فراخوانی شده آنها را اضافه نمود. در جدول زیر این آپشن ها لیست شده اند :

delay: { show: 500, hide: 100 }

متدها

بر جدول زیر برخی از متدهای کاربردی مربوط به popover ارائه شده است :

$().popover(options)

$('#element'). popover ('toggle')

$('#element'). popover ('show')

$('#element'). popover ('hide')

$('#element'). popover ('destroy')

مثال

مثال زیر نحوه استفاده از پلاگین popover را با استفاده از ویژگی های داده نشان می دهد :

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :

رویدادها

جدول زیر رویدادهایی را که با پلاگین popover کار می کنند ، فهرست نموده است. این رویدادها ممکن است به تابع متصل شوند.

$('#mypopover').on('show.bs.popover', function () {

   // do something

})

$('#myTooltip').on('shown.bs.tooltip', function () {

   // do something

})

$('#mypopover').on('hide.bs.popover', function () {

   // do something

})

$('#mypopover').on('hidden.bs.popover', function () {

   // do something

})

مثال

مثال زیر ، نحوه کاربرد پلاگین popover را با استفاده از ویژگی های داده نشان می دهد :

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>

خروجی قطعه کد فوق به صورت زیر می باشد :