设为首页收藏本站

UNIX技术社区

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
热搜: console
查看: 6168|回复: 0

jquery mobile navban的图标效果

[复制链接]
发表于 2012-5-21 19:56:52 | 显示全部楼层 |阅读模式
除此之外,jQueryMobile还为列表提供了一些增强的选项,以下代码将为列表添加分隔符(divider):
[url=][/url]
<ul data-role="listview" data-dividertheme="d">
   
<li data-role="list-divider">Royal Family</li>
   
<li><a href="#home">Henry VIII</a></li>
   
<li><a href="#home">George V</a></li>
   
<li><a href="#home">Prince of Wales</a></li>
   
<li><a href="#home">Elizabeth I</a></li>
   
<li><a href="#home">Elizabeth II</a></li>
   
<li data-role="list-divider">Prime Ministers</li>
   <li><a href="#home">Winston Churchill</a></li>
   
<li><a href="#home">Tony Blare</a></li>
   
<li><a href="#home">David Cameron</a></li>
</ul>

fig07.jpg

如上面的代码所示,为li元素添加data-role="list-divider"即可实现分隔符的效果。
你还可以为列表添加小气泡来展示一些附加数据(本例展示了英国皇室的统治时间):
[url=][/url]
<ul data-role="listview" style="margin-top: 0;">
   
<li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>
   
<li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>
   
<li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>
<li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>
   
<li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>
</ul>[url=][/url]

fig08.jpg
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表