jqMobi框架详解与组件指南

4星 · 超过85%的资源需积分: 10 80 浏览量更新于2024-09-19 收藏 295KB PDF 举报

jqMobi参考手册是一份全面的文档，专为HTML5浏览器设计的JavaScript框架，旨在优化移动应用开发体验。它由三个核心部分组成：jqMobi、jqUi和jqPlugins。首先，jqMobi是一个强大的查询选择器库，支持W3C标准的查询，提供了超快的性能，特别适合于HTML5浏览器环境。它的主要功能包括但不限于： 1. **jq.alphatable**: 用于创建字母表式的表格，方便用户查找和浏览。 2. **jq.carousel**: 用于实现轮播效果，适用于展示多组图片或内容滑动展示。 3. **jq.css3animate**: 利用CSS3动画增强用户体验，实现平滑的过渡和变换效果。 4. **jq.drawer**: 提供可滑动的抽屉式菜单，便于导航。 5. **jq.passwordBox**: 安全地显示和输入密码的组件。 6. **jq.swipeListener**: 检测用户的滑动手势，如左右滑动等。 7. **jq.scroller**: 用于滚动内容区域，使页面滚动更加流畅。 8. **jq.selectBox**: 选择框组件，方便用户进行多选项选择。 9. **jq.template**: 提供动态内容填充功能，简化页面构建。然后，jqUi是针对WebKit浏览器的UI/UX库，专注于为移动应用提供一致性和易用性。它包含以下组件： - **jq.web.min.js**: 一个基础插件集合，包含jqPlugins中的组件，如密码盒、滚动条和选择框。 - **Fixedheaderbar**: 固定的头部导航栏，保持在页面顶部，提高用户操作便捷性。 - **Autoscrollingcontentpanels**: 自动滚动内容区域，适应屏幕大小和滚动需求。 - **Optionalnavbar**: 可选的导航栏，用于划分应用程序的不同部分。最后，jqPlugins是为移动应用设计的一系列插件，除了jqUi组件外，还提供了额外的功能，以便于构建更专业、功能丰富的移动应用。这些插件不仅适用于AppMobi，也适用于通用的移动网页开发。在使用jqMobi框架之前，开发者需要下载并准备该框架，确保在Webkit浏览器环境中能够顺利运行和构建出响应式、高性能的移动应用。通过结合这三个核心部分，开发者可以轻松地构建出适应不同设备和场景的交互式应用。

1.02

jqMobi Javascript Frameworks Cheat Sheet

jqMobi is a Javascript framework targeted at HTML5 browsers

It is comprised of three parts: jqMobi (a blazingly fast query selector library that supports W3C queries),

jqUi (a UI/UX library for mobile applications in a webkit browser), and jqPlugins (plugins for mobile applications in a webkit browser).

jqMobi Components

Name & Description

Contents

jqMobi

jqPlugins

jqUi

jq.mobi.min.js - a blazingly fast query selector tool

that is optimized for HTML5 browsers

jq.web.min.js - plugins for mobile applications in a

webkit browser that can be used for AppMobi and

general mobile web development.

Consists of:

jq.alphatable, jq.carousel, jq.css3animate, jq.drawer,

jq.passwordBox, jq.swipeListener, jq.scroller, jq.selectBox, and

jq.template

jq.ui.min.js – UI/UX framework for building jqMobi

mobile apps targeted at the Webkit browser

comprised of css3animate, passwordBox, scroller, and selectBox

components of jqPlugins, plus:

 Fixed header bar, Auto scrolling content panels, and

an optional navbar to segment your application

Application Preparation

Download the jqMobi Frameworks

https://github.com/appmobi/jQ.Mobi

To use jqMobi in an application, Include the following script tag in your

html file:

To use/include all jqPlugins in an application, include the following script

tag in your html file:

You can also include individual plugins if desired, for example:

To include jqUi in your application, add the script tag and link tag:

jqMobi - Query selector library

Usage

To use jqMobi include thefollowing script tag in your html file:

This creates two objects you can work with. It will NOT override a pre-existing $

object.

$("#main")

jq("#main")

Query Selector

W3C spec'ed queries are supported. The following can be done:

$("input[type='text']")

The following is NOT supported by the browsers:

$("input:text")

In some functions, an additional selector can be used. This can be a string, array, or

a jqMobi object. We currently do not support functions.

Syntax:

Basic call

$("#id").hide()

A Dom element, selector, list of nodes, or HTML string can be specified.

$("span").bind("click",function(){console.log("clicked");}); // -> find all

span elements and attach a click event

An HTML string can be passed and it will create the object for you.

var myDiv=$("<div id='foo'>") //Creates a div object and returns it

jqMobi Ajax calls

.get(url,callback) //Makes an Ajax request to the URL and executes the

callback funtion with the result

.post(url,data,callback,dataType) //Makes an Ajax POST request to the URL with

the data and executes the callback with the result. An optional dataType can

be passed in, as some webservices require the header

.getJSON(url,data,callback) //Makes an ajax request with the data and executes

callback function passing in a JSON object from the Ajax response into the

callback function.

If more access is needed, the following can be used:

.ajax {

type:'POST', //defaults to GET

url:'/api/getinfo', //defaults to window.location

contentType:'application/json', //defaults to application/x-www-form-

urlencoded

headers:{},

dataType:'application/json', //defaults to text/html

data:{username:foo}, //Can be a Key/Value pair string or object. If it's

an object, $.serialize is called to turn it into a Key/Value pair string

success:function(data){}, //function to call on successful Ajax request

error:function(data){}, //function to call when an error exists in the Ajax

request

}

If the url contains the pattern =? in it, a jsonP request will be made. These can

ONLY be GET requests

Plugins

jqMobi is built with the extendability to add plugins. To create a plugin, extend the

$.fn object by passing a reference of the main jqMobi object

(function($){

$.fn['foo']=function(){

alert("bar");

}

})(jq);

jqMobi API functions

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

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

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

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

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

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

.ready(callback) // Callback executed when DOMContentLoaded happens

.find(selector) // Find all chidlren that match the given selector

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

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

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

.empty() //Sets the elements .innerHTML to an empty string

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

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

.toggle() //Toggles the elements display css attribute

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

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

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

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

.addClass("className") //Adds the css clas name to the selected elements

.removeClass("className") //Removes a css class from the selected elements

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

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

.prepend(element) //Prepends an element to the selected elements

.insertBefore(target) //Inserts a collection before the target (adjacent)

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

.get([index]) //Get raw DOM element based on index. () returns first element

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

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

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

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

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

.filter(selector) //Filters the elements based off selector

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

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

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

.clone() //Clones the nodes in the collection

.size() //Returns the number of elements in a collection

.serialize(grouping) //Serializes a form into a query string

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

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

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

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

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

.undelegate(selector,"event",[callback]) //Unbind an event registered through

delegate

.on("event",selector,callback) //Similar to .delegate()

.off("event",selector,[callback]) //Removes event listeners for .on()

.trigger("event",data) //Trigger an event and pass in optional data

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

be changed in the function

jqMobi Helper calls

.param() //Serialize a JSON object into KVP for a querystring

.parseJSON(string) //Backwards compatability JSON parsing call. Uses the

browsers native JSON parser

.parseXML(string) //Parses a string and returns a XML document version

.uuid //Utility function to create a pseudo GUID

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

jqMobi OS detectors

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

$.os.android //True if anroid useragent

$.os.ipad //True if iPad useragent

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

$.os.webos //True if WebOS detected

$.os.touchpad //True if WebOS and Touchpad user agent

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

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

下载后可阅读完整内容，剩余3页未读，立即下载

jie8513

粉丝: 0
资源: 16

jqMobi框架详解与组件指南

jqmobi微信

jqmobi app-framework-2.1.0

CheatEngine6.7 英文原版

jqmobi移动开发

jq.mobi.min.js

OPPO 推搜广多业务多场景的统一预估引擎实践 (1).pdf

C#HR人事管理系统源码数据库 MySQL源码类型 WebForm

量化投资技术实验报告指导-实验任务与评估标准解析

ioDraw-v3.1.0-mac-x64.dmg，流程图、思维导图、甘特图绘制软件，macOS x64版

计算机网络 - 思科模拟器 - Cisco Packet Tracer 令牌.zip

最新资源