জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস (jQuery Mobile List Views)
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার।)
জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস:
জেক্যুয়েরিতে মোবাইল লিস্ট ভিউস এইচটিএমএল এর আদর্শ লিস্টস্: অর্ডার্ড (<ol>) এবং আনঅডার্ড (<ul>).
একটি লিস্ট তৈরি করার জন্য, ="listview" ডাটা-রোলটি <ol> অথবা <ul> এলিমেন্ট এ প্রয়োগ করতে হবে।আইটেমকে ট্যাপাবল (tappable) করার জন্য লিস্ট আইটেম (<li>) এর মধ্যে লিংক স্পেসিফাই করুন:
উদাহরণ:
<ol data-role="listview">
<li><a href="#">List Item</a></li>
</ol>
<ul data-role="listview">
<li><a href="#">List Item</a></li>
</ul>
লিস্টকে বৃত্তাকার কোণ এবং কিছু মার্জিন এর মাধ্যমে স্টাইল করার জন্য "true" এট্ট্রিবিউট ডাটা-ইনসার্ট (data-insert) হিসেবে ব্যবহার করুন:
উদাহরণ:
<ul data-role="listview" data-inset="true">
# ডিফল্টরূপে, একটি লিস্ট আইটেম এর ভিতরে লিংক স্বয়ংক্রিয়ভাবে একটি বাটন এ পরিণত হয় (ui-class="btn" or data-role="button" এগুলোর কোন প্রয়োজন নেই)।
লিস্ট ডিভাইডার (List Dividers
)
লিস্ট ডিভাইডার ব্যবহার করা হয় বিভাগ (categories) /সেকশনস কে সংগঠিত করা এবং গ্রুপ আইটেমস করার জন্য।
একটি লিস্ট ডিভাইডার কে নির্দেশ (specify) করার জন্য data-role="list-divider" এট্রিবিউট একটি <li> এলিমেন্ট এ অন্তভূক্ত করতে হবে:
উদাহরণ:
<ul data-role="listview">
<li data-role="list-divider">Europe</li>
<li><a href="#">Norway</a></li>
<li><a href="#">Germany</a></li>
</ul>
আপনার যদি একটি বর্ণানুক্রমে তালিকা থাকে, (যেমন একটি ফোন বুক)<ol> অথবা <ul> এলিমেন্ট এ data-autodividers="true" এট্রিবিউট jQuery মোবাইল স্বয়ংক্রিয়ভাবে সঠিক ডিভাইডার যোগ করে:
উদাহরণ:
<ul data-role="listview" data-autodividers="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>
data-autodividers="true" অ্যাট্রিবিউট আইটেম এর টেক্সট এ প্রথম অক্ষর বড় হাতের অক্ষর দিয়ে বিভক্ত সৃষ্টি করে.
আরো উদাহরণ
Read-only lists
লিঙ্ক ছাড়া তালিকা তৈরি করুন (বাটন হবে না এবং ট্যাপাবল হবে না).
Panels
কিভাবে আপনার লিস্ট আইটেম এ প্যানেল সন্নিবেশ করবেন.
