Jquerymobile list components and panel components

1. List components

Data-count-theme Counttheme Specify the display style of the digital bubble

Data-divider-theme dividertheme Specifies the display style of the split line

Data-filter Filter If True the list component provides filters

N/A Filtercallback filter list item callback function

Data-filter-placeholdr filterplaceholder Filter Placeholder content

Data-filter-theme filtertheme Filter Search bar display style

Data-header-theme Headertheme Nested caption Display style

Data-icon

Data-inset inset If true list component inline style display list

Data-split-icon spliticon Column list specify icon

Data-split-theme splittheme Columns list display style

　　

Generate inline List　　

<div id= "Container" style= "padding:20px" >
　　　　<ul data-role= "ListView" data-inset= "true" >
<li><a href= "#bj" > Beijing </a></li>
<li><a href= "#cd" > Chengdu </a></li>
<li><a href= "#sh" > Shanghai </a></li>
</ul>
</div>

　　List of columns　

In an Li containing two links, jquerymobile default to the right of the link is an icon with arrows, you can give UL use Data-split-icon to specify the custom icon　　

<div id= "Container" style= "padding:20px" >
<ul data-role= "ListView" data-inset= "true" >
<li><a href= "#basket" class= "buy" id= "Rose" >Roses</a>
<a href= "#roses" >Roses</a></li>

<li><a href= "#basket" class= "buy" id= "Orchid" >Orchids</a>
<a href= "#orchids" >Orchids</a> </li>
<li><a href= "#basket" class= "buy" id= "Astor" >Astors</a>
<a href= "#astors" >Astors</a> </li>
</ul>
</div>

Filter List　　

　　Data-filter= "True" adds a search box above the list to start the search function only after entering more than two letters

<ul data-role= "ListView" data-inset= "true" data-filter= "true">

<li><a href= "#basket" >Roses</a></li>

<li><a href= "#basket" >Orchids</a></li>

<li><a href= "#basket" >Astors</a></li>
</ul>

Custom Filter List

<script>
$ (document). Bind ("Pageinit", function () {
$ ("UI"). ListView ("Option", "Filtercallback", function (listitem,filter) {//listitem: List item text, filter: User input text
var pattern=new RegExp ("^" +filter, "I"); Matches the starting part of a list item, not case-sensitive
Return!pattern.test (ListItem);
});
});
</script>

Add delimited

You can add a separator by setting the data-role= "List-divider" of the element. and add Data-divider-theme= "a" to the UL to make a distinction　

<div id= "Container" style= "padding:20px" >
<ul data-role= "ListView" data-inset= "true" data-theme= "C">
<li data-role= "List-divider">A</li>
<li><a href= "" >aaaa</a></li>
<li data-role= "List-divider" >B</li>
<li><a href= "" >bbbb</a></li>
<li data-role= "List-divider" >C</li>
<li><a href= "" >cccc</a></li>
</ul>
</div>

Convention-based format (counting bubbles)

Adding an additional descendant element to the LI element creates a count bubble, which must have content and have the Ul-li-count attribute

　　<ul data-role= "ListView" data-inset= "true" Data-theme= "C" data-filter= "true">
<li><a href= "" >

　　　　　　　　 //Accent Text

<p> Unread Messages Accumulated </p>

<div class= "Ui-li-count">25</div>//Bubbles

</a></li>

　　　　　　<li><div class= "Ui-li-count" >8</div><a href= "" > Mail </a></li>
<li><a href= "" > Reminder <div class= "Ui-li-aside" > It's time to take a pill </div></a></li>//class= " Ui-li-aside "side bar instead of bubbles
　　</ul>

2. Panel components

Set the Data-role property of the DIV element to panel to generate

Data-dismissable dismissable Specifies whether the page displayed by clicking on the trigger Panel can close the panel, by default True

Data-display display Specifies the relationship between the Panel and the trigger panel (Reveal,push,overlay)

Data-position position specifies the display position of the panel, left by default, right

Data-position-fixed positionfixed Whether the panel remains visible when the user scrolls down, false by default

Data-swipe-close swipeclose Specifies whether the panel can be turned off with a swipe gesture, by default true

Reveal default value, put page retreating

The size of the push page will be smaller, with the panel sharing space

Overlay panel display on top, cover page

Jquerymobile list components and panel components