نمادها

مطالب پربازدید

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

» آموزش طراحی وب » آموزش Bootstrap » آموزش Bootstrap جلسه سی و دوم (Popover)

آموزش Bootstrap جلسه سی و دوم (Popover)

  • دسته بندی :آموزش Bootstrap,آموزش طراحی وب
    • آموزش Bootstrap جلسه سی و دوم (Popover)

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

    آموزش Bootstrap جلسه سی و دوم (Popover) از سری آموزش های تک قسمتی است

    سلام برنامه در جلسه قبلی درباره ساخت تولتیپ بحث کرد در این جلسه موردی پیشرفته تر یاد می گیرید

    popover نحوه کارش مشابه تولتیپ است اما با این تفاوت که ظاهری زیبا تر و امکاناتی بیشتر دارد

    به عنوان مثال شما در پاپ اور می توانید header و footer طراحی کنید.

    همچنین می توانید رنگ ظاهر نمایشی را تغییر دهید و علاوه بر متن موارد دیگر را نیز اضافه کنید

    می توانید تعیین کنید که با کلیک موس نمایش داده شود یا با hover کردن موس و …

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

     

    پاپ اور (popover)

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

    برای اجرا شدن popover ابتا باید فایل popover.js و یا bootstrap.js اجرا شود توجه داشته باشید که اجرا کردن یکی از ۲ فایل کافیست و هر دو آنها نباید با هم اجرا شود.

    همانطور که گفتیم روش اجرای پاپ اور به صورت toggle است پس برای ساخت آن ابتدا به attribute نیاز داریم به اسم data-toggle که به خود مقدار popover بگیرد. سپس به attribute به نام data-content داریم که در آن متن داخل popover قرار میگیرد. همچنین میتوان از مقدار title برای ایجاد تیتر در پاپ اور استفاده کرد.

    علاوه بر موارد گفته شده برای اجرای popover نیاز به  کد جیکوئری داریم که بتواند آن را نمایش دهد لذا از کد جیکوئری زیر برای این کار استفاده میکنیم:

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

    برای واضح تر شدن موارد گفته شده میتوانید از کد کامل زیر استفاده کنید که برای شما یک popover کامل را میسازد و تمام مواردی که تا الان گفتیم در آن موجود است:

    <!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/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</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>

</body>
</html>

     

    موقعیت باز شدن popover

    اگر خاطرتان باشد زمانی که tooltip را آموزش دادیم گفتیم که میتوانیم این تولتیپ ها را در هر جهتی بنا به نیاز خود باز کنیم و نمایش دهیم این مورد برای پاپ اور نیز صدق میکند و شما میتوانید آن را در هر جهتی باز کنید. با اضافه کردن attribute با مقدار data-placement که مقادیر top و right و left و top میگیرد میتوانید این کار را انجام دهید. برای مشخص شدن موضوع از کد زیر کمک بگیرید:

    <!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/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

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

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

</body>
</html>

    همچنین شما میتوانید از مقدار auto در کنار ۴ جهت استفاده کنید که باعث میشود تشخیص باز شدن با خود مرورگر و المان های داخل صفحه باشد.

    بستن popover

    همانطور که گفتیم پاپ اور به صورت toggle عمل میکند یعنی همانطور که روی آن کلیک میکنیم برای باز شدن به همان صورت هم باید کلیک کنیم برای بسته شدن اما میشود این حالت پیش فرض را تغییر داد چرا که این برای کاربر و ux سایت زیاد جالب نیست و از حوصله کاربر خارج است مخصوصا اینکه در حالت پیش فرض بعد از باز شدن پاپ اور تا لحظه نبستن آن popover باز میماند و این کاربر را دچار مشکل میکند ما میتوانید کاری کنیم تا کاربر با کلیک روی هر کجای صفحه پاپ اور را ببندد.

    برای این کار نیاز به attribute با مقدار data-trigger که باید برابر با focus باشد داریم.
    برای واضح شدن موضع از کد زیر کمک بگیرید:

    <!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/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

    و در نهایت میتوان پاپ اور را مشابه تولتیپ کرد.

    جای اینکه پاپ اور با کیک عمل کند میتوان کاری کرد که با رفتن موس روی آن باز و رفتن موس از روی آن بسته شود.
    برای اینکار کافیست data-trigger را برابر با hover بگذارید مشابه کد زیر:

    <!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/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

     

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

    آموزش Bootstrap جلسه سی و یکم (Tooltip)

    آموزش Bootstrap جلسه سی و سوم (Scrollspy)

     

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

     

    و یا آن را در آپارات ببینید

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

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

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


    • تاریخ ارسال
      2019/6/01
    • ارسال شده توسط
      amir
    • دیدگاه ها
      بدون دیدگاه
    • حجم دوره
      17.76 mb

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

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

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

    بیشتر مشاهده کنید

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

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

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