در خدمت دوستان عزیز هستیم با آموزش کار با پلاگین Popover بوت استرپ. این پلاگین شبیه به Tooltip می باشد بدین صورت که زمانی که کاربر بر روی عنصری کلیک کرد Popover نمایش داده می شود با این تفاوت که پلاگین Popover می تواند شامل محتوای بسیار بیشتری باشد.
آموزش کار با پلاگین Popover بوت استرپ
پلاگین popover
پلاگین Popover : به تولتیپ شباهت دارد . یک جعبه پاپ آپ است که که به هنگام کلیک کردن کاربر بر روی عنصر نمایش داده میشود . با این تفاوت که پاپ اُور میتواند محتوی بیشتری را شامل شود.
نکته : پلاگین ها را میتوان به صورت جداگانه(توسط فایل بوت استرپ جداگانه “popover.js”) و یا به صورت یک جا ( توسط “bootstrap.js” یا “bootstrap.min.js” ) اضافه کرد.
نحوه ساخت Popover
برای ایجاد یک پاپ اُور خاصیت data-toggle=”popover” را به یک عنصر اضافه نمایید. از خاصیت Title برای مشخص کردن متن سرفصل پاپ اُور ، و از خاصیت data-content برای مشخص کردن متنی که درون پاپ اور نمایش داده میشود استفاده کنید.
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
نکته : پاپ اور ها باید با jQuery اغاز شوند . عنصر مخصوص را انتخاب کرده و متد popover() را فراخوانی کنید.
کد زیر تمام پاپ اور های درون یک سند-داکیومنت را فعال میکند :
<script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>
موقعیت یابی popover
به صورت پیش فرض پاپ اُور در سمت راست عنصر نمایش داده میشود. از خاصیت data-placement برای تنظیم موقعیت پاپ اور در بالا، پایین ، چپ و راست عنصر استفاده کنید :
<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>
نکته : همچنین میتوانید از خاصیت data-placement یا مقدار “auto” استفاده کنید که در این صورت مرورگر شما خودش موقیعت پاپ اور را تنظیم میکند .
برای مثال اگر مقدار “auto left” باشد پاپ اور در صورت امکان در سمت چپ نمایش داده خواهد شد و در غیر این صورت در سمت چپ نشان داده میشود .
بستن Popover ها
به صورت پیش فرض،وقتی دوباره بر روی عنصر کلیک کنید پاپ اُور بسته خواهد شد. با این وجود،میتوانید با استفاده از خاصیت 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>
نکته : اگر میخواهید که به هنگام حرکت دادن موس بر روی عنصر پاپ اور نشان داده شود ، از خاصیت data-trigger استفاده نمایید.
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
منبع کامل پاپ اور بوت استرپ
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۷ آبان ۱۳۹۵
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس