HTML5 magnitude framework jQuery Mobile List-7.8

<! -- 1. Common link list -->
<Ul data-role = "listview" data-theme = "g">
<Li> <a href = "#"> List 1 </a> </li>
<Li> <a href = "#"> List 2 </a> </li>
<Li> <a href = "#"> List 3 </a> </li>
<Li> <a href = "#"> List 4 </a> </li>
<Li> <a href = "#"> List 5 </a> </li>

</Ul>

 
 

<! -- 2. Multi-level nested list -->
<Ul data-role = "listview" data-theme = "g">
<Li>
<A href = "#"> List 1 </a>
<P> This is the first layer </p>
<Ul data-role = "listview" data-theme = "g">
<Li> <a href = "#"> List 1 1 </a> </li>
<Li> <a href = "#"> List 1 2 </a> </li>
<Li> <a href = "#"> List 1 3 </a> </li>
<Li> <a href = "#"> List 1 4 </a> </li>
<Li> <a href = "#"> List 1 5 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> List 2 </a> </li>
<Li> <a href = "#"> List 3 </a> </li>
<Li> <a href = "#"> List 4 </a> </li>
<Li> <a href = "#"> List 5 </a> </li>

</Ul>

 

 

<! -- 3. Ordered serial number list -->
<Ol data-role = "listview" data-theme = "g">
<Li> <a href = "#"> List 1 </a> </li>
<Li> <a href = "#"> List 2 </a> </li>
<Li> <a href = "#"> List 3 </a> </li>
<Li> <a href = "#"> List 4 </a> </li>
<Li> <a href = "#"> List 5 </a> </li>

</Ol>

 

<! -- 4. Read-only mode list -->
<Ul data-role = "listview" data-inset = "true">
<Li> <a href = "#"> List 1 </a> </li>
<Li> <a href = "#"> List 2 </a> </li>
<Li> <a href = "#"> List 3 </a> </li>
<Li> <a href = "#"> List 4 </a> </li>
<Li> <a href = "#"> List 5 </a> </li>

</Ul>

 
 

<! -- 5. List of split buttons -->
<Ul data-role = "listview" data-theme = "g" data-split-icon = "gear" data-split-theme = "d">
<Li> <a href = "#"> List 1 </a> </li>
<Li> <a href = "#"> List 2 </a> </li>
<Li> <a href = "#"> List 3 </a> </li>
<Li> <a href = "#"> List 4 </a> </li>
<Li> <a href = "#"> List 5 </a> </li>

</Ul>

 

 
 

 

<! -- 6. List Separator -->
<Ul data-role = "listview" data-inset = "true">
<Li data-role = "list-divider"> A </li>
<Li> <a href = "#"> List 1-1 </a> </li>
<Li> <a href = "#"> List 1-2 </a> </li>
<Li data-role = "list-divider"> B </li>
<Li> <a href = "#"> List 2-1 </a> </li>
<Li> <a href = "#"> List 2-2 </a> </li>
<Li data-role = "list-divider"> C </li>
<Li> <a href = "#"> List 3-5 </a> </li>
<Li> <a href = "#"> List 3-5 </a> </li>

</Ul>

 
 

<! -- 7. List Search filter -->
<Ul data-role = "listview" data-theme = "g" data-filter = "true">
<Li> <a href = "#"> aaaa </a> </li>
<Li> <a href = "#"> abb </a> </li>
<Li> <a href = "#"> bb </a> </li>
<Li> <a href = "#"> bc </a> </li>
<Li> <a href = "#"> cc </a> </li>

</Ul>

 
 

<! -- 8. Bubble count list -->
<Ul data-role = "listview" data-theme = "g">
<Li>
<A href = "#"> aaa </a>
<Span class = "ui-li-count"> 33 </span>
</Li>
<Li>
<A href = "#"> bbb </a>
<Span class = "ui-li-count"> 2 </span>
</Li>
<Li>
<A href = "#"> ccc </a>
<Span class = "ui-li-count"> 12 </span>
</Li>
<Li>
<A href = "#"> dddd </a>
<Span class = "ui-li-count"> 54 </span>
</Li>

</Ul>

 
 

<! -- 9. display the text list on the right of the list item -->
<Ul data-role = "listview" data-theme = "g">
<Li>
<A href = "#"> aaa </a>
<Span class = "ui-li-aside"> endure </span>
</Li>
<Li>
<A href = "#"> bbb </a>
<Span class = "ui-li-aside"> version </span>
</Li>
<Li>
<A href = "#"> ccc </a>
<Span class = "ui-li-aside"> er </span>
</Li>
<Li>
<A href = "#"> dddd </a>
<Span class = "ui-li-aside"> request </span>
</Li>

</Ul>

 
 

<! -- 10. The list item contains the image list -->
<Ul data-role = "listview" data-theme = "g">
<Li>

<A href = "#"> aaa </a>
<Span class = "ui-li-count"> 33 </span>
</Li>
<Li>

<A href = "#"> bbb </a>
<Span class = "ui-li-count"> 2 </span>
</Li>
<Li>

<A href = "#"> ccc </a>
<Span class = "ui-li-count"> 12 </span>
</Li>
<Li>

<A href = "#"> dddd </a>
<Span class = "ui-li-count"> 54 </span>
</Li>

</Ul>

 
 

<! -- 11. list items and image list -->
<Ul data-role = "listview" data-theme = "g">
<Li>

<A href = "#"> aaa </a>
<Span class = "ui-li-count"> 33 </span>
</Li>
<Li>

<A href = "#"> bbb </a>
<Span class = "ui-li-count"> 2 </span>
</Li>
<Li>

<A href = "#"> ccc </a>
<Span class = "ui-li-count"> 12 </span>
</Li>
<Li>

<A href = "#"> dddd </a>
<Span class = "ui-li-count"> 54 </span>
</Li>

</Ul>

 
 

<! -- 12. Embedded list -->
<Ul data-role = "listview" data-theme = "g" data-inset = "true">
<Li> <a href = "#"> List 1 </a> <span class = "ui-li-count"> 54 </span> </li>
<Li> <a href = "#"> List 2 </a> <span class = "ui-li-count"> 54 </span> </li>
</Ul>
<Ol data-role = "listview" data-theme = "g" data-inset = "true">
<Li> <a href = "#"> List 1 </a> </li>
<Li> <a href = "#"> List 2 </a> </li>
<Li> <a href = "#"> List 3 </a> </li>
</Ol>
<Ul data-role = "listview" data-theme = "g" data-inset = "true">
<Li> <a href = "#"> List 1 </a> </li>
<Li> <a href = "#"> List 2 </a> </li>
<Li> <a href = "#"> List 3 </a> </li>

</Ul>