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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پلاگین Popover در بوت استرپ خواهیم پرداخت.

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

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

کاردبرها

افزونه popover در صورت تقاضا محتوا و نشانه گذاری ایجاد می کند و به طور پیش فرض popover را بعد از عنصر ماشه خود قرار می دهد. به دو روش زیر می توانید popover را اضافه کنید –

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

&lt;a href = "#" data-toggle = "popover" title = "Example popover"&gt;
   Hover over me
&lt;/a&gt;

Hover over me

</a>

از طریق JavaScript – با استفاده از نحو زیر popovers را از طریق JavaScript فعال کنید –

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

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

افزونه Popover پلاگین های فقط css نیست مانند کشویی یا پلاگین های دیگر که در درس های قبلی بحث شده است. برای استفاده از این افزونه باید آن را با استفاده از jquery فعال کنید (javascript را بخوانید). برای فعال کردن همه بازپخش های صفحه خود فقط از این اسکریپت استفاده کنید –

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

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

مثال

مثال زیر استفاده از افزونه popover را از طریق ویژگی های داده نشان می دهد.

&lt;div class = "container" style = "padding: 100px 50px 10px;" &gt;
   &lt;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"&gt;
      
      Popover on left
   &lt;/button&gt;
   
   &lt;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"&gt;
      
      Popover on top
   &lt;/button&gt;
   
   &lt;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"&gt;
      
      Popover on bottom
   &lt;/button&gt;
   
   &lt;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"&gt;
      
      Popover on right
   &lt;/button&gt;
   
&lt;/div&gt;

&lt;script&gt;
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
&lt;/script&gt;

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

$(function (){

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

});

</script>

گزینه ها

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

نام گزینه

مقدار پیش فرض

نام ویژگی داده

توضیح

animation

boolean Default − true

data-animation

انتقال محو CSS را به popover اعمال می کند.

html

boolean Default − false

data-html

HTML را در popover وارد می کند. در صورت نادرست بودن ، از روش متنی jQuery برای قرار دادن محتوا در dom استفاده می شود. اگر نگران حملات XSS هستید از متن استفاده کنید.

placement

string|function Default − top

data-placement

نحوه قرارگیری popover را مشخص می کند (به عنوان مثال ، بالا | پایین | چپ | راست | خودکار). وقتی خودکار مشخص شود ، به صورت پویا مجدداً popover را تغییر جهت می دهد. به عنوان مثال ، اگر جایگذاری “خودکار چپ” باشد ، popover در صورت امکان به سمت چپ نمایش داده می شود ، در غیر این صورت درست نشان داده می شود.

selector

string Default − false

data-selector

در صورت ارائه انتخاب، اشیا popover به اهداف تعیین شده منتقل می شوند.

title

string | function Default − “

data-title

در صورت عدم وجود ویژگی عنوان ، گزینه عنوان عنوان پیش فرض است.

trigger

string Default − ‘hover focus’

data-trigger

نحوه ایجاد popover را مشخص می کند – کلیک کنید | شناور | تمرکز | کتابچه راهنمای. ممکن است چندین راه انداز را منتقل کنید. آنها را با فاصله جدا کنید.

delay

number | object Default − 0

data-delay

تأخیر در نمایش و پنهان کردن popover در ms – در نوع راه انداز دستی صدق نمی کند. اگر یک عدد ارائه شود ، تأخیر برای پنهان کردن / نمایش دادن اعمال می شود. ساختار شی

delay: { show: 500, hide: 100 }

1	delay: { show: 500, hide: 100 }

container

string | false Default − false

data-container

popover را به یک عنصر خاص اضافه می کند. مثال: container: ‘body’

متد ها

در زیر چند متد مفید برای popover وجود دارد –

متد

توضیح

مثال

Options − .popover(options)

یک کنترل کننده popover را به مجموعه عناصر متصل می کند.

$().popover(options)

1	$().popover(options)

Toggle − .popover(‘toggle’)

popover یک عنصر را تغییر می دهد.

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

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

Show − .popover(‘show’)

popover یک عنصر را نشان می دهد.

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

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

Hide − .popover(‘hide’)

popover یک عنصر را پنهان می کند.

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

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

Destroy − .popover(‘destroy’)

popover یک عنصر را پنهان کرده و از بین می برد.

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

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

مثال

مثال زیر روش های افزونه popover را نشان می دهد –

&lt;div class = "container" style = "padding: 100px 50px 10px;" &gt;
   &lt;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"&gt;
      
      Popover on left
   &lt;/button&gt;
   
   &lt;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"&gt;
      
      Popover on top
   &lt;/button&gt;
   
   &lt;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"&gt;
      
      Popover on bottom
   &lt;/button&gt;
   
   &lt;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"&gt;
      
      Popover on right
   &lt;/button&gt;
    
   &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
   
   &lt;p class = "popover-options"&gt;
      &lt;a href = "#" type = "button" class = "btn btn-warning" 
         title = "&lt;h2&gt;Title&lt;/h2&gt;" data-container = "body" 
         data-toggle = "popover" data-content = "
         &lt;h4&gt;Some content in Popover-options method&lt;/h4&gt;"&gt;
         
         Popover
      &lt;/a&gt;
   &lt;/p&gt;
   
   &lt;script&gt;
      $(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 });});
   &lt;/script&gt;
    
&lt;/div&gt;

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

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

$(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 را لیست می کند. این رویداد ممکن است برای اتصال به تابع استفاده شود.

رویداد

توضیح

مثال

show.bs.popover

این رویداد با فراخوانی روش show instance بلافاصله آغاز می شود.

<span class="pln">$</span><span class="pun">(</span><span class="str">'#mypopover'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'show.bs.popover'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#mypopover'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'show.bs.popover'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

shown.bs.popover

این رویداد هنگامی که راهنمای ابزار برای کاربر قابل مشاهده شده است خاموش می شود (منتظر می ماند تا انتقال CSS کامل شود).

<span class="pln">$</span><span class="pun">(</span><span class="str">'#mypopover'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'shown.bs.popover'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#mypopover'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'shown.bs.popover'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

hide.bs.popover

این رویداد بلافاصله پس از فراخوانی روش مخفی کاری برداشته می شود.

<span class="pln">$</span><span class="pun">(</span><span class="str">'#mypopover'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'hide.bs.popover'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#mypopover'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'hide.bs.popover'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

hidden.bs.popover

این رویداد پس از پنهان شدن راهنمای ابزار از کاربر خاموش می شود (منتظر می ماند تا انتقال CSS کامل شود).

<span class="pln">$</span><span class="pun">(</span><span class="str">'#mypopover'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'hidden.bs.popover'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#mypopover'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'hidden.bs.popover'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

مثال

مثال زیر رویدادهای افزونه Popover را نشان می دهد –

&lt;div clas = "container" style = "padding: 100px 50px 10px;" &gt;
   &lt;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"&gt;
      
      Popover on left
   &lt;/button&gt;
   
&lt;/div&gt;

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

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

$(function () { $('.popover-show').popover('show');});

$(function () { $('.popover-show').on('shown.bs.popover', function () {

alert("Alert message on show");

})});

</script>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

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

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

کاردبرها

مثال

گزینه ها

متد ها

مثال

رویداد ها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

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

کاردبرها

مثال

گزینه ها

متد ها

مثال

رویداد ها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه