0
点赞
收藏
分享

微信扫一扫

(五)Jquery Mobile列表

Jquery Mobile列表

一、JM列表

      1、普通列表

(五)Jquery Mobile列表_2.11.1phoneGap学习


      效果:

      

(五)Jquery Mobile列表_Mobile_02


      带序号的列表 将ul换成ol

      效果:

      

(五)Jquery Mobile列表_2.11.1phoneGap学习_03


2、data-inset="true" 增加列表的上下左右的距离

      

(五)Jquery Mobile列表_ico_04

3、带小图标的列表

      设置class="ui-li-icon"显示图标为中间

(五)Jquery Mobile列表_支付宝_05


      效果:

      

(五)Jquery Mobile列表_支付宝_06

4、带大图的列表

      

(五)Jquery Mobile列表_ico_07


      效果:

     

(五)Jquery Mobile列表_2.11.1phoneGap学习_08

5、带分割的列表

     

(五)Jquery Mobile列表_支付宝_09


      效果:

      

(五)Jquery Mobile列表_支付宝_10


     

(五)Jquery Mobile列表_2.11.1phoneGap学习_11

6、带分组的列表

      

(五)Jquery Mobile列表_ico_12


      效果:

      

(五)Jquery Mobile列表_ico_13

7、折叠按钮

     

(五)Jquery Mobile列表_Mobile_14


      效果:

      

(五)Jquery Mobile列表_ico_15


      

(五)Jquery Mobile列表_Mobile_16


     

(五)Jquery Mobile列表_ico_17

8、折叠的按钮组

      

(五)Jquery Mobile列表_Mobile_18


       还有一种是以数据的开头字母来分组

       

(五)Jquery Mobile列表_Mobile_19


       实例:

        

(五)Jquery Mobile列表_2.11.1phoneGap学习_20


       效果:

       

(五)Jquery Mobile列表_2.11.1phoneGap学习_21

9、列表显示数目

      

(五)Jquery Mobile列表_支付宝_22


      效果:

      

(五)Jquery Mobile列表_ico_23




您的支持是对博主最大的鼓励,感谢您的认真阅读。

举报

相关推荐

0 条评论