jqm之listview

 

• 如何创建一个基本的列表？

//给ul增加data-role="listview"
<ul data-role="listview">
      <li><a>链接1</a></li>
      <li><a>链接2</a></li>
      <li><a>链接3</a></li>
</ul>

 

• 如何单独给li增加theme

//可以给li添加data-theme
<ul data-role="listview" data-theme="b">
      <li data-theme="a"><a>链接1</a></li>
      <li><a>链接2</a></li>
      <li><a>链接3</a></li>
</ul>

 

 

•  默认情况下，列表经jqm增强后会占据整个屏幕，如果做成内置列表？

<ul data-role="listview" data-inset="true" data-theme="b">
      <li data-theme="a"><a>链接1</a></li>
      <li><a>链接2</a></li>
      <li><a>链接3</a></li>
</ul>

 

 

• 如何变成编号列表？

//使用ol标签
<ol data-role="listview">
      <li data-theme="a"><a>链接1</a></li>
      <li><a>链接2</a></li>
      <li><a>链接3</a></li>
</ol>

 

 

• 如何变成带有缩略图的列表？

//注意li的结构
<ul data-role="listview">
      <li>
           <a>
               <img src="" />
               <h3></h3>
               <p></p>    
               <p></p>
           </a>
      </li>
</ul>

 

 

• 如何变成只读列表？

//其实就是去掉上面缩略图结构li中的a
<ul data-role="listview">
      <li>
               <img src="" />
               <h3></h3>
               <p></p>    
               <p></p>
      </li>
</ul>