使用jqMobi开发app基础：Styled Lists布局

浏览数：27 / 时间：2015年06月11日

   jqMobi中的页面布局不多，目前主要有Styled Lists，和Grid System两种布局。

    Styled Lists是列表时布局，每一行只显示一条数据。

     基本结构式使用ul并设置类属性为list，每一行一个标签<li>

例如：

 <ul class="list">
         <li>  需要显示的内容</li>
         <li> 需要显示的内容</li>
         <li>需要显示的内容</li>
        </ul>
显示效果

     

再例如：

 <ul class="list">
         <li>  <a href="detailitem.html" data-refresh-ajax="true" class=‘icon home big‘>账户new 1</a></li>
         <li>  <a href="detailitem.html" data-refresh-ajax="true" class=‘icon picture big‘>账户new 2</a></li>
         <li>  <a href="detailitem.html" data-refresh-ajax="true" class=‘icon home big‘>账户new 3</a></li>
        </ul>

显示效果



可以使用inset增加一定的效果

例如：

     <ul class="list inset">
         <li>  <a href="detailitem.html" data-refresh-ajax="true" class=‘icon home big‘>账户new 1</a></li>
         <li>  <a href="detailitem.html" data-refresh-ajax="true" class=‘icon picture big‘>账户new 2</a></li>
         <li>  <a href="detailitem.html" data-refresh-ajax="true" class=‘icon home big‘>账户new 3</a></li>
        </ul>

效果：


可以看到边角变成了圆形。

官网参考

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢