jqMobi学习笔记----中文API指南

爱被打了一巴掌 2022-08-13 12:57 149阅读 0赞

原文出处：[http://www.xuebuyuan.com/1975792.html][http_www.xuebuyuan.com_1975792.html]

JavascriptFrameworks Cheat Sheet》 的中文版,详细介绍了jqMobi.

#### jqMobi指南（一）:介绍jqMobi组成 ####

jqMobi是针对HTML5浏览器的JavaScript框架

它是由三个部分组成：

jQMobi（一个极快的查询选择库，支持W3C查询）

jqUi（运行在WebKit浏览器之上的移动应用[程序][Link 1]的UI/UX库）

jqPlugins（移动应用运行在WebKit浏览器的插件）。

应用的前期准备工作：

下载jqMobi框架

[https://github.com/appmobi/jQ.Mobi][https_github.com_appmobi_jQ.Mobi]

在应用中使用jqMobi，通过加入下面的script标记在你的HTML文件里：

1.  <script  type="text/javascript"charset="utf-8" src="jq.mobi.min.js"></script>

复制[代码][Link 1]

在应用程序中使用/引用包括所有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组件**

<table> 
 <tbody> 
 <tr> 
 <td>名称</td> 
 <td>内容&nbsp;&nbsp;</td> 
 </tr> 
 <tr> 
 <td>jqMobi</td> 
 <td>jq.mobi.min.js一个速度极快的查询选择工具，为Html5浏览器做了优化&nbsp;&nbsp;</td> 
 </tr> 
 <tr> 
 <td>jqPlugins &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td> 
 <td> Jq.web.min.js-为运行在webkit核心浏览器的移动应用而做的插件，既可以用它来开发移动app也可用在传统的手机web开发中。&nbsp;&nbsp; 包括：&nbsp;&nbsp; jq.alphatable, jq.carousel,&nbsp;&nbsp;jq.css3animate,&nbsp;&nbsp;jq.drawer,&nbsp;&nbsp; jq.passwordBox, jq.swipeListener, jq.scroller,&nbsp;&nbsp;jq.selectBox, and jq.template &nbsp; </td> 
 </tr> 
 <tr> 
 <td>jqUi</td> 
 <td> Jq.ui.min.js -为建立针对webkit核心浏览器的jqMobi移动应用而设的&nbsp;UI/UX&nbsp;框架，&nbsp; &nbsp;&nbsp;&nbsp;由css3animate, passwordBox, scroller, and&nbsp;&nbsp;selectBox jqPlugins的几个组件加在一起组成的：&nbsp;&nbsp; 固定的标题栏，自动滚动的内容面板，&nbsp;&nbsp; 一个可选的Navbar细分您的应用程序 </td> 
 </tr> 
 </tbody> 
</table>

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")

复制代码

<table> 
 <tbody> 
 <tr> 
 <td> 查询选择器 支持所有符合W3C标准的查询，如下选择都被支持： 1.&nbsp; $("input[type='text']")/下面的选择不被浏览器支持 2.&nbsp; $("input:text") 复制代码 在某些函数里，会用到一个额外的选择器。这有可能是一个字符串、数组、或者一个jQMobi 对象，目前还不支持函数。 </td> 
 </tr> 
 </tbody> 
</table>

语法：  
基本的调用

1.   $("\#id").hide()

复制代码

列举Dom元素、选择器、节点列表，或者html字符串

1.   $("span").bind("click",function(\{console.log("clicked");\});//->查找所有span元素并绑定一个click事件

复制代码

通过传递一HTML字符串来创建相应的对象

1.  var myDiv=$("<divid='foo'>") //创建并返回一个div对象

复制代码

<table> 
 <tbody> 
 <tr> 
 <td> jqMobi使用Ajax&nbsp; 1.&nbsp; .get(url,callback) //发起一个到该URL的Ajax请求并将返回的结果用在回调函数中; 2.&nbsp; .post(url,data,callback,dataType) //用传入的数据向该URL发起一个Ajax的POST请求并将返回的结果用在回调函数中。可传入一个可选的数据类型，因为有的WEB服务器需要这个头部。 3.&nbsp; .getJSON(url,data,callback) //用传入的数据向该URL发起一个Ajax请求，并将从应答中得到的json对象传到回调函数，同时执行该回调函数。 复制代码 如果需要更多的入口，以下信息会被用到； 1.&nbsp; .ajax {&nbsp; 2.&nbsp; &nbsp; &nbsp;type:'POST', //默认为GET&nbsp; 3.&nbsp; &nbsp; &nbsp;url:'/api/getinfo', //默认为window.location&nbsp; 4.&nbsp; &nbsp; &nbsp;contentType:'application/json', //默认为application/x-www-form-urlencoded&nbsp; 5.&nbsp; &nbsp; &nbsp;headers:{},&nbsp; 6.&nbsp; &nbsp; &nbsp;dataType:'application/json', //默认为text/html&nbsp; 7.&nbsp; &nbsp; &nbsp;data:{username:foo}, //可以是一个键/值对字符串或对象。如果是一个对象,可用调用$serialize函数把该对象转换为一键/值对字符串。 8.&nbsp; &nbsp; &nbsp;success:function(data){}, //Ajax请求成功时调用的函数 9.&nbsp; &nbsp; &nbsp;error:function(data){}, //Ajax请求出错时调用的函数 10. }&nbsp; &nbsp; 复制代码 </td> 
 </tr> 
 </tbody> 
</table>

在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][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.

3.  </div>

复制代码

2）.创建包含滚动内容的DIV

1.  <div id=”my\_div” >

2.

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\}

[http_www.xuebuyuan.com_1975792.html]: http://www.xuebuyuan.com/1975792.html
[Link 1]: http://www.xuebuyuan.com/
[https_github.com_appmobi_jQ.Mobi]: https://github.com/appmobi/jQ.Mobi
[http_blog.siyue.cc_jqmobi_lib_uiremovebadge]: http://blog.siyue.cc/jqmobi/lib/#uiremovebadge