jQuery Mobile লিস্ট ভিউ

jQuery Mobile লিস্ট ভিউ

jQuery Mobile-এর তালিকা দৃশ্য, প্রতিষ্ঠানীয় HTML তালিকা: ক্রমিক তালিকা (<ol>) এবং অসূচক তালিকা (<ul>)

যদি আপনি তালিকা তৈরি করতে চান, <ol> অথবা <ul> এলিমেন্টের উপর data-role="listview" এটি যোগ করুন. যদি আপনি এই আইটেমগুলিকে ক্লিকযোগ্য করতে চান, প্রত্যেক তালিকার আইটেম (<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>

আপনার হাতে পরীক্ষা করুন

যদি আপনি তালিকায় আর্কি এবং মার্জিন যোগ করতে চান, data-inset="true" এটি ব্যবহার করুন:

ইনস্ট্যান্স

<ul data-role="listview" data-inset="true">

আপনার হাতে পরীক্ষা করুন

সুঝানা:ডিফল্টভাবে, তালিকার আইটেমগুলি স্বয়ংক্রিয়ভাবে বাটন (data-role="button" ছাড়াই) হিসাবে রূপান্তরিত হয়

তালিকার হিডার

তালিকার হিডার (List Dividers) এটি আইটেমকে ক্যাটাগরি/সেকশন হিসাবে গঠন এবং সংযুক্ত করে。

যদি আপনি তালিকার হিডার নির্দিষ্ট করতে চান, <li> এলিমেন্টের উপর data-role="list-divider" এটি যোগ করুন:

ইনস্ট্যান্স

<ul data-role="listview">
 <li data-role="list-divider">Europe</li>
  <li><a href="#">France</a></li>
  <li><a href="#">Germany</a></li>
</ul>

আপনার হাতে পরীক্ষা করুন

আপনার তালিকা অক্ষর ক্রমে (যেমন, যোগাযোগ জাতীয়তা) তৈরি হলে, jQuery Mobile স্বয়ংক্রিয়ভাবে উপযুক্ত হিডার যোগ করে, <ol> অথবা <ul> এলিমেন্টের উপর data-autodividers="true" এটি সেট করে:

ইনস্ট্যান্স

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

আপনার হাতে পরীক্ষা করুন

সুঝানা:data-autodividers="true" এটি তালিকার আইটেমের প্রথম অক্ষরকে বড় করে হিডার তৈরি করে。

সার্চ ফিল্টার

আপনি তালিকায় সার্চ বক্স যোগ করতে, data-filter="true" এটি ব্যবহার করুন:

ইনস্ট্যান্স

<ul data-role="listview" data-filter="true"</ul>

আপনার হাতে পরীক্ষা করুন

ডিফল্টভাবে, সার্চ বক্সের টেক্সট "Filter items..." হয়েছে。

ডিফল্ট টেক্সট সংশোধন করতে, data-filter-placeholder এট্রিবিউট ব্যবহার করুন:

ইনস্ট্যান্স

<ul data-role="listview" data-filter="true" data-filter-placeholder="রক্ষিত নাম সংরক্ষণ করুন">

আপনার হাতে পরীক্ষা করুন

আরও ইনস্ট্যান্স

রক্ষিত লিস্ট
যদি লিঙ্কযুক্ত না হওয়া লিস্ট তৈরি করতে হয়, (বাটন নয়, ক্লিক করা যায় না) তবে: