jQuery技术

jQuery Mobile十大常用技巧

字号+ 作者:H5之家 来源:H5之家 2015-10-05 12:05 我要评论( )

在本文中,将介绍使用jQuery Mobile开发的一些常用的技巧,阅读对象为已经使用过jQuery Mobile进行开发的移动Web开发者。 1、禁止截断过长的列表和按钮内容 在jQuery mobile中,如果列表或者按钮中文字的内容过长,jQuery Mobile会自动截断其超过长度的内容

在本文中,将介绍使用jQuery Mobile开发的一些常用的技巧,阅读对象为已经使用过jQuery Mobile进行开发的移动Web开发者。

1、禁止截断过长的列表和按钮内容

在jQuery mobile中,如果列表或者按钮中文字的内容过长,jQuery Mobile会自动截断其超过长度的内容,但如果不希望这样的话,可以在CSS样式中增加如下设置即可,比如下面的是针对按钮的CSS样式设置:

下面的是针对列表的CSS样式设置 

如果要恢复对文字的截断,则继续设置CSS为white-space: nowrap;

2、实现页面加载时的随机页面背景过渡效果

jQuery Mobile中,当需要实现页面加载时,可以有很多的页面加载事件可供使用。比如下面的CSS和JavaScript代码,可以实现页面加载时的随机页面背景过渡效果。

CSS代码: 

 Javascript代码:

3、禁用button

在有的情况下,可能会需要禁止按钮的加载事件,这个时候可以继续通过如下的设置实现:

  • $('#home-button').button("disable");  
  • 如果要恢复可用,则设置为:

  •  $('#home-button').button("enable");  
  • 4、去掉页面加载时的提示信息

    如果在加载页面时,不需要显示页面加载信息时,可以通过设置一个属性来取消显示加载提示信息,如下: 

  •  $.mobile.pageLoading(true); 
  • 如果要继续保持显示页面加载信息,则为:

  •  $.mobile.pageLoading(); 
  • 5、创建自定义主题

    jQuery Mobile本身提供了A-E五种不同的主题,但可以自定义主题,步骤如下:

  • 最后,需要在页面中,应用新定义的主题样式,如下:
  •  <div data-role="page" data-theme="z"></div> 
  • 6、使用自定义字体

    在移动Web应用中,有的时候需要更换字体,这样的话,可以通过使用@font-face方法实现,并且性能是十分好的。具体关于@font-face的使用,请参考这篇文章。

    7、创建一个没有文本只有图片的按钮

    有时,可能想用一个没有文本内容仍具有按钮特性的一个按钮。如果要在按钮上隐藏文本,设置data-iconpos="notext",例如:

  • <a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a> 
  • 8、打开一个无需使用Ajax页面过渡的超链接

    如果不需要使用Ajax打开一个页面的链接,可以设置链接的rel属性,如下:

  • <a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a> 
  • 9、移除项目列表中的箭头

    默认情况下,jQuery Mobile框架会为每一个列表项添加一个箭头,想要禁用箭头显示,需要在想要移除列表项设置data-icon="false"。

  • <li data-icon="false"><a href="contact.html">Contact Us</a></li>  
  • 10、设置页面的背景颜色

    怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的?听起来很简单,其实需要花几分钟时间才能解决。通常情况下,需要在body元素中设置背景颜色,但是用jQuery Mobile框架,需要设置在ui-page类中。

    【编辑推荐】

    【责任编辑:立方 TEL:(010)68476606】


    原文:jQuery Mobile十大常用技巧 返回移动开发首页

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 7个有用的jQuery小技巧

      7个有用的jQuery小技巧

      2016-02-26 13:02

    • jQuery制作select双向选择列表

      jQuery制作select双向选择列表

      2016-02-26 11:00

    • 全面详细的jQuery常见开发技巧手册

      全面详细的jQuery常见开发技巧手册

      2016-02-26 10:02

    • 强大的jQuery移动插件Top 10

      强大的jQuery移动插件Top 10

      2016-02-25 09:05

    网友点评
    e