移动开发者必备工具：开源jqTouch初探-技术开发专区

移动开发者必备工具：开源jqTouch初探

作者：廖煜嵘/译编辑：董建伟 2011-01-10 00:00 IT168网站原创

　　以上的代码，执行后的效果如下图：

移动开发者必备工具：开源jqTouch初探

　　在上面的代码中，唯一用到的唯一的HTML5的元素被采用的是“optgroup“元素。接下来，我们把这个HTML应用转变为iphone应用。

　　iPhone内置的浏览器是目前市场上非常先进的浏览器之一。它在如 CSS、动画方面一直有相当优秀的功能，而这些功能后来才被引入到桌面的浏览器中。

　　接下来本文中展示的代码，需要在Safari Mac或直接在IOS设备(iPhone，iPod的或ipad)中运行。该代码运行在iOS3和iOS4上。而对于在iOS2上的运行情况，本文则未作相关测试。

　　首先到http://www.jqtouch.com/下载jqtouch,而jqtouch的源代码可以在

　　http://code.google.com/p/jqtouch/下载。同时，在该网站上，也有很多丰富的视频指导你的学习。

　　将下载后的jqTouch解压，其中要特别留意的是javascript文件夹和CSS/images文件夹。jqTouch其实是jQuery 的插件，可以很灵活的配置，你可以更新这些文件，但在本文中，我们使用默认的设置。

　　现在，我们开始将之前写好的HTML代码移植到移动设备上。在页面的head元素中添加两个JavaScript库，如下：

　　同时要引入两个CSS文件，在每一个项目中都必须引入：

　　而第二个css文件，如下：

　　这个CSS是主题文件，主题文件是很重要的。默认的主题让应用看起来象一个iPhone应用程序。当然也可以在jqTouch上下载其他主题，让应用程序看起来像一个Android风格的应用。事实上，如果你愿意，你甚至可以开发自己的CSS主题，并将其提交给jqTouch项目。

　　保存修改后的页面，再运行程序，你将看到如下图的效果：

移动开发者必备工具：开源jqTouch初探

　　为了让我们的应用有动画效果，有一个JavaScript函数，添加到网页的HEAD部分：

var jQT = new $.jQTouch({

});

// Page animation callback events

$('#pageevents').

bind('pageAnimationStart', function(e, info){

$(this).find('.info').append('Started animating ' + info.direction + '… ');

}).

bind('pageAnimationEnd', function(e, info){

$(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');

});

</script>

　　以上功能使动画在网页上正确地触发。

　　分析代码

　　如果使用编辑工具，把代码折叠起来看，会十分方便，如下图：

移动开发者必备工具：开源jqTouch初探

　　要注意的是，在上文中，使用<div id=”home”>标签，表明当页面第一次加载时，默认显示的首屏，记得要加上一个class为”current”的样式。

　　接下来，我们观察在home这个div中，有一个div，使用了样式toolbar，如下：

<h1>Shakespeare</h1>

<a class="button slideup" id="infoButton" href="#about">Quote Shakespeare</a>

</div>

　　你将看到的是，只需要这样一个简单的样式，就能在屏幕最上方产生一个iphone风格的工具栏。

　　接下来，你会注意到剩下的部分，都其实只是使用了HTML中的锚点进行跳转连接的。例如，要添加一个iPhone风格的右箭头，只需要添加一个样式arrow就可以了，如下：

<li class="arrow"><a href="#about">About Shakespeare</a></li>

　　要注意的是，如果你要连接到外部网页，则需要添加目标指令“_WebApp“，如下所示：

<li class="forward"><a href="http://www.insideria.com/" target="_WebApp">InsideRIA.com</a></li>

对于iPhone，你也可以添加一个链接到你电话号码：

关注我们