জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা (jQuery Mobile Popups)
লেখাঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
জেকোয়েরি মোবাইল দিয়ে আপনার মনের মত করে একটি ওয়েব সাইটের সব কিছুই তৈরি করে সাজাতে পারবেন । আজ আমি জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা শিখাবো ।
জেকোয়েরি মোবাইল পপ-আপ(jQuery Mobile Popups):
পপ-আপ গুলো ডায়ালগ বক্সের মত একই রকম দেখতে । এই পপ-আপ আর ডায়ালগ বক্স দুটোই একটি ওয়েবপেজের অবিচ্ছেদ্য অংশ । কোনো ম্যাসেজ বা লেখা, ছবি, ম্যাপ, ফেসবুক লাইক বক্স অথবা অন্যন্য কনটেন্ট দেখানোর জন্য পপ-আপ খুবই গুরুত্বপূর্ণ ।
একটি পপ-আপ তৈরির জন্য আপনাকে <a> element এবং <div> element নিয়ে শুরু করতে হবে । <a> এলিমেন্টের সাথে data-rel="popup" এট্রিবিউট যোগ করতে হবে এবং <div> এলিমেন্টের সাথে data-role="popup" এট্রিবিউট যোগ করতে হবে । তারপর <div> এর জন্য একটি আইডি ঠিক করতে হবে । তারপর href কে <a> এর সাথে ঐ একই আইডিতে যোগ করতে হবে । তারপর <div> এর সাথের উপাদানগুলো হবে আসল কনটেন্ট । যখন ইউজার লিংকে ক্লিক করবে তখন পপ-আপ হয়ে ঐ কন্টেন্টকে দেখাবে ।
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
<div data-role="popup" id="myPopup">
<p>This is a simple popup.</p>
</div>
মনে রাখবেন, লিংকের সাথে একই ওয়েবপেজে অবশ্যই <div>কে থাকতে হবে ।
আপনি যদি অতিরিক্ত প্যাড বা মার্জিন চান তাহলে <div> এর সাথে "ui-content" ক্লাস ব্যবহার করতে হবে ।
<div data-role="popup" id="myPopup" class="ui-content">
পপ-আপ ক্লোজ(Closing Popups):
ডিফল্টভাবে পপ-আপের বাইরে ক্লিক করলে অথবা "Esc" বাটন চাপলে পপ-আপ ক্লোজ হয় । আপনি যদি এটা বন্ধ করতে চান তাহলে পপ-আপের সাথে data-dismissible="false" এট্রিবিউট যোগ করতে হবে । আপনি যদি পপ-আপের বামে অথবা ডানে পপ-আপ ক্লোজ বাটন যোগ করতে চান তাহলে আপনাকে data-rel="back" এট্রিবিউট যোগ করতে
হবে এবং সিএসএস ক্লাস দিয়ে একে পজিশন করতে হবে ।
১। Right close button
২। Left close button
৩। Undismissible Popup
পপ-আপের পজিশন করা(Positioning Popups):
ডিফল্টভাবে ক্লিক করলে তার সাথেই পপ-আপ দেখায় । একে নিজের মত করে দেখাতে ঐ লিংকের সাথে data-position-to attribute এট্রিবিউট যোগ করতে হবে । আপনি তিনভাবে এট্রিবিউট যোগ করে এটা করতে পারবেন ।
এট্রিবিউট ১ঃ data-position-to="window"
বর্ণনাঃ পপ-আপ ডিসপ্লের মাঝামাঝি ওপেন হবে ।
এট্রিবিউট ২ঃ data-position-to="#myId"
বর্ণনাঃ পপ-আপ একটি সিলেক্ট করা আইডির উপর ওপেন হবে ।
এট্রিবিউট ৩ঃ data-position-to="origin"
বর্ণনাঃ এটা ডিফল্ট । ক্লিক করা এলিমেন্টের উপর ওপেন হবে ।
উদাহরণঃ
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a>
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>
ট্রানজিশনস(Transitions):
ডিফল্টভাবে পপ-আপে কোনো ট্রানজিশন ইফেক্ট দেয়া থাকে না । আপনি আপনার নিজের মত করে আগের ট্রানজিশনে বলা যেকোনো একটা ইফেক্ট ব্যবহার করতে পারেন । শুধু data-transition="value" এট্রিবিউট এর লিংকের সাথে যোগ করে দিলেই হবে ।
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">Fade</a>
পপ-আপ অ্যারো(Popup Arrows):
পপ-আপ অ্যারো ব্যবহারের জন্য data-arrow attribute যোগ করতে হবে এবং "l" (left), "t" (top), "r" (right) অথবা "b" (bottom) এর যেকোনো একটা মান উল্লেখ করে দিতে হবে ।
<a href="#myPopup" data-rel="popup" class="ui-btn">Open Popup</a>
<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
<p>There is an arrow on my LEFT border.</p>
</div>
পপ-আপ ডায়ালগ(Popup Dialogs):
হেডার, ফুটার অথবা কন্টেন্টে আপনি পপ-আপ ডায়ালগ বা টেক্সট যোগ করতে পারবেন ।
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog Popup</a>
<div data-role="popup" id="myPopupDialog">
<div data-role="header"><h1>Header Text..</h1></div>
<div data-role="main" class="ui-content"><p>Some text..</p><a href="#">some links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div>
ছবির পপ-আপ(Popup Photos):
আপনি ইচ্ছা করলে ছবিও পপ-আপ হিসেবে যোগ করতে পারবেন ।
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg" alt="Skaret View" style="width:200px;">
<div data-role="popup" id="myPopup">
<img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">
</div>
আপনি কয়েকটি ছবি একসাথে দেখাতে পারবেন । কিন্তু ৫০০ ছবির অ্যালবাম একসাথে পপ-আপে দেখাতে পারবেন না ।
তাহলে দেখলেন তো পপ-আপ তৈরি কত সহজ । এবার ভালভাবে প্র্যাকটিস করে পপ-আপকে আরো সুন্দর করে কাস্টোমাইজ করুন ।
http://www.w3schools.com/jquerymobile/jquerymobile_popups.asp
