移动开发框架，第【一】弹：QuoJs 官方文档（汉化版）

作者：一只猿

原文地址：

http://www.92ez.com

转载请注明出处，谢谢

帮助说明

如果您认为QuoJS只是一个触摸事件管理器，那你就错了，它是一个功能丰富的类库，无需第三方JavaScript库（例如 jQuery, Prototype, Kendo ...）来创建基于浏览器应用程序的复杂项目。

项目地址:http://quojs.tapquo.com/


如何使用
QuoJS使用的命名空间是$$,所以如果你需要的话,你还可以使用其它的JavaScript类库例如(jQuery,Zepto...)使用通用符号$。

1 2 3 4 5 6 7 8 9 10 11

// Find all <span> elements in <p> elements $$('span', 'p');   //Subscribe to a tap event with a callback $$('p').tap(function() {     // affects "span" children/grandchildren     $$('span', this).style('color', 'red'); });   // Chaining methods $$('p > span').html('tapquo').style('color', 'blue');

查询方法
QuoJs有DOM元素查询引擎与其它著名的类库非常相似.你已经使用的jQuery的很多方法在这里都可以使用.

// jQuery的支持的查询方

1 2 3 4 5 6 7 8 9

.get(index) .find('selector') .parent() .siblings('selector') .children('selector') .first() .last() .closest('selector') .each(callback)

元素方法
QuoJs有DOM元素查询引擎与其它著名的类库非常相似.你已经使用的jQuery的很多方法在这里都可以使用.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// Get/Set element attribute .attr('attribute') .attr('attribute', 'value') .removeAttr('attribute') // Get/Set the value of the "data-name" attribute .data('name') .data('name', 'value') // Get/Set the value of the form element .val() .val('value') // Show/Hide a element .show() .hide() // get object dimensions in px .offset('selector') .height() .width() // remove element .remove()

样式方法
QuoJS可以轻松管理你任何DOM元素的CSS样式,这些方法很箱子,你很容易记住所有的CSS方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// set a CSS property .style('css property', 'value')  // add/remove a CSS class name .addClass('classname') .removeClass('classname') .toggleClass('classname') // returns true of first element has a classname set .hasClass('classname') // Set a style with common vendor prefixes .vendor('transform', 'translate3d(50%, 0, 0)');   $$('article').style('height', '128px'); $$('article input').addClass('hide');   var houses = $$('.house'); if (houses.hasClass('ghost')) {     houses.addClass('buuhh'); }

DOM操作方法

这些方法允许我们插入/更新现有的元素，里面的内容。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// get first element's .innerHTML .html() // set the contents of the element(s) .html('new html') // get first element's .textContent .text() // set the text contents of the element(s) .text('new text') // add html (or a DOM Element) to element contents .append(), prepend() // If you like set a new Dom Element in a existing element .replaceWith() // Empty element .empty()   $$('article').html('tapquo'); var content = $$('article').html(); //content is 'tapquo'

事件处理

每一个前端项目需要一个高效的事件管理，你可以创建自己的活动，以及现有的订阅。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// add event listener to elements .on(type, [selector,] function); // remove event listener from elements .off(type, [selector,] function); // triggers an event .trigger(type); //If loaded correctly all resources .ready(function);   // Subscribe for a determinate event $$(".tapquo").on("tap", function); // Trigger custom event $$(".quojs").trigger("loaded"); // Loaded page $$.ready(function() {     alert("QuoJS rulz!"); });

手势事件
既然QuoJs支持浏览器的触摸事件,那么你有无数的事件和手势来帮助你做任何一个项目

1 2 3 4 5 6 7 8

//Tap event, common event .tap(function); //Long tap event (650 miliseconds) .hold(function); //A tap-delay event to combine with others events .singleTap(function); //If you send two singleTap .doubleTap(function);

滑动方法
不仅有基本的滑动方法,常见的应用程序中有很多的滑动你都可以使用

1 2 3 4 5 6 7 8

.swipe(function); //Detect if is swipping .swiping(function); //Swipe directions .swipeLeft(function); .swipeRight(function); .swipeDown(function); .swipeUp(function);

捏方法(类似iphone图片缩小的手势 )

As with the previous gesture, QuoJS have easy control over this gesture and its variations.

1 2 3 4 5 6

.pinch(function); //Detect if is pinching .pinching(function); //Pinch zoom .pinchIn(function); .pinchOut(function);

旋转方法(Rotate methods)

1 2 3 4 5 6

.rotate(function); //Detect if is rotating .rotating(function); //Rotate directions .rotateLeft(function); .rotateRight(function);

Ajax方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$$.get(url, [parameters], [callback], [mime-type]); $$.post(url, [parameters], [callback], [mime-type]); $$.put(url, [parameters], [callback], [mime-type]); $$.delete(url, [parameters], [callback], [mime-type]); $$.json(url, [parameters], [callback]);   $$.json(url, {id: 1980, user: 'dan'}, function(data){ ... });   $$.ajax({     type: 'POST', // defaults to 'GET'     url: 'http://rest',     data: {user: 'soyjavi', pass: 'twitter'},     dataType: 'json', //'json', 'xml', 'html', or 'text'     async: true,     success: function(response) { ... },     error: function(xhr, type) { ... } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//Default Settings $$.ajaxSettings = {     async: true,     success: {},     error: {},     timeout: 0 };   //Set de default timeout to 1 second (1000 miliseconds) $$.ajaxSettings.timeout = 1000;   //Set de default callback when ajax request failed $$.ajaxSettings.error = function(){ ... };   $$.ajaxSettings.async = false; var response = $$.json('http://', {id: 1980, user: 'dan'});

环境事件
The environment object contains useful information to learn more about your device.

1 2 3 4 5 6 7

var env = $$.environment();   env.browser     //[STRING] Browser of your mobile device env.isMobile    //[BOOLEAN] env.os.name     //[STRING] iOS, Android, Blackberry... env.os.version  //[STRING] Versión of OS env.screen      //[OBJECT] With properties: width & height