QuoJs 官方文档（汉化版）
QuoJs 官方文档（汉化版）
作者：一只猿
原文地址：
http://www.92ez.com
转载请注明出处，谢谢
帮助说明
如果您认为QuoJS只是一个触摸事件管理器，那你就错了，它是一个功能丰富的类库，无需第三方JavaScript库（例如 jQuery, Prototype, Kendo ...）来创建基于浏览器应用程序的复杂项目。
项目地址: http://quojs.tapquo.com/
如何使用
QuoJS使用的命名空间是$$,所以如果你需要的话,你还可以使用其它的JavaScript类库例如(jQuery,Zepto...)使用通用符号$。
// 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的支持的查询方
.get(index)
.find( 'selector' )
.parent()
.siblings( 'selector' )
.children( 'selector' )
.first()
.last()
.closest( 'selector' )
.each(callback)
元素方法
QuoJs有DOM元素查询引擎与其它著名的类库非常相似.你已经使用的jQuery的很多方法在这里都可以使用.
// 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方法
// 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操作方法
这些方法允许我们插入/更新现有的元素，里面的内容。
// 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'
事件处理
每一个前端项目需要一个高效的事件管理，你可以创建自己的活动，以及现有的订阅。
// 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支持浏览器的触摸事件,那么你有无数的事件和手势来帮助你做任何一个项目
//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 );
滑动方法
不仅有基本的滑动方法,常见的应用程序中有很多的滑动你都可以使用
.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.
.pinch( function );
//Detect if is pinching
.pinching( function );
//Pinch zoom
.pinchIn( function );
.pinchOut( function );
旋转方法( Rotate methods )
.rotate( function );
//Detect if is rotating
.rotating( function );
//Rotate directions
.rotateLeft( function );
.rotateRight( function );
Ajax方法
$$.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) { ... }
});
//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.
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
标签: Quo.js , 92ez.com , 一只猿
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息