jQuery Mobile Panels
parijat biswas
student of CSE
university of Asia Pacific
jQuery Mobile Panels
jQuery Mobile panel বাম অথবা ডান দিক থেকে অতিরিক্ত content এর সাথে slide out হবে।
panel টি open করতে নিচের বাটন টি click করুন।
OPEN PANEL
একটি panel তৈরি করতে data-role="panel" যোগ করুন <div> element এ ,এবং একটি id নির্ধারণ করুন।
এই <div> element এর ভিতরে যেকোনো html markup বসান, যা আপনি আপনার panel এ display করতে চান।
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
বি.দ্র. : panel markup অবশ্যই header,content এবং jQuery mobile page এবং footer inside এর পূর্বে বা পরে বসবে।
Panel এ প্রবেশ করতে একটি link তৈরি করুন যা panel id <div> কে প্রকাশ করে। যখন ব্যবহারকারী link এ click করবে, তখন panel টি open হবে।
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
নিচে একটি সাধারন উদাহরণ দেওয়া হলঃ
উদাহরণ
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
</div>
<div data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
* নিজে চেষ্টা করে দেখুন।
Closing Panels ( Panel বন্ধ করা )
আপনি panel এর বাইরে click করে বা esc বাটন চেপে panel বন্ধ করতে পারেন।
<div> প্যানেল এ additional data-* যোগ করে আপনি clicking এবং swiping ফিচার disable করতে পারেনঃ
Attribute value description(ব্যাখ্যা)
data-dismissible true | false বাইরে click করলে panel close হবে নাকি হবে না, তা নির্ধারণ করে ।
data-swipe-close true | false swiping করলে panel close হবে নাকি হবে না , তা নির্ধারণ করে ।
আপনি একটি বাটন ব্যবহার করেও panel close করতে পারেনঃ শুধুমাত্র <div> panel এর ভিতরে data-rel="close" এর সাথে একটি link যুক্ত করুন । আপনি href attribute দিয়েও page id point করতে পারবেন যখন ব্যবহারকারী panel close করবে।
উদাহরনঃ
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div>
* নিজে চেষ্টা করে দেখুন।
Panel Display
আপনি panel এর display mode control করতে পারেন data-display attribute দিয়েঃ
Attribute value ব্যাখ্যা
data-display="overlay" প্রদত্ত প্যানেল প্রদর্শন করে
data-display="push" প্যানেল এবং পাতা একই সময়ে animate করে
data-display="reveal" ডিফল্ট। পেজের নিচে panel থাকবে এবং প্রকাশ করবে যেহেতু page slide হবে।
উদাহরনঃ
<div data-role="panel" id="overlayPanel" data-display="overlay">
<div data-role="panel" id="revealPanel" data-display="reveal">
<div data-role="panel" id="pushPanel" data-display="push">
* নিজে চেষ্টা করে দেখুন।
Positioning Panels ( প্যানেল এর পজিশনিং)
স্বয়ংক্রিয়ভাবে panel পেজের বাম পাশে থাকবে । পেজের ডান পাশে panel নিতে data-position="right" attribute টি ব্যবহার করতে হবে ।
উদাহরনঃ
<div data-role="panel" id="myPanel" data-position="right">
* নিজে চেষ্টা করে দেখুন।
তাছাড়া যখন page scroll করা শুরু হয় page content কোথাই / কিভাবে বসাবেন তা আপনি নির্ধারণ করতে পারবেন। স্বয়ংক্রিয়ভাবে, panel পেজ scroll করতে শুরু করবে( কিন্তু panel content পেজের একদম উপরে থাকবে ) যদি আপনি সবসময়ই panel content প্রদর্শন করতে চান তাহলে data-position-fixed="true" attribute টি panel এ ব্যবহার করুন ।
উদাহরনঃ
<div data-role="panel" id="myPanel" data-position-fixed="true">
* নিজে চেষ্টা করে দেখুন।
