jQuery Mobile 列表内容

缩略图：<img>可将大于16*16px 的图像，自动调整至80*80px

            e.g.  <li><a  href="#"><img  src="a.png" /></a></li>

            添加16*16px的图像： class="ui-li-icon"

            e.g.   <li><a  href="#"><img  src="b.png"  class="ui-li-icon" />image</a></li>

拆分：在<li>内放置两个链接，可创建带垂直分隔栏的拆分列表

         对于第二个链接会自动添加蓝色箭头图标，链接中的文本不会显示在界面上，只会作为提示文本显示

         e.g.

         <ul  data-role="listview">

               <li>

                     <a  href="#"><img  src="c.png" /></a>

                     <a  href="#otherlink"  data-rel="dialog">此处文本不会显示，只有当用户划过该图标时才会显示</a>  // 可添加页面和对话框，增强链接的功能性

               </li>

         </ul> 

计数泡沫：用于显示与列表项相关的数目。 使用行内元素，如<span>等，设置属性 class="ui-li-count" ，添加数字

              e.g.  

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

                    <li><a href="#">cake<span  class="ui-li-count">300</span></a></li>

                    <li><a href="#">apple<span  class="ui-li-count">2000</span></a></li>

                    <li><a href="#">strawberry<span  class="ui-li-count">150</span></a></li>

              </ul>   

更改列表项内默认的链接图标： data-icon="plus"

               e.g.  

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

                    <li><a href="#">默认是右箭头</a></li>

                    <l i  data-icon="minus"><a href="#">minus</a></li>

                    <li  data-icon="info"><a href="#">info</a></li>

              </ul>

可折叠列表：data-role="collapsible" 

                 e.g.

                 <div  data-role="collapsible">

                       <h2>title</h2>

                       <ul  data-role="listview">

                              <li><a  href="#">item1</a></li>

                              <li><a  href="#">item2</a></li>

                       </ul>

                 </div>

其他：<p  class="ui-li-aside">与该元素所属的父元素内第一个子元素并行排列</p>