【转】移动前端工作的那些事---前端制作篇之框架篇--jqMobi框架
首先感谢原作者：webApp赵海洋
附上文章原地址：移动前端工作的那些事---前端制作篇之框架篇--jqMobi框架
上文中，提到了许多的移动前端框架，这次主要介绍jqMobi框架。jqMobi也是轻量级框架、它的语言基于jquery语言。并对其进行了简化，更有利于在移动设备上进行应用，并且速度很流畅。上手很容易。
首先，我们要先部署jqMobi的环境，以下是代码：
<!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>jqmobi精简版本</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <link rel="stylesheet" type="text/css" href="css/jq.ui.css" title="default"/> <script type="text/javascript" charset="utf-8" src="js/jq.mobi.js"></script> <script type="text/javascript" charset="utf-8" src="js/jq.debug.js"></script> <script type="text/javascript" charset="utf-8" src="js/jq.swipe.js"></script> <script type="text/javascript" charset="utf-8" src="js/jq.carousel.js"></script> <script type="text/javascript" charset="utf-8" src="js/jq.drawer.js"></script> <script type="text/javascript" charset="utf-8" src="js/jq.shake.js"></script> <script type="text/javascript" charset="utf-8" src="js/jq.alphatable.js"></script> <script type="text/javascript" charset="utf-8" src="js/jq.template.js"></script> <script type="text/javascript" charset="utf-8" src="js/jq.ui.js"></script> </head>
这里的meta标签、link标签、以及外链的js文件都已经部署完毕。我们可以看到外链的js文件有多个。其中jq.mobi.js是语言框架。可以把它看成是简化版的jquery框架。jq.ui.js文件是该框架的主执行文件。其他的js文件是配合该框架的各种插件包。
以下是html body代码:
<body> <div id="jQUi"> <!--头部导航部分--> <div id="header" style="background-color:#F00;"></div> <!--中间内容部分--> <div id="content" style="background-color:#333;"> <div title="home" id="home" class="panel" selected="true" scrolling="no"></div> <div title="other" class="panel" id="other"></div> </div> <!--下部导航部分--> <div id="navbar" style="margin:0;float:left; background-color:#0FF;" data-footer="none"> </div> </div> </body> </html>
在body代码处，我们可以清楚的看到最外层是一个大的整体的DIV(jQUi)，在该div中分成了3部分。头部、中间部分、下部导航三部分。每个部分都相对独立。其中中间DIV（content）部分中又分为了很多频道的页面。包括主页和其他页面。这些页面之间是可以进行跳转的。从此形成了一套较为完整的框架页面体系。
关于页面跳转方式，jqMobi(content)DIV中的页面与页面之间的跳转方式默认的样式是从左往右进行切换的，这个也是它的一大亮点。它的原理是基于各个DIV通过href=“#id”来进行跳转的。页面切换方式可以通过更改data-transition属性来进行设置。其默认值为left。
例如：
<div title="home" id="home" class="panel" selected="true" scrolling="no"> <a href="#other">跳转至other页面</a> <a href="#other2“ data-transition="pop" >跳转至other2页面</a> </div> <div title=“other” class=“panel” id=“other”> other页面内容 </div> <div title=“other2” class=“panel” id=“other2”> other2页面内容 </div
jqMobi使用了页面切换跳转的方式，已经满足了移动端的基本需求，但为了更丰富其应用，又增加了其他的辅助插件。如常用的滑动插件carousel.js、监听动作插件swipe.js、滚动插件scroller.js等。插件的使用也很简单，可以根据API中的例子照搬过来进行应用即可。举个左右滑动的简单例子：
<script> var carousel; function init_carousel() { carousel=$("#carousel").carousel({ pagingDiv: "carousel_dots", pagingCssName: "carousel_paging2", pagingCssNameSelected: "carousel_paging2_selected", preventDefaults:false, cDWidth:0 }); } window.addEventListener("load", init_carousel, false); </script> <div title="other" class="panel" id="other"> <div id="carousel" style="display:block;height:50%;width:100%;"> <div style="background: yellow;"> <a href="javascript:alert('test');"> I'm a horizontal carousel </a> </div> <div style="background: green;"></div> <div style="background: blue;"></div> <div style="background: pink;"></div> </div> <div id="carousel_dots2" style="text-align: center; clear: both; position: relative; top: -30%; left: 98%; z-index: 200; width: 20px;"></div> </div>
这样一个插件的调用就完成了。我们可以根据实际的需求来进行选择使用。它的插件是有很多用途的。掌握了整体框架页面结构的原理，根据API就可以很轻松的搭建移动端的jqMobi框架页面了~
首先感谢原作者：webApp赵海洋
附上文章原地址：移动前端工作的那些事---前端制作篇之框架篇--jqMobi框架
