【转】移动前端工作的那些事---前端制作篇之框架篇--jQTouch框架
首先感谢原作者：webApp赵海洋
附上文章原地址：移动前端工作的那些事---前端制作篇之框架篇--jQTouch框架
移动前端框架有许多，这次简要的介绍jQTouch框架。jQTouch也是轻量级框架、它的语言基于jquery语言。上手容易。加载时间比较快，优点是动画切换很流畅、在Android和IOS上表现都不错。缺点是与其搭配的插件较少，需要一些外包插件来进行某些效果的支持,无法自定义布局样式等。
首先，我们先熟悉一下jQTouch的结构代码：
<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>jQTouch β</title> <style type="text/css" media="screen"> @import "css/jqtouch.css"; </style> <script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqtouch.js" type="application/x-javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'jqtouch.png', icon4: 'jqtouch4.png', addGlossToIcon: false, startupScreen: 'jqt_startup.png', statusBar: 'black', preloadImages: [ 'http://www.cnblogs.com/themes/jqt/img/activeButton.png', 'http://www.cnblogs.com/themes/jqt/img/back_button.png', 'http://www.cnblogs.com/themes/jqt/img/back_button_clicked.png', 'http://www.cnblogs.com/themes/jqt/img/blueButton.png', 'http://www.cnblogs.com/themes/jqt/img/button.png', 'http://www.cnblogs.com/themes/jqt/img/button_clicked.png', 'http://www.cnblogs.com/themes/jqt/img/grayButton.png', 'http://www.cnblogs.com/themes/jqt/img/greenButton.png', 'http://www.cnblogs.com/themes/jqt/img/redButton.png', 'http://www.cnblogs.com/themes/jqt/img/whiteButton.png', 'http://www.cnblogs.com/themes/jqt/img/loading.gif' ] }); </script> </head> <body> <div id="jqt"> <!--首页--> <div id="home" class="current" > <div class="levis"><a href="#weibofenxiang" class="flipleft">微博分享</a></div> </div> <!--微博分享--> <div id="weibofenxiang"> <div class="levis"><a href="#home">首页</a></div> </div> </div> </body> </html>
关于移动端的专属meta标签没有在HTML文档里体现。它们都在执行程序jqtouch.js中进行了封装设置。另外，页面加载的时候会初始化框架。完成一些初始工作：
var jQT = new $.jQTouch({ icon: 'jqtouch.png', icon4: 'jqtouch4.png', addGlossToIcon: false, startupScreen: 'jqt_startup.png', statusBar: 'black', preloadImages: [ 'http://www.cnblogs.com/themes/jqt/img/activeButton.png', 'http://www.cnblogs.com/themes/jqt/img/back_button.png', 'http://www.cnblogs.com/themes/jqt/img/back_button_clicked.png', 'http://www.cnblogs.com/themes/jqt/img/blueButton.png', 'http://www.cnblogs.com/themes/jqt/img/button.png', 'http://www.cnblogs.com/themes/jqt/img/button_clicked.png', 'http://www.cnblogs.com/themes/jqt/img/grayButton.png', 'http://www.cnblogs.com/themes/jqt/img/greenButton.png', 'http://www.cnblogs.com/themes/jqt/img/redButton.png', 'http://www.cnblogs.com/themes/jqt/img/whiteButton.png', 'http://www.cnblogs.com/themes/jqt/img/loading.gif' ] });
其中有图标样式、开始加载时图片设置、导航条样式、高亮效果处理等等。这些设置都是为了WEBAPP浏览方式准备的。可以根据实际的项目需求而进行设置修改。
jQTouch框架采用的页面是一个定义的整体大DIV id="jqt" 里面套着N个子DIV的方式。每个子DIV则代表的是框架的各个频道页面。 它的跳转方式和jqMobi采用的方式近似。都是基于#ID号来进行跳转。每个页面都是一个单独的DIV。要跳转到该页时，只需href="#目标id号"即可。例如：
<!--首页--> <div id="home" class="current" > <div class="levis"><a href="#weibofenxiang" class="flipleft">微博分享</a></div> </div> <!--微博分享--> <div id="weibofenxiang"> <div class="levis">"><a href="#home">首页</a></div> </div>
其中，标红的a标签所示链接就是下面的微博分享的div的ID号。而class="flipleft"则指的是跳转的动画方式，默认方式是从左到右，这里是朝左侧翻转。 在独立的ID处加上 class="current" 则证明该页为首页，首页通过class="current"则可以进行变更。这样一个简单的jQTouch框架页就搭建完毕了。
按照上述操作就可以实现基本的网站页面搭建，可以满足大部分需求。至于一些需要手势滑动的需求页面则需要配合外部插件来使用了。一般配合的较多的是手势滑动插件iscroll，它可以和jQTouch完美的配合。我会在移动端插件的篇幅中，介绍如何使用iscroll和一些其他插件的用法。
首先感谢原作者：webApp赵海洋
