移动开发框架,第【一】弹:QuoJs 官方文档(汉化版)

作者:一只猿

原文地址:

http://www.92ez.com

转载请注明出处,谢谢

帮助说明

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

 


如何使用
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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。