原文出处：http://www.xuebuyuan.com/1975792.html
JavascriptFrameworks Cheat Sheet》 的中文版,详细介绍了jqMobi.
jqMobi指南（一）:介绍jqMobi组成
jqMobi是针对HTML5浏览器的JavaScript框架
它是由三个部分组成：
jQMobi（一个极快的查询选择库，支持W3C查询）
jqUi（运行在WebKit浏览器之上的移动应用程序的UI/UX库）
jqPlugins（移动应用运行在WebKit浏览器的插件）。
应用的前期准备工作：
下载jqMobi框架
https://github.com/appmobi/jQ.Mobi
在应用中使用jqMobi，通过加入下面的script标记在你的HTML文件里：
1. <script type="text/javascript"charset="utf-8" src="jq.mobi.min.js"></script>
复制代码
在应用程序中使用/引用包括所有jqPlugins，通过加入下面的script标签在你的HTML文件的标记里：
<scripttype="text/javascript"charset="utf-8"src="jq.web.min.js"></script>
如果有需要你也可单个引用插件，例如
1. <scripttype="text/javascript" charset="utf-8"src="plugins/jq.scroller.js"></script>
复制代码
通过添加下面的script标签和link标签在你的应用里引用jqUi
1. <scripttype="text/javascript"charset="utf-8"src="ui/jq.ui.min.js"></script>
2. <linkrel="stylesheet"type="text/css" href="jq.ui.css"/>
复制代码
jqMobi组件
| 名称 | 内容 |
| jqMobi | jq.mobi.min.js一个速度极快的查询选择工具，为Html5浏览器做了优化 |
| jqPlugins | Jq.web.min.js-为运行在webkit核心浏览器的移动应用而做的插件，既可以用它来开发移动app也可用在传统的手机web开发中。 包括： jq.alphatable, jq.carousel, jq.css3animate, jq.drawer, jq.passwordBox, jq.swipeListener, jq.scroller, jq.selectBox, and jq.template |
| jqUi | Jq.ui.min.js -为建立针对webkit核心浏览器的jqMobi移动应用而设的 UI/UX 框架， 固定的标题栏，自动滚动的内容面板， 一个可选的Navbar细分您的应用程序 |
jqMobi指南（二）：jqMobi（查询选择库）之用法（Usage）：
原文（《jqMobi Javascript Frameworks Cheatheet(jqmobi 1.0),》）
【译文】：
加入以下script标记在你的html文件中以使用jQMobi
1. <scriptsrc="jq.mobi.min.js"></script>
复制代码
这将创建两个可使用的对象。它不会覆盖一个预先存在的$对象.
1. $("#main")
2. jq("#main")
复制代码
| 查询选择器 1. $("input[type='text']")/下面的选择不被浏览器支持 2. $("input:text") 复制代码 在某些函数里，会用到一个额外的选择器。这有可能是一个字符串、数组、或者一个jQMobi 对象，目前还不支持函数。 |
语法：
基本的调用
1. $("#id").hide()
复制代码
列举Dom元素、选择器、节点列表，或者html字符串
1. $("span").bind("click",function({console.log("clicked");});//->查找所有span元素并绑定一个click事件
复制代码
通过传递一HTML字符串来创建相应的对象
1. var myDiv=$("<divid='foo'>") //创建并返回一个div对象
复制代码
| jqMobi使用Ajax 1. .get(url,callback) //发起一个到该URL的Ajax请求并将返回的结果用在回调函数中; 2. .post(url,data,callback,dataType) //用传入的数据向该URL发起一个Ajax的POST请求并将返回的结果用在回调函数中。可传入一个可选的数据类型，因为有的WEB服务器需要这个头部。 3. .getJSON(url,data,callback) //用传入的数据向该URL发起一个Ajax请求，并将从应答中得到的json对象传到回调函数，同时执行该回调函数。 复制代码 如果需要更多的入口，以下信息会被用到； 1. .ajax { 2. type:'POST', //默认为GET 3. url:'/api/getinfo', //默认为window.location 4. contentType:'application/json', //默认为application/x-www-form-urlencoded 5. headers:{}, 6. dataType:'application/json', //默认为text/html 7. data:{username:foo}, //可以是一个键/值对字符串或对象。如果是一个对象,可用调用$serialize函数把该对象转换为一键/值对字符串。 8. success:function(data){}, //Ajax请求成功时调用的函数 9. error:function(data){}, //Ajax请求出错时调用的函数 10. } 复制代码 |
在Ajax的GET请求时，如果请求的url中包含了"=？"字样，将会发起一个jsonp请求。
插件
jQMobi具有可扩展性，通过添加插件的方式来扩展。
要创建一个插件，传递一个主要jqMobi对象的参照继承$.fn对象。
jQMobi指南（三）jQMobiAPI 函数(中英
.map(elements,callback)//把当前匹配集合中的每个元素传递给函数，产生包含返回值的新JQMobi 对象。
.each(elements,callback)//对 jQMobi 对象进行迭代，为每个匹配元素执行函数。
.extend(target,{params})//给一个对象扩展一个额外的元素
.isArray(data)//判断是否为数组，返回值为布尔值。
.isFunction(data)//判断是否为函数返回值为布尔值
.isObject(param) //判断是否为对象返回为布尔值
.ready(callback)//页面加载完成后开始运行
.find(selector)// 根据已给的选择器查找所有下级元素
.html(['newhtml']) // 取得/设置该元素的.innerHTML
.text(['newtext']) //取得/设置该元素的innerText
.css('property',['value'])//获得/设置元素CSS指定属性的值
.empty()//设置该元素的.innerHHML一空字符串
.hide() //设置该元素CSS的display属性为"none"
.show() //设置该元素CSS的display属性为"block"
.toggle()//切换该元素的CSS的display属性（显示/隐藏）
.val(["value"])//获得该元素的value属性
.attr("attribute",["value"])//获得/设置这个元素的属性
.removeAttr("attribute") //移除当前元素的该属性
.remove()//从DOM中移除指定元素
.addClass("className")//给指定的元素添加该名称的css类
.removeClass("className")//移除指定元素该名称的css类
.hasClass("className",[_element]) //检查一个元素时候含有该名称的类
.append(element,[insert])//向每个匹配的元素内部后置内容。
.prepend(element)//向每个匹配的元素内部前置内容。
.insertBefore(target)//把匹配的元素插入到另一个指定的元素集合的前面。
.insertAfter(target)//把匹配的元素插入到另一个指定的元素集合的后面。
.get([index])//获得基于. index ()返回的第一个元素
.offset()//计算元素在屏幕上的位置
.parent(selector)//返回该元素的父元素
.children(selector)//返回该元素的后代元素
.siblings(selector)//获得匹配元素集合中所有元素的同辈元素。
.closest(selector,[context])//从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.filter(selector)//将匹配元素集合缩减为匹配指定选择器的元素。
.not(selector)//返回从匹配元素集合中删除该元素集合。
.data(key,[value])//获得/设置一个data-*属性。
.end() //回滚jqMobi元素当过滤器被应用时
.clone()//克隆节点到知道集合
.size() //返回匹配元素数量。
.serialize(grouping)//将表单内容序列化为字符串。
.jsonP(options)//执行JSONP请求，允许跨域
.bind("event",function(){})//向匹配元素附加一个或更多事件处理器
.unbind("event",[callback])//从匹配元素移除一个被添加的事件处理器
.one("event",callback)//向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
.delegate(selector,"event",callback)//向匹配元素的当前或未来的子元素附加事件处理器
.undelegate(selector,"event",[callback])//从匹配元素移除一个被添加的事件处理器
.on("event",selector,callback)//类似于 .delegate()
.off("event",selector,[callback])//删除.on()添点的事件处理器
.trigger("event",data)//触发事件，并传入一个数据（可选）
.proxy(callback,context)//创建一个代理函数,改变该函数中'this'作用域
jQMobi助手调用
.param() //序列化一个JSON对象为键/值对字符串
parseJSON(string) //向后兼容JSON解析调用。使用浏览器原生JSON解析器
.parseXML(string)//解析字符串并返回一XML文档的版本
.uuid //Utility function tocreate a pseudo GUID
.uuid //用来来创建一个伪GUID
.Event(type,props) //创建一个内部使用的自定义事件
jQMobi操作系统检测
$.os.webkit //如果浏览器为webkit核心，返回true
$.os.android //如果用户设备为android，返回true
$.os.ipad //如果用户设备为ipad，返回true
$.os.iphone //如果用户设备为iphone，返回true
$.os.webos //如果用户设备为webos，返回true
$.os.touchpad //如果用户设备为touchpad，返回true
$.os.ios //如果用户设备为iPad或iPhone，返回true
$.os.blackberry //如果用户设备为黑莓PlayBook或OS> = 6，返回true
jQMobi指南（四）-jqUi用法及 jqUi API 函数 ($.ui)
jqUi API 函数 ($.ui)
.loadDefaultHash //布尔值 设置应用开始后是否从hash加载panel(默认为true)
.blockUI(opacity) //产生一遮罩层并锁住UI
-Opacity 为遮罩层透明度。
.unblockUI() //删除遮罩层开启ui
.removeFooterMenu() //删除app底部的导航栏
.showNavMenu //布尔值，是否显示底部导航栏
.autoLaunch //布尔值，是否自动运行jqUi
.isAjaxApp // 布尔值，为true时如同<a>标签设有data-refresh-ajax=trueanddata-persist-ajax=true 属性
.showLoading //布尔值，显示或隐藏ajax请求时表示正在加载的旋转体（就是 “无限菊花”中的菊花）
.launch() //运行jqUi。如果autoLaunch设为true，DOM加载完时调用.launch()，
.showBackButton //布尔值，是否显示返回按钮
.resetScrollers //布尔值，在导航panels时重置滚动条位置
.ready(function) //当jaUi已加载，并完全运行时执行传入的函数
.setBackButtonStyle(class) //重写返回按钮的class名称
.goBack() //发起一返回转场
.clearHistory() //清除历史队列
.updateBadge(target,value,[position]) //给选定的目标添加标记
演示地址：http://blog.siyue.cc/jqmobi/lib/#uiremovebadge
.removeBadge(target) //删除为选定的目标添加的标记
.toggleNavMenu([force]) //显示或隐藏底部导航菜单
.toggleHeaderMenu([force]) //显示或隐藏头部菜单
.toggleSideMenu([force]) //显示或隐藏侧边栏菜单
.updateNavbarElements(elements) //更新导航栏下的元素
.updateSideMenu(elements) //更新导航栏菜单下的元素
.setTitle(value) //为当前panel设置标题
.setBackButtonText(value) //重写返回按钮的文字内容
.showMask(text) //显示表示正在加载的遮罩层
.hideMask() //隐藏已表示的加载遮罩层
.showModal() //加载一内容 panel 在模式窗口
.hideModal() //隐藏模式窗口，并删除已加载进去的内容
.updateContentDiv(id,content) //更新指定id panel的HTML
.addContentDiv(id,content,title) //动态创建一个新panel
.loadContent(target,newTab,goBack,transition)//发起转场或通过ajax加载
.scrollToTop(id) //滚动到panel顶部
.slideTransition(prevPanel,currPanel,goBack)//发起滑动转场
.finishTransition(oldDiv) //在每次转场结束时调用，以隐藏旧DIV并重设正在进行的转场变化。
jQMobi指南（五）jq.Plugins用法
1.jq.scroller
用法：
1）.给滚动的可见区域创建与该区域相同高宽的外部container DIV
1. <div id="my_div_container"style="width:100%;height:300px">
2. <!-- div from below goeshere -->
3. </div>
复制代码
2）.创建包含滚动内容的DIV
1. <div id=”my_div” >
2. <!-- content goes here -->
3. </div>
复制代码
3）.调用下面函数
1. var scroller =$("#my_div").scroller();
复制代码
以对象作为参数传递其他配置选项
1. var options={
2. verticalScroll:true, //vertical scrolling
3. horizontalScroll:false, //horizontal scrolling
4. scrollBars:true //display scrollbars
5. vScrollCSS :"scrollBarV", //CSS class for veritcal scrollbar
6. hScrollCSS :"scrollBarH", //CSS class for horizontal scrollbar
7. refresh:true, //Adds 'Pullto refresh' at the top
8. refreshFunction:updateMessage //callback function to execute on pull to
9. refresh
10. }
11. var scroller =$("#my_div").scroller(options);
复制代码
Note: 你也可通过下面的方法滚动到指定位置
scroller.scrollTo({x:-100,y:-200});
如果你想一直显示滚动条，在你CSS文件里重写下面类的 opacity样式即可
1. .scrollBarV { opacity:.8 !important}
199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
