jQuery Mobile List View

jQuery Mobile List View

Ang list view sa jQuery Mobile ay pangkaraniwang HTML list: ordered list (<ol>) at unordered list (<ul>).

Kung gusto mong gumawa ng listahan, magdagdag ng attribute na data-role="listview" sa element na <ol> o <ul>. Kung gusto mong gawing clickable ang mga item, tukuyin ang link sa bawat item na <li>:

Example

<ol data-role="listview">
  <li><a href="#">List Item</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">List Item</a></li>
</ul>

Try It Yourself

Kung gusto mong magdagdag ng rounded corners at margin sa listahan, gamitin ang attribute na data-inset="true":

Example

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

Try It Yourself

Mga payo:Ayon sa pdefault, ang mga item sa listahan ay awtomatikong magiging button (walang kailangan ng data-role="button").

List Dividers

Ang List Dividers ay ginagamit upang iorganisa at ihagis ang mga item bilang kategorya/section.

Kung gusto mong tukuyin ang mga separator ng listahan, magdagdag ng attribute na data-role="list-divider" sa element na <li>:

Example

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

Try It Yourself

Kung ang iyong listahan ay ayon sa abugado (katulad ng directory), ang jQuery Mobile ay magdadagdag ng mga magiging separator, sa pamamagitan ng pagtatakda ng attribute na data-autodividers="true" sa <ol> o <ul> element:

Example

<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>

Try It Yourself

Mga payo:Ang attribute na data-autodividers="true" ay gumagawa ng mga separator sa pamamagitan ng pagbigyan ng pangunahing titik ng teksto ng listahan na may malaki:

Search Filter

Kung gusto mong magdagdag ng kahon ng paghahanap sa listahan, gamitin ang attribute na data-filter="true":

Example

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

Try It Yourself

Ayon sa pdefault, ang teksto sa kahon ng paghahanap ay "Filter items...".

Para sa pagbabago ng default na teksto, gamitin ang data-filter-placeholder attribute:

Example

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Name">

Try It Yourself

More Examples

Read-only List
How to create a list without links (not buttons, not clickable).