移动前端工作的那些事—前端制作篇之框架篇–jQTouch框架

   移动前端框架有许多,这次简要的介绍jQTouch框架。jQTouch也是轻量级框架、它的语言基于jquery语言。上手容易。加载时间比较快,优点 是动画切换很流畅、在Android和IOS上表现都不错。缺点是与其搭配的插件较少,需要一些外包插件来进行某些效果的支持,无法自定义布局样式等。

   首先,我们先熟悉一下jQTouch的结构代码:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQTouch &beta;</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: [
                    '../../themes/jqt/img/activeButton.png',
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/blueButton.png',
                    '../../themes/jqt/img/button.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/greenButton.png',
                    '../../themes/jqt/img/redButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../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: [
                    '../../themes/jqt/img/activeButton.png',
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/blueButton.png',
                    '../../themes/jqt/img/button.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/greenButton.png',
                    '../../themes/jqt/img/redButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../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和一些其他插件的用法。

原文:http://blog.sina.com.cn/s/blog_3f1fc8950101hb3h.html

Leave a Reply