码迷,mamicode.com
首页 > Web开发 > 详细

(三)Jquery Mobile按钮详细讲解

时间:2015-04-05 20:15:59      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

Jquery Mobile按钮详细讲解

一、JM按钮说明

    按钮如下图所示
      技术分享
     1、HTML5中的button
      技术分享
效果:
技术分享
      2、 JM中的普通button
      技术分享
        此中显示和HTML5是系统的。
      3、JM中button内联样式 data-inline
      说到内联样式和block样式,大家估计都不知道怎么回事,内联inline是说,外面的框会根据内部的文字来改变,block则正好相反,上面展示的按钮占据了整个一行的效果,现在我们需要小的按钮,则需要设置为内联。
       data-inline="true"
        技术分享
   效果:
    技术分享
     4、JM设置颜色 data-theme
     技术分享
    说明,data-theme="b" 设置样式为蓝色,JM中主要的样式有abcde五种,a为黑色,b为蓝色,c为灰色,e为黄色
      5、JM中data-mini
      data-mini用于设置按钮的大小,要比普通的按钮要小点
       技术分享
     效果:
      技术分享
      6、图标 data-icon
     设置显示的图标
      技术分享
     这里面需要设置data-iconpos="notext" 就是说,里面没有文本的空间存放
     效果:
     技术分享
     不设置data-iconpos="notext",显示效果如下
     技术分享
     所有效果如下:
     技术分享
      技术分享
      7、图标样式 data-iconpos
      技术分享
      8、按钮组的使用 data-role="controlgroup"
      技术分享
       默认效果:
       技术分享
      水平按钮组 data-type="horizontal" 
      技术分享
      默认是垂直按钮组 data-type="vertical"
      9、按钮样式,控制圆角、阴影(用的不多,一般使用默认的圆角显示)
        data-iconshadow
        data-corners
        data-shadow
       10、disable按钮为不可点击
       技术分享
      效果:
      技术分享
      说明:
      链接中使用class="ui-disabled"   按钮中使用disabled=""   input中使用disabled=""   





(三)Jquery Mobile按钮详细讲解

标签:

原文地址:http://www.cnblogs.com/wang3680/p/b5f645db9523f9795691b0cfdbe2967b.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!