关于手机端JQuery的使用心得

1。 如何在台式机上模拟手机显示效果？

为了在台式机上模拟手机的效果，建议使用opera或者chrome浏览器。

很多网站都通过User-Agent来判断浏览器类型，如果是3G手机，显示手机页面内容，如果是普通浏览器，显示普通网页内容。

在使用chrome浏览器时，在Windows的【开始】-->【运行】中输入以下命令，启动谷歌浏览器，即可模拟相应手机的浏览器去访问3G手机网页：

我比较喜欢这个：诺基亚N97：

chrome.exe --user-agent="Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124"


这样你打开的chrome完全是手机端的翻版，你可以看到在这种环境下打开的google搜索主页和普通情况下打开的完全不一样，因为你此时打开的是google手机版。

然后我们可以在这种环境下打开http://jquerymobile.com

你就可以看到手机端Juery的示例页面。他们做的非常棒。各种效果配合完美，为触摸操作提供了非常良好的UI。我决定学习他们的效果。

2。jQuery 的使用

首先，需要先到jquery的网站下载该JS。http://jquerymobile.com/download/

NOTE: jQuery Mobile 1.0 Alpha 2 requires jQuery 1.4.4.

记住， jQuery Mobile 1.0 Alpha 2 是以jQuery 1.4.4版本为基础的，所以调用时别光添加jquery-mobile-1.0a2.js而忘记了添加 jQuery 1.4.4.！

CDN-Hosted JavaScript:

CDN-Hosted CSS:

你可以选则在你的页面上添加如下链接，而不将JS保存在自己的服务器上。你可能会觉得这种方式不够安全。但是事实上，很多国外大站点都是这么做的，这样不仅是有利于减轻服务器负载，而且因为，人家的服务器比你的稳定。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

我暂时选择后者。黏贴上述链接。

因为mobileinit触发事件时立即执行,你需要把你的事件处理器jQuery之前移动被载入。因此,我们建议连接到您的JavaScript的文件按下列顺序排列:（把你的JS放在中间）

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="custom-scripting.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

然后你就可以用JQuery给你封装好的CSS+JS，做出意想不到的UI效果。

实现滑动翻页效果：

$.mobile.changePage("about/us.html", "slideup");

实现pop风格的滑动翻页效果：

$.mobile.changePage("../alerts/confirm.html", "pop", false, false);
posted @ 2013-04-10 15:03  {前端开发}  阅读(980)  评论(0)  编辑  收藏  举报