作者：一只猿
原文地址：
转载请注明出处，谢谢
帮助说明
如果您认为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‘
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;
|
环境事件
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
|