移动前端工作的那些事—前端制作篇之框架篇–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;%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

Leave a Reply