jqMobi指南系列教程是《 jqMobi Javascript Frameworks Cheat Sheet》 的中文版

jqMobi指南系列教程是《 jqMobi 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 框架，     由css3animate, passwordBox, scroller, and  selectBox jqPlugins的几个组件加在一起组成的：   固定的标题栏，自动滚动的内容面板，   一个可选的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")

复制代码

查询选择器
支持所有符合W3C标准的查询，如下选择都被支持：

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 函数(中英文对照）

《jqMobi JavascriptFrameworks Cheat heet(jqmobi 1.0)》

.map(elements,callback)
//Executes callback function on each element

.map(elements,callback)//把当前匹配集合中的每个元素传递给函数，产生包含返回值的新JQMobi 对象。

.each(elements,callback)//Iterate throughelements and execute callback

.each(elements,callback)//对 jQMobi 对象进行迭代，为每个匹配元素执行函数。

.extend(target,{params})//Extends anobject with additional arguments

.extend(target,{params})//给一个对象扩展一个额外的元素

.isArray(data)//Returns true/false if datais an array

.isArray(data)//判断是否为数组，返回值为布尔值。

.isFunction(data)//Returns true/false ifdata is a function

.isFunction(data)//判断是否为函数返回值为布尔值

.isObject(param)//Returns true/false ifparam is an object

.isObject(param) //判断是否为对象返回为布尔值

.ready(callback)// Callback executed whenDOMContentLoaded happens

.ready(callback)//页面加载完成后开始运行

.find(selector)// Find all chidlren thatmatch the given selector

.find(selector)// 根据已给的选择器查找所有下级元素

.html(['newhtml']) // Get/Set the elements.innerHTML

.html(['newhtml']) // 取得/设置该元素的.innerHTML


.text(['newtext']) // Get/Set the elements .innerTEXT

.text(['newtext']) //取得/设置该元素的innerText

.css('property',['value'])//Get/Set theelements css property to value

.css('property',['value'])//获得/设置元素CSS指定属性的值

.empty()//Sets the elements .innerHTML toan empty string

.empty()//设置该元素的.innerHHML一空字符串

.hide()//Sets the elements display cssattribute to "none"

.hide() //设置该元素CSS的display属性为"none"

.show()//Sets the elements display cssattribute to "block"

.show() //设置该元素CSS的display属性为"block"

.toggle()//Togglesthe elements display cssattribute

.toggle()//切换该元素的CSS的display属性（显示/隐藏）

.val(["value"])//Get/Set the elementsvalue property

.val(["value"])//获得该元素的value属性

.attr("attribute",["value"])//Get/Setthe elements attribute

.attr("attribute",["value"])//获得/设置这个元素的属性

.removeAttr("attribute")  //Removesthe attribute from the elements

.removeAttr("attribute")  //移除当前元素的该属性

.remove()//Remove an element from the Dom

.remove()//从DOM中移除指定元素

.addClass("className")//Adds thecss class name to the selected elements

.addClass("className")//给指定的元素添加该名称的css类

.removeClass("className")//Removesa css class from the selected lements

.removeClass("className")//移除指定元素该名称的css类

.hasClass("className",[_element])  //Checksto see if an element has a class

.hasClass("className",[_element])  //检查一个元素时候含有该名称的类

.append(element,[insert])//Appends anelement to the selected elements

.append(element,[insert])//向每个匹配的元素内部后置内容。

.prepend(element)//Prepends an element tothe selected elements

.prepend(element)//向每个匹配的元素内部前置内容。

.insertBefore(target)//Inserts acollection before the target (adjacent)

.insertBefore(target)//把匹配的元素插入到另一个指定的元素集合的前面。


.insertAfter(target)//Inserts a collection after the target (adjacent)

.insertAfter(target)//把匹配的元素插入到另一个指定的元素集合的后面。

.get([index])//Getraw DOM element based onindex. () returns first element

.get([index])//获得基于. index ()返回的第一个元素

.offset()//Calculates the first elementsoffset on the screen

.offset()//计算元素在屏幕上的位置

.parent(selector)//Returns the parentnodes based off selector

.parent(selector)//返回该元素的父元素

.children(selector)//Returns the childrenof the elements

.children(selector)//返回该元素的后代元素

.siblings(selector)//Returns the siblingsof the elemnts

.siblings(selector)//获得匹配元素集合中所有元素的同辈元素。

.closest(selector,[context])//Returnstheclosest element based off selector

.closest(selector,[context])//从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

.filter(selector)//Filters the elementsbased off selector

.filter(selector)//将匹配元素集合缩减为匹配指定选择器的元素。

.not(selector)//Return all matches that doNOT match the selector

.not(selector)//返回从匹配元素集合中删除该元素集合。

.data(key,[value])//Gets/Setsa data-*attribute for the param

.data(key,[value])//获得/设置一个data-*属性。

.end()//Rolls back the jqMobi elementswhen filters were applied

.end() //回滚jqMobi元素当过滤器被应用时

.clone()//Clones the nodes in thecollection

.clone()//克隆节点到知道集合

.size()//Returns the number of elements ina collection

.size() //返回匹配元素数量。

.serialize(grouping)//Serializes a forminto a query string

.serialize(grouping)//将表单内容序列化为字符串。

.jsonP(options)//Execute a jsonP call,allowing cross domain scripting

.jsonP(options)//执行JSONP请求，允许跨域

.bind("event",function(){})//Bindsa function to the event listener

.bind("event",function(){})//向匹配元素附加一个或更多事件处理器

.unbind("event",[callback])//Unbindsa function to the event listener

.unbind("event",[callback])//从匹配元素移除一个被添加的事件处理器

.one("event",callback)//Bindevent to each element - only executes once

.one("event",callback)//向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

.delegate(selector,"event",callback)//Delegatean event bassed off selector

.delegate(selector,"event",callback)//向匹配元素的当前或未来的子元素附加事件处理器

.undelegate(selector,"event",[callback])//Unbindan event registered through                                        delegate

.undelegate(selector,"event",[callback])//从匹配元素移除一个被添加的事件处理器

.on("event",selector,callback)//类似于 .delegate()

.off("event",selector,[callback])//删除.on()添点的事件处理器

.trigger("event",data)//Triggeran event and pass inoptional data

.trigger("event",data)//触发事件，并传入一个数据（可选）

.proxy(callback,context)//Creates a proxyfunction so the ‘this’context can

be changedin the function

.proxy(callback,context)//创建一个代理函数,改变该函数中'this'作用域

jQMobi助手调用

.param() //Serialize a JSON object intoKVP for aquerystring

.param() //序列化一个JSON对象为键/值对字符串

 

.parseJSON(string) //Backwardscompatability JSON parsing call.  Uses the                    browsers native JSON parser

parseJSON(string) //向后兼容JSON解析调用。使用浏览器原生JSON解析器

 

.parseXML(string) //Parses a string and returns a XML documentversion
.parseXML(string)//解析字符串并返回一XML文档的版本

 

.uuid  //Utility function tocreate a pseudo GUID

.uuid  //用来来创建一个伪GUID

 

.Event(type,props) //Creates a customevent to be used internally

.Event(type,props) //创建一个内部使用的自定义事件

jQMobi操作系统检测

$.os.webkit    //True if webkit found in the user agent

$.os.webkit     //如果浏览器为webkit核心，返回true

 

$.os.android    //True ifanroid user agent

$.os.android    //如果用户设备为android，返回true

 

$.os.ipad      //True if iPad user agent

$.os.ipad       //如果用户设备为ipad，返回true

 

$.os.iphone    //True if iPhone user agent

$.os.iphone    //如果用户设备为iphone，返回true

 

$.os.webos     //True if WebOS detected

$.os.webos      //如果用户设备为webos，返回true

 

$.os.touchpad   //True ifWebOS and Touchpad user agent

$.os.touchpad   //如果用户设备为touchpad，返回true

 

$.os.ios       //True if iPad or iPhone

$.os.ios       //如果用户设备为iPad或iPhone，返回true

 

$.os.blackberry //True if Blackberry PlayBook or OS >=6

$.os.blackberry //如果用户设备为黑莓PlayBook或OS> = 6，返回true

jQMobi指南（四）-jqUi用法及 jqUi API 函数 ($.ui)

jqUi API 函数 ($.ui)

.loadDefaultHash //Boolean to load/notloadpanel from hash when app started  

                 (default is True)

.loadDefaultHash //布尔值 设置应用开始后是否从hash加载panel(默认为true)

 

.blockUI(opacity) //Throw up a maskandblock the UI

.blockUI(opacity) //产生一遮罩层并锁住UI

-Opacity 为遮罩层透明度。

.unblockUI() //Removes the UI mask

.unblockUI() //删除遮罩层开启ui

 

.removeFooterMenu() //Removes thebottomnav bar from app

.removeFooterMenu() //删除app底部的导航栏

 

.showNavMenu //Boolean to show bottomnavbar

.showNavMenu //布尔值，是否显示底部导航栏

.autoLaunch //Boolean to auto launchjqUi

.autoLaunch //布尔值，是否自动运行jqUi

.isAjaxApp //Boolean that when truetreatsevery request as if the anchor had

           data-refresh-ajax=true and data-persist-ajax=true

 

.isAjaxApp // 布尔值，为true时如同<a>标签设有data-refresh-ajax=trueanddata-persist-ajax=true  属性

.showLoading //Boolean to show/notshowloading spinner on ajax requests

.showLoading //布尔值，显示或隐藏ajax请求时表示正在加载的旋转体（就是 “无限菊花”中的菊花）

.launch() //Launch jqUi. If autoLaunchistrue, gets called on DOMContentLoaded

.launch() //运行jqUi。如果autoLaunch设为true，DOM加载完时调用.launch()，

 

.showBackButton //Boolean to show thebackbutton

.showBackButton //布尔值，是否显示返回按钮

 

.resetScrollers //Boolean to resetthescroller position when navigating panels

.resetScrollers //布尔值，在导航panels时重置滚动条位置

 

.ready(function) //Function to firewhenjqUi is ready and completed launch

.ready(function) //当jaUi已加载，并完全运行时执行传入的函数

 

.setBackButtonStyle(class) //Overridetheback button class name

.setBackButtonStyle(class) //重写返回按钮的class名称

.goBack() //Initiate a backtransition

.goBack() //发起一返回转场

.clearHistory() //Clear the historyqueue

.clearHistory() //清除历史队列

 

.updateBadge(target,value,[position])//Updatea badge on the selected target

.updateBadge(target,value,[position]) //给选定的目标添加标记

演示地址：http://blog.siyue.cc/jqmobi/lib/#uiremovebadge

 

.removeBadge(target) //删除为选定的目标添加的标记

.toggleNavMenu([force]) //Toggle thebottomnav menu

.toggleNavMenu([force]) //显示或隐藏底部导航菜单

.toggleHeaderMenu([force]) //Toggle thetopheader menu

.toggleHeaderMenu([force]) //显示或隐藏头部菜单

 

.toggleSideMenu([force]) //Toggle thesidemenu

.toggleSideMenu([force]) //显示或隐藏侧边栏菜单

 

.updateNavbarElements(elements)//Updatethe elements in the navbar

.updateNavbarElements(elements) //更新导航栏下的元素

.updateSideMenu(elements) //Updatetheelements in the side menu

.updateSideMenu(elements) //更新导航栏菜单下的元素

 

.setTitle(value) //Set the title ofthecurrent panel

.setTitle(value) //为当前panel设置标题

 

.setBackButtonText(value) //Overridethetext for the back button

.setBackButtonText(value) //重写返回按钮的文字内容

.showMask(text) //Show the loading mask

.showMask(text) //显示表示正在加载的遮罩层

.hideMask() //Hide the loading mask

.hideMask() //隐藏已表示的加载遮罩层

 

.showModal() //Load a content panel in amodal window

.showModal() //加载一内容 panel 在模式窗口

 

.hideModal() //Hide the modal windowandremove the content

.hideModal() //隐藏模式窗口，并删除已加载进去的内容

 

.updateContentDiv(id,content) //UpdatetheHTML in a content panel

.updateContentDiv(id,content) //更新指定id panel的HTML

.addContentDiv(id,content,title)//Dynamicallycreate a new panel

.addContentDiv(id,content,title) //动态创建一个新panel

 

.loadContent(target,newTab,goBack,transition)//Initiatea transition or load  

                                            via ajax

.loadContent(target,newTab,goBack,transition)//发起转场或通过ajax加载

 

.scrollToTop(id) //Scroll a panel tothetop

.scrollToTop(id) //滚动到panel顶部

.slideTransition(prevPanel,currPanel,goBack)//Initiatea sliding transition

.slideTransition(prevPanel,currPanel,goBack)//发起滑动转场

.finishTransition(oldDiv) //Called atendof each transition to hide the old  

                          div and reset thedoing Transition variable

.finishTransition(oldDiv) //在每次转场结束时调用，以隐藏旧DIV并重设正在进行的转场变化。

jQMobi指南（五）jq.Plugins用法

1.jq.scroller

用法：

1）.给滚动的可见区域创建与该区域相同高宽的外部container DIV

1.  <div id="my_div_container"style="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}