jQuery Mobile十大常用技巧
原文发表在：
http://mobile.51cto.com/aengine-358926.htm，乃本人翻译作品，禁止转载

目前,在移Web开发领域中,除了使用如Android,iOS系统原生提供的API进行开发外,对于Web开发人员来说,最方便快捷的方法莫过于使用比如jQuery Mobile,Sencha Touch这样基于HTML 5的Web框架进行开发了,因为只要熟悉CSS,JavaScript则可以很轻松地运用这些移动Web开发框架进行开发。

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

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

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

.ui-btn-text { white-space: normal; } 下面的是针对列表的CSS样式设置

.ui-li-desc { white-space: normal; } 如果要恢复对文字的截断,则继续设置CSS为white-space: nowrap;

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

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

CSS代码：

6、使用自定义字体

在移动Web应用中，有的时候需要更换字体，这样的话，可以通过使用@font-face方法实现，并且性能是十分好的。具体关于@font-face的使用，请参考http://www.sitepoint.com/the-fontface-jquery-plugin/这篇文章。

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

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

 


8、打开一个无需使用Ajax页面过渡的超链接

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




 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类中。

.ui-page{       background:#eee;  }