首先感谢原作者：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赵海洋