jqmobi学习总结

最近在学习jQmobi的框架，写了一个小项目，遇到很多问题，现在将遇到的问题以及解决方法记录下来，方便以后查看和借鉴：

JqMobi简单介绍：

JqMobi是针对 移动设备开发的javascript框架，在2013年2月22日被 英特尔（intel）公司收购 改名为appframework，它主要有以下优点（ 1.体积小  2.运行速度快  3.语法和Jquery相同，4.开发速度快)，经测试
它在Android上要比jQuery快3倍，在 iOS上比jQuery快2.2倍，速度是JqueryMobile的3到5倍，速度和SenchaTouch差不多，它最大的缺点就是文档不易读。

由于文档不易读，所以很多问题不知道怎么解决，树根老师的视频看着还是很不错的，但是会有版本问题。

首先引入文件

2.1.0版本引入main.css和zppframework.css文件（必须）不能引入af.ui.css,他会修改很多样式导致你需要重写，同时新版2.1.0也不需要再引入这个了。

    <link rel="stylesheet" type="text/css" href="../appframework/css/main.css"
 />

    <link rel="stylesheet" type="text/css" href="../appframework/css/appframework.css"  />

icon.css用到则引入，

    <link rel="stylesheet" type="text/css" href="../appframework/css/icons.css" />

下面两个js文件必须

    <script type="text/javascript" charset="utf-8" src="../appframework/appframework.js"></script>

    <script charset="utf-8" src="../appframework/ui/appframework.ui.js"></script>

下面的js文件视情况引入

<script src="../appframework/plugins/af.css3animate.js"></script><!--影响动态效果-->

<script src="../appframework/plugins/af.scroller.js"></script><!--必须，PC页面显示-->

<script src="../appframework/plugins/af.touchLayer.js"></script><!--必须。手机页面显示-->

<script src="../appframework/plugins/af.touchEvents.js"></script><!--左右pannel切换-->

注意以下几点：

1.jQmobi里面
a 链接不适用，可以写成js链接 onclick="script:window.location.href="URL",

或者绑定相关js事件  

 $("#id").bind('click',function(){

        window.location.href=''URL';

    });

2.实现鼠标拖动页面相关代码：

//可以用鼠标拖动屏幕

function loadedPanel(what) {

    //We are going to set the badge as the number of li elements inside the target

    $.ui.updateBadge("#aflink", $("#af").find("li").length);

    }

function unloadedPanel(what) {

    console.log("unloaded " + what.id);

    }

if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {

    var script = document.createElement("script");

    script.src = "../appframework/plugins/af.desktopBrowsers.js";

    var tag = $("head").append(script);

    }

注意af.desktopBrowse.js的目录要正确。

3.控制pannel左右滑动转场代码

/*左右转场切换pannel*/

本例为两个pannel;

    $('#main_list').bind("swipeLeft", function() {

        $.ui.loadContent("#history", false, false, "slide");

    });

    $('#his_list').bind("swipeRight", function() {

        $.ui.loadContent("#main", false, true, "slideright");

    });

4.比较重要的上拉下拉刷新功能，

首先将需要此功能的pannelid设为webslider或者修改 $("#webslider")为 $("#你的pannel
 id");

下面这段代码只能实现上拉在页底刷新内容，具体可以参考jQmobi文档。

 $("#webslider").css("overflow",
"auto");/*这一段可以不用，手机访问可能出现白屏*/

var myScroller;

    $.ui.ready(function () {

        myScroller = $("#webslider").scroller(); //Fetch the scroller from cache

        //Since this is a App Framework UI scroller, we could also do

        // myScroller=$.ui.scrollingDivs['webslider'];

        myScroller.addInfinite();

        myScroller.enable();

        $.bind(myScroller, "infinite-scroll", function () {

            var self = this;

            if($(this.el).find("#infinite").length==0){/*防止上拉出现多个加载*/

                $(this.el).append("<div id='infinite' style='height:60px;line-height:60px;text-align:center;font-weight:bold'>正在加载请稍后...</div>");

            }

            $.bind(myScroller, "infinite-scroll-end", function () {

                $.unbind(myScroller, "infinite-scroll-end");

                self.scrollToBottom();

                setTimeout(function () {

                    $(self.el).find("#infinite").remove();

                    self.clearInfinite();/*清除上拉*/

                    $(this.el).append("<div>上拉刷新的内容。。。</div>");

                    self.scrollToBottom();

                }, 1000);

            });

        });

        /*$("#webslider").css("overflow", "auto");*//*手机访问可能出现白屏*/

    });

jQmobi视频教程地址：http://www.phonegap100.com/jiaocheng/JqMobi/jQmobi视频教程；

写的比较简单，只是针对自己写代码是遇到的一些问题，如果有错误，麻烦指出！