বুটস্ট্রাপ জেএস পপওভার রেফারেন্স - bootstrap JS Popover Reference
বুটস্ট্রাপ JS পপওভার (popover.js)
পপওভার প্লাগ-ইনটি টুলটিপসের মত; এটা একটি পপ-আপ বক্সের মত যখন ব্যবহারকারী একটি উপাদানের উপর ক্লিক করে তখন তা দেখা যায় । পার্থক্য এই যে, পপওভারের আরো অনেক বিষয়বস্তু থাকতে পারে ।
প্লাগ-ইন নির্ভরতা: পপওভারেরর জন্য অবশ্যই আপনার বুটস্ট্রাপের ভার্সনে অবশ্যই টুলটিপ প্লাগ-ইন (tooltip.js) অন্তর্ভূক্ত করতে হবে।
পপওভার সর্ম্পকিত টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ পপওভার টিউটোরিয়াল পড়ুন।
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
data-toggle="popover" এর দ্বারা পপওভার সক্রিয় করা হয় ।
title এট্রিবিউট দ্বারা পপওভারের হেডার টেক্সটকে নির্দিষ্ট করা হয় ।
data-content এট্রিবিউট দ্বারা পপওভারের বডির ভিতর যে টেক্সট প্রদর্শন করা হয় তা উল্লেখ করে ।
উদাহরণ
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">টোগল পপওভার</a>
পপওভার টিউটোরিয়াল »
বুটস্ট্রাপ জাচাস্ক্রিপ্ট মাধ্যম
পপওভার সিএসএস নয় - শুধুমাত্র প্লাগিন , তাই নির্দিষ্ট এলিমেন্ট নির্বাচন এবং
popover() মেথড কল করে জেকুয়েরির মাধ্যমে সক্রিয় করা আবশ্যক।
উদাহরণ
// একটি ডকুমেন্টের সকল পপওভার সক্রিয় করার জন্য এই কোড ব্যবহার করুন।
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
পপওভার টিউটোরিয়াল »
বুটস্ট্রাপ পপওভার অপশন
অপশন data এট্রবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। data এট্রিবিউটের জন্য, ডেটা প্লেসমেন্ট হিসেবে data-* এর সাথে অপশনের নাম সংযুক্ত করতে হবে । যেমন="data-interval"
| নাম | ধরন | ডিফল্ট | বর্ণনা | চেষ্টা করি |
|---|---|---|---|---|
| animation | boolean | true |
যখন পপওভার বন্ধ এবং খোলা হয় তখন সিএসএস ফেড ট্রানজিশন এফেক্ট যোগ করা হবে কি হবে না তা নির্দিষ্ট করে।
|
পপওভার টিউটোরিয়াল |
| container | string, or the boolean false | false | একটি নির্দিষ্ট এলিমেন্টে পপওভার সংযোজন করে। উদাহরণ : container: 'body' |
পপওভার টিউটোরিয়াল |
| content | string | "" | পপওভারের বডির মধ্যে টেক্সট নির্দিষ্ট করে। | পপওভার টিউটোরিয়াল |
| delay | number, or object | 0 | পপওভারটি বন্ধ হতে এবং খুলতে কত মিলিসেকেন্ড লাগে তার সংখ্যা উল্লেখ করা হয়। খোলার জন্য কতোটুকু delay হবে এবং বন্ধ করার জন্য অন্য আরেকটি নির্দিষ্ট করতে অবজেক্ট স্ট্রাকচারে ব্যবহার করা হয়: delay: {show: 500, hide: 100} - পপওভার ওপেন করতে ৫০০ মিলিসেকেন্ড লাগে, কিন্তু বন্ধ করতে মাত্র ১০০ মিলিসেকেন্ড লাগে |
পপওভার টিউটোরিয়াল |
| html | boolean | false | পপওভারে এইচটিএমএল ট্যাগ গ্রহণযোগ্য হবে কি হবে না তা নির্দিষ্ট করে :
যখন false (এটা ডিফল্ট) সেট করা হয়, তখন জেকুয়েরির text() মেথডটি ব্যবহার করতে হবে । যদি আপনি XSS attack নিয়ে উদ্বিগ্ন থাকেন তাহলে এটা ব্যবহার করুন। |
পপওভার টিউটোরিয়াল |
| placement | string | "right" | পপওভারের অবস্থান নির্দিষ্ট করে। সম্ভাব্য ভ্যালু গুলো হল:
|
পপওভার টিউটোরিয়াল |
| selector | string, or the boolean false | false | একটি নির্দিষ্ট সিলেক্টরে পপওভার যুক্ত করে। | পপওভার টিউটোরিয়াল |
| template | string | যখন পপওভার তৈরি করা হয় তখন base এইচটিএমএল ব্যবহার করতে হবে। যে পপওভারের ক্লাস .popover-title তার সাথে পপওভারের টাইটেল সংযুক্ত হবে। যে পপওভারের ক্লাস .popover-content তার সাথে পপওভারের কন্টেন্ট সংযুক্ত হবে। .arrow টি popover এর এরো হয়ে যাবে । সর্বোচ্চ এলিমেন্টটিতে অবশ্যই .popover ক্লাস থাকতে হবে। |
||
| title | string | "" | পপওভারের হেডার টেক্সট কে নির্দিষ্ট করে। | পপওভার টিউটোরিয়াল |
| trigger | string | "click" | কিভাবে পপওভারকে ট্রিগার করা হবে তা নির্দিষ্ট করা হয়। সম্ভাব্য ভ্যালু গুলো হল:
|
পপওভার টিউটোরিয়াল |
| viewport | string, or object | {selector: "body", padding: 0} | এই এলিমেন্টের ভিতরে popover কে রাখবে । উদাহরণ : viewport: '#viewport' or {selector: '#viewport', padding: 0} |
বুটস্ট্রাপ পপওভার মেথড
পপ\ মেথড গুলো নিম্নোক্ত টেবিল দেওয়া হল
| মেথড | বর্ণনা | পপওভার টিউটোরিয়াল |
|---|---|---|
| .popover(options) | অপশন দ্বারা পপওভারকে সক্রিয় করা হয়। বৈধ ভ্যালুর জন্য উপরের অপশন গুলো দেখুন | পপওভার টিউটোরিয়াল |
| .popover("show") | পপওভার টিকে প্রদর্শন করে | পপওভার টিউটোরিয়াল |
| .popover("hide") | পপওভার টিকে হাইড করে | পপওভার টিউটোরিয়াল |
| .popover("toggle") | পপওভার টিকে এক বার প্রদর্শন আবার হাইড করে (Toggle) | পপওভার টিউটোরিয়াল |
| .popover("destroy") | পপওভার টিকে হাইড এবং ডিলেট করে দেয় | পপওভার টিউটোরিয়াল |
বুটস্ট্রাপ পপওভার ইভেন্ট
পপওভারে ইভেন্ট গুলো নিম্নোক্ত টেবিল দেওয়া হল।
| ইভেন্ট | বর্ণনা | পপওভার টিউটোরিয়াল |
|---|---|---|
| show.bs.popover | যখন ট্যাব প্রদর্শন করা হয় তখন ঘটে | পপওভার টিউটোরিয়াল |
| shown.bs.popover | যখন ট্যাবটি সম্পূর্ন প্রদর্শিত হয় তখন এই ইভেন্টটি ঘটে ( সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর) | পপওভার টিউটোরিয়াল |
| hide.bs.popover | যখন ট্যাব হাইড করা করা হয় তখন ঘটে | পপওভার টিউটোরিয়াল |
| hidden.bs.popover | যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর) | পপওভার টিউটোরিয়াল |
উদাহরণ
কাস্টম পপওভার ডিজাইন
পপওভারে ইচ্ছেমত ডিজাইন করতে সিএসএস ব্যবহার করুন:
উদাহরণ
/* পপওভার */
.popover {
border: 2px dotted
red;
}
/* পপওভার হেডার */
.popover-title {
background-color:
#73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* পপওভার বডি */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* পপওভার এ্যারো */
.arrow {
border-right-color: red !important;
}
পপওভার টিউটোরিয়াল »