জেকোয়েরি মোবাইল ব্যবহার করে লিস্টের উপাদানসমূহকে নিজের মত করে সাজানো ।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
ফেসবুকঃ www.fb.com/mfir0z
কি খবর সবার? অনেকদিন পর আবার নতুন পোস্ট নিয়ে হাজির হচ্ছি । আজ আমি জেকোয়েরি মোবাইল ব্যবহার করে লিস্টের উপাদানসমূহকে নিজের মত করে সাজানো শেখাবো ।
জেকোয়েরি মোবাইলের লিস্টের আইকনকে সাজানো (jQuery Mobile List Icons)ঃ
ডিফল্টভাবে লিস্টে একটা করে ডানমূখী তীর "carat-r" এট্রিবিউট ব্যবহার করে আইকন হিসেবে থাকে । আপনি একে আপনার পছন্দমত আইকন দিয়ে সাজাতে পারবেন । তাই আপনি যে আইকনকে আপনার মত করে সাজাতে চান তাতে data-icon এট্রিবিউট ব্যবহার করতে হবে ।
<ul data-role="listview">
<li><a href="#">Default is right arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
আপনি উপরের মত করে আইকনগুলোকে সাজাতে পারবেন । আপনি যদি চান কোনো আইকন দেখাবেন না তাহলে আপনাকে data-icon="false" এট্রিবিউট ব্যবহার করতে হবে ।
16x16 Iconsঃ
আইকনের স্টান্ডার্ড সাইজ হলো 16x16px । তাই এই সাইজের আইকন ব্যবহার করার জন্য <img> এলিমেন্ট(<img> element) কে "ui-li-icon" ক্লাসের সাথে যুক্ত করতে হবে ।
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
</ul>
উদাহরণটি দেখুন তাহলেই বুঝতে পারবেন ।
জেকোয়েরি মোবাইল লিস্ট থাম্বনেইলস(jQuery Mobile List Thumbnails)ঃ
কোনো আইকনের ইমেজ সাইজ যদি 16x16px এর বেশি হয় তাহলে তো সমস্যা দেখা দিবে আর অসুন্দর দেখাবে । তাই <img> এলিমেন্টকে লিস্টের প্রথম চাইল্ড এলিমেন্ট(first child element) এর সাথে বসাতে হবে । এর সাথে কোনো ক্লাস নেম ব্যবহার করা লাগবে না । তাহলে দেখবেন যে ইমেজগুলো স্বয়ংক্রিয়ভাবে 80x80px সাইজের হয়ে যাবে । নিচের উদাহরণটি দেখুন তাহলেই বুঝবেন ।
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
আপনি স্টান্ডার্ড এইচটিএমএল(standard HTML) ব্যবহার করে লিস্টে তথ্য যুক্ত করতে পারেন । নিচের মত করে আপনি যুক্ত করতে পারেন ।
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
স্পিলিট বাটনস(Split Buttons)ঃ
আপনি যদি লম্বালম্বি ডিভাইডার বার(vertical divider bar) ব্যবহার করে স্পিলিট লিস্ট(split list) তৈরি করতে চান তাহলে লিংক দুটোকে <li> element এর সাথে ব্যবহার করতে হবে । জেকোয়েরি মোবাইল দ্বিতীয় লিংককে ডান সাইডে একটি ডানমূখী তীরের সাহায্যে বসাবে । এবং ব্যবহারকারীরা যখন ঐ আইকনে মাউস পয়েন্টার রাখবে তখন টেক্সটের সাথে যদি কোনো লিংক থাকে তাহলে সেটা দেখাবে ।
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
এটাকে আরো বেশি ফাংশন সমৃদ্ধ করতে কিছু পেজ এবং ডায়লগ বক্স কিভাবে যোগ করতে হবে তা দেখি ।
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
কাউন্ট বাবল(Count Bubble) এর ব্যবহারঃ
আমাদের যখন মেইলবক্সে কোনো মেইল আসে তখন একটা বাবলে কয়টি নতুন ম্যাসেজ এসেছে তার সংখ্যা উল্লেখ করে দেখায় । আপনিও ইচ্ছা করলে আপনার লিস্টে এমন দেখাতে পারবেন জেকোয়েরি ব্যবহার করে । এজন্য আপনাকে ইনলাইন এলিমেন্ট(inline element) যেমন <span> কে "ui-li-count" ক্লাসের সাথে ব্যবহার করে একটি সংখ্যা উল্লেখ করে দিতে হবে ।
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>
উপরের মত করে ব্যবহার করুন তাহলে বুঝতে সুবিধা হবে । আর হ্যা, যদি কাউন্ট বাবলে সঠিক কাউন্ট দেখাতে চান তাহলে একে আরো প্রোগ্রাম দ্বারা আপডেট করতে হবে । তার জন্য আপনাকে আরো অনেক কিছু শিখতে হবে । চিন্তা নেই, আজ এটুকু শিখতে থাকুন পরের পোস্টে আমি এটা নিয়ে হাজির হয়ে যাবো ।
