jqmobi学习总结

最新推荐文章于 2015-05-12 13:19:17 发布

谙晨Lee

最新推荐文章于 2015-05-12 13:19:17 发布

阅读量1.4k

点赞数

分类专栏：学习心得文章标签： jqmobi appframework 移动前端框架

本文链接：https://blog.csdn.net/anchenlee/article/details/39369211

版权

学习心得专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在学习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也不需要再引入这个了。

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文件视情况引入

注意以下几点：

1.jQmobi里面 a 链接不适用，可以写成js链接 οnclick="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");*//*手机访问可能出现白屏*/
});