首页 > 移动平台 > 详细

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

时间:2014-01-21 00:34:30      阅读:456      评论:0      收藏:0      [点我收藏+]

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

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

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

例如:

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

bubuko.com,布布扣

     

再例如:

 <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>  

显示效果

bubuko.com,布布扣


可以使用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> 

效果:

bubuko.com,布布扣

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

官网参考

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

原文:http://blog.csdn.net/xuexiaodong009/article/details/18350875

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!