移动开发框架，第【一】弹：QuoJs 官方文档（汉化版）
作者：一只猿
原文地址：
转载请注明出处，谢谢
帮助说明
如果您认为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
|