移动Web开发 jQuery Mobile十大常用技巧

  次阅读 作者:智能小宝 来源:互联网 2016-01-19 11:22 我要评论(0)

目前,在移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代码

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五种不同的主题,但可以自定义主题,步骤如下:

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

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

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

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

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

6、使用自定义字体

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

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...