为了更好的提升用户体验,移动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点: 一、Sencha Touch框架是一个重量级的框架、它上手较难,代码复杂,并且需要较强的程序基础才能学习,最开始的时候因为一个项目,想使用Sencha Touch框架,后来工期实在太紧张,根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高,运行起来的速度一般,需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。 二、JQTouch是一个轻量级框架、纯jquery写法,上手比较容易,代码容易理解,加载速度也很快,缺点是配合的移动端效果插件较少,需要很多外部的插件相结合,另外,个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。 三、Jquery-moblie也是一个轻量级框架、纯jquery写法,上手容易,代码容易理解,但由于其绑定的前端效果插件过多,且代码结构有些臃 肿,造成加载速度很慢。尤其是在android系统上测试,速度很慢。用户体验效果不太好,它比较适合开发IPAD或是IOS系统的高端机型。 四、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;%20background-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“%20data-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:%20yellow;"> <a href="javascript:alert('test');"> I'm a horizontal carousel </a> </div> <div style="background:%20green;"></div> <div style="background:%20blue;"></div> <div style="background:%20pink;"></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框架页面了~
原文:http://blog.sina.com.cn/s/blog_3f1fc8950101h4nf.html