jQuery Mobile十大常用技巧

共计 2233 个字符,预计需要花费 6 分钟才能阅读完成。

在本文中,将介绍使用 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 代码:

.my-page  {background: transparent url(../images/bg.jpg) 0 0 no-repeat; }.my-page.bg1 {background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }.my-page.bg2 {background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }.my-page.bg3 {background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }

Javascript 代码:

$('.my-page').live("pagecreate", function() {var randombg = Math.floor(Math.random()*4); // 获得 0 到 3 之间的随机数     $('.my-page').removeClass().addClass('bg' + randombg);});

3、禁用 button

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

$('#home-button').button("disable");

如果要恢复可用,则设置为:

$('#home-button').button("enable");

4、去掉页面加载时的提示信息

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

$.mobile.pageLoading(true);

如果要继续保持显示页面加载信息,则为:

$.mobile.pageLoading();

5、创建自定义主题

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

1. 从 jQuery Mobile 的任意一个定义主题的 CSS 文件中,复制其内容到自己定义的 CSS 文件中。

2. 给要自定义的 CSS 主题一个恰当的名称并且重新命名 CSS 文件,注意命名必须是(a-z) 英文字母,比如你是从 jQuery Mobile 的主题 c 的样式文件中复制的,则可以将主题命名为 Z, 则复制过来的内容中,比如要将.ui-btn-up- c 改为.ui-btn-up-z,.ui-body- c 改为.ui-body-z,如此类推。

3. 改变新建立的自定义主题的颜色和 CSS 文件。

4. 最后,需要在页面中,应用新定义的主题样式,如下:

<div data-role="page" data-theme="z"></div>

6、使用自定义字体

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

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

.ui-page{background:#eee;}

正文完
 
zhaopeng
版权声明:本站原创文章,由 zhaopeng 2012-10-15发表,共计2233字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)