نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover) از سری آموزش های تک قسمتی است.

 

پاپ اور (Popover)

قبلا درباره پاپ اور توضیح داده ایم اما برای آن دسته از عزیزانی که مستقیما در حال مشاهده این آموزش هستند دوباره پاپ اور را توضیح میدهیم . پاپ اور مشابه تولتیپ است با این تفاوت که تولتیپ با رفتن موس روی المان نمایش داده میشود ولی پاپ اور با کلیک روی المان نمایش داده میشود.

 

نحوه ساخت پاپ اور

نحوه ساخت پاپ اور تقریبا مشابه تولتیپ است شما میتوانید قابلیت پاپ اور را به هر تگی بدهید ما اینجا از تگ a استفاده میکنیم لازم است که در تگ a خود attribute با نام data-toggle را مساوی با مقدار popover قرار دهید همچنین attribute با نام title را نیز برابر با header قرار دهید حال نوبت به محتویات داخل پاپ اور هست که با attribute با نام data-content میتوانید آن را بسازید یعنی هر مقداری که برای data-content بنویسید میشود محتویات داخل پاپ اور شما حال نیاز به قطعه کدی جیکوئری دارید که همراه با مثال همین قسمت میتوانید در کد زیر ببینید:

<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

شما میتوانید تعیین کنید که پاپ اور در کدام جهت باز شود چهار جهت اصلی یعنی بالا، پایین، چپ و راست میتواند نمایانگر پاپ اور شما باشد برای این مورد کافیست attribute با نام data-placement را برابر با یکی از مقادیر زیر قرار دهید

  • top : برای باز شدن پاپ اور درجهت بالا
  • bottom : برای باز شدن در جهت پایین
  • right : برای باز شدن در جهت راست
  • left : برای باز شدن در جهت چپ

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

 

بسته شدن پاپ اور با کلیک در هرجا از صفحه

در حالت عادی با کلیک روی تگ مد نظر پاپ اور باز میشود و با کلیک مجدد روی همان تگ پاپ اور بسته میشود اما اگر بخواهیم پس از باز شدن پاپ اور با کلیک روی هر کجا از صفحه پاپ اور بسته شود کافیست attribute با نام data-trigger را مساوی با focus قرار دهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

 

باز و بسته شدن پاپ اور با قرار گیری موس روی آن

در حالت عادی پاپ اور با کلیک روی تگ مد نظر باز و بسته میشود اگر میخواهید پاپ اور هم مانند تولتیپ با رفتن موس روی تگ مد نظر باز و بسته شود کافیست attribute با نام  data-trigger را برابر با hover قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

 

انیمیشن در پاپ اور

در حالت عادی پاپ اور به صورت خشک و بدون افکت و لحظه ای باز و بسته میشود اگر میخواهید افکت fade را به آن بدهید کافیست دستور انیمیشن را اجرا کنید به این صورت که در کد جیکوئری خود دستور animation را برابر با true قرار دهید اگر این مقدار را  false کنید انیمیشن غیر فعال میشود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div>
    <button class="btn btn-success">Click me (animation: true)</button>
    <button class="btn btn-warning">Click me (animation: false)</button>
  </div>

<script>
$(document).ready(function(){
  $('.btn-success').popover({title: "Header", content: "Blabla", animation: true}); 
  $('.btn-warning').popover({title: "Header", content: "Blabla", animation: false}); 
});
</script>

 

اختصاص دادن پاپ اور به یک container

ابتدا ببینیم که این مورد به چه کار ما می آید فرض کنید شما یک کلمه داخل یک div با سایز بزرگ نوشته اید و میخواهید هر کجای این div که کلیک کردید پاپ اور مربوط به نوشته باز شود بسیار خوب حال که کاربرد این قسمت را متوجه شدیم کافیست برای اجرایی کردن این حالت یک div با کلاس مد نظر خود بسازیم سپس عبارت مد نظر خود را داخل آن بنویسیم  این عبارت میتواند یک تگ html باشد یا هر چیز دیگر سپس باید به کمک دستور container آن را در جیکوئری خود اضافه کنیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

  <div class="parent">
    <button class="btn btn-success">Click me</button>
  </div>
  
<script>
$(document).ready(function(){
  $('.btn').popover({title: "Header", content: "Blabla", container: ".parent"}); 
});
</script>

 

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

در حالت عادی به محض کلیک روی تگ پاپ اور باز میشود و به محض کلیک مجدد بسته اگر بخواهید در این باز و بسته شدن تاخیر به وجود بیاوریم میتوانید ۲ کار انجام دهید حالت اول این است که در باز شدن تاخیر به وجود بیاید کافیست دستور delay را در کد جیکوئری برابر با یک مقدار بر حسب میلی ثانیه قرار دهیم به عنوان مثال ۱۰۰۰ که میشود یک ثانیه اما اگر بخواهیم این تاخیر را هم به باز شدن و هم به بسته شدن بدهیم باید دستور delay را نوشته و در {} مقادیر show و hide را به آن اختصاص دهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

  <button class="btn btn-success">Click me</button><br><br>
  <button class="btn btn-danger">Click me</button>

<script>
$(document).ready(function(){
  $('.btn-success').popover({title: "Header", content: "Blabla", delay: 1000}); 
  $('.btn-danger').popover({title: "Header", content: "Blabla", delay: {show: 500, hide: 100}}); 
});
</script>

 

استفاده از تگ html در پاپ اور

در حالت عادی هر مقداری که به پاپ اور بدهیم به صورت یک متن معمولی نمایش داده میشود اگر بخواهیم از تگ های html برای پاپ اور خود استفاده کنیم باید در قسمت جیکوئری این کار را انجام دهیم . باید ابتدا متن خود را همراه با تگ های html در قسمت title یا content بنا به نیاز بنویسیم سپس دستور html را برابر با مقدار true قرار دهیم با این کار هر تگی که نوشتیم اجرا میشود و در خروجی نمایش داده میشود اگر مقدار html را false قرار دهیم کد ها اجرا نمیشوند برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<button class="btn btn-success">Click me</button>

<script>
$(document).ready(function(){
  $('.btn').popover({title: "<h1><strong>HTML</strong> inside <code>the</code> <em>popover</em></h1>", content: "Blabla <br> <h2>Cool stuff!</h2>", html: true, placement: "right"}); 
});
</script>

 

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>

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


----------------------------------------------------------------------------
<div class="container">
  <h3>Popover Example</h3>
  <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Top</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bottom</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Left</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Right</a>
</div>

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

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


----------------------------------------------------------------------------
<div class="container">
  <h3>Popover Example</h3>
  <a href="#" title="Header" data-toggle="popover" data-content="Some content">Click Me</a><br>
  <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();   
});
</script>
----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Popover Options</h3>
  <p>The <strong>animation</strong> option specifies whether to add a CSS fade transition effect when opening and closing the popover.</p>
  <div>
    <button class="btn btn-success">Click me (animation: true)</button>
    <button class="btn btn-warning">Click me (animation: false)</button>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.btn-success').popover({title: "Header", content: "Blabla", animation: true}); 
  $('.btn-warning').popover({title: "Header", content: "Blabla", animation: false}); 
});
</script>

----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Popover Options</h3>
  <p>The <strong>container</strong> option appends the popover to a specific element.</p>
  <div class="parent">
    <button class="btn btn-success">Click me</button>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.btn').popover({title: "Header", content: "Blabla", container: ".parent"}); 
});
</script>

----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Popover Options</h3>
  <p>The <strong>delay</strong> option specifies the number of milliseconds it will take to open and close the popover.</p>
  <p>This popover will take 1000 milliseconds to open and close.</p>
  <button class="btn btn-success">Click me</button><br><br>
  <p>This popover will take 500 milliseconds to open, and 100 ms to close.</p>
  <button class="btn btn-danger">Click me</button>
</div>

<script>
$(document).ready(function(){
  $('.btn-success').popover({title: "Header", content: "Blabla", delay: 1000}); 
  $('.btn-danger').popover({title: "Header", content: "Blabla", delay: {show: 500, hide: 100}}); 
});
</script>

----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Popover Options</h3>
  <p>The <strong>html</strong> option specifies whether to accept HTML tags in the popover.</p>
  <button class="btn btn-success">Click me</button>
</div>

<script>
$(document).ready(function(){
  $('.btn').popover({title: "<h1><strong>HTML</strong> inside <code>the</code> <em>popover</em></h1>", content: "Blabla <br> <h2>Cool stuff!</h2>", html: true, placement: "right"}); 
});
</script>


<br>
</body>
</html>

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

 

شما میتوانید ویدیو این آموزش را به صورت آنلاین ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه بیست و هفتم (popover): نوع فایل:mp4 حجم فایل:34.16 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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