2. jQuery Mobile List

 

 jQuery Mobile List

      1.1    jQuery Mobile list view is a standard Html list. Divided into <ol> and <ul>. Add attributes to it: data-role='listview'. You can use the jQuery Mobile list.

       data-inset='true' disables the display of rounded corners.

          

    <h2>List without data-inset="true" attribute:</h2>
    <ul data-role="listview" >
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul><br>
    <h2>List with data-inset="true" attribute:</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul>

    

 

    The attribute data-role='list-divider' of <li> is the separator.
   

    <ul data-role="listview">
      <li data-role="list-divider">欧洲</li>
      <li><a href="#">德国</a></li>
      <li data-role="list-divider">亚洲</li>
      <li><a href="#">中国</a></li>
    </ul>

 

   <ul> and <ol> attributes: data-autodividers='true' Automatic dividers. A separator is created by capitalizing the first letter of the list item text.

   <ul> and <ol> attributes: data-filter = 'true' . Add a search box on the list.

      

<ul data-role="listview"  data-autodivider='true' data-filter="true" data-filter-placeholder="搜索姓名">

    

    1.2 jQuery Mobile list content.

           Icons can be used in the list. For images larger than 16X16, use the <img> tag directly; for images smaller than 16*16px, add class = 'ui-li-icon' to the <img> tag.

           

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008. </p>
    </a>
  </li>
   <li>
      <a href="#">
          <img src="us.png" alt="USA" class="ui-li-icon">USA
     </a>
   </li>
</ul>

         

         Split button. Adding two <a> tags in the <li> tag will automatically split into two separate columns, and add an arrow for the second one. If there is text, it will be displayed when the mouse is placed on it.

       

<li data-role="divider">Browsers</li>
      <li>
        <a href="#">       
        <h2>Google Chrome</h2>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">Download Browser</a>
      </li>
      <li>
        <a href="#">
        <h2>Mozilla Firefox</h2>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">Download Browser</a>
      </li>
    </ul>

 

         List counting bubbles. Add <span class='ui-li-count'> in the <a> tag 

         

    <ul data-role="listview" data-inset="true">
      <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li>
      <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li>
      <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li>
    </ul>

 

         Replace the default arrow icon. <li data-icon="plus">

 

        Collapsible list.

        

    <div data-role="collapsible">
    <h4>A</h4>
    <ul data-role="listview">
      <li><a href="#">Adam</a></li>
      <li><a href="#">Angela</a></li>
    </ul>
    </div>

 

        class = 'ui-li-aside' displays the content on the right.

<li><a href="#"><p class="ui-li-aside">Re: Appointment</p> <a></li>