QuoJs官方文档
2013-10-14 12:55
337 查看
帮助说明[/b]如果您认为QuoJS只是一个触摸事件管理器,那你就错了,它是一个功能丰富的类库,无需第三方JavaScript库(例如 jQuery,
Prototype, Kendo ...)来创建基于浏览器应用程序的复杂项目。
项目地址:http://quojs.tapquo.com/如何使用[/b]QuoJS使用的命名空间是$$,所以如果你需要的话,你还可以使用其它的JavaScript类库例如(jQuery,Zepto...)使用通用符号$。查询方法[/b]QuoJs有DOM元素查询引擎与其它著名的类库非常相似.你已经使用的jQuery的很多方法在这里都可以使用.
// Find all elements inelements
$$('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');
// jQuery的支持的查询方法
.get(index) .find('selector') .parent() .siblings('selector') .children('selector') .first() .last() .closest('selector') .each(callback)
元素方法[/b]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()
样式方法[/b]QuoJS可以轻松管理你任何DOM元素的CSS样式,这些方法很箱子,你很容易记住所有的CSS方法
DOM操作方法[/b]这些方法允许我们插入/更新现有的元素,里面的内容。
// 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');
}
事件处理[/b]每一个前端项目需要一个高效的事件管理,你可以创建自己的活动,以及现有的订阅。
// 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'
手势事件[/b]既然QuoJs支持浏览器的触摸事件,那么你有无数的事件和手势来帮助你做任何一个项目
// 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!");
});
//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);捏方法([/b]类似iphone图片缩小的手势 )[/b]
As with the previous gesture, QuoJS have easy control over this
gesture and its variations.
[code].pinch(function); //Detect if is pinching .pinching(function); //Pinch zoom .pinchIn(function); .pinchOut(function);
[/code]
旋转方法([/b]Rotate
methods)[/b]
[code].rotate(function); //Detect if is rotating .rotating(function); //Rotate directions .rotateLeft(function); .rotateRight(function);
[/code]Ajax方法[/b]
$$.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) { ... }
});
环境事件[/b]The environment object contains useful information to learn more
//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'});
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
相关文章推荐
- JS的验证信息
- js获取或设置当前窗口url参数
- 讲述js算法中的排序、数组去重
- WCS学习笔记(第三天) - JSP提取Controller信息
- js修改input的type属性问题探讨
- java asp php javascript的书籍
- 在jsp页面获取url请求参数
- javascript instanceof
- javascript获取鼠标位置
- 如何用firebug调试js
- JavaScript如何从listbox里同时删除多个项目
- 几种延迟加载JS代码的方法加快网页的访问速度
- jsp写后台自动运行程序
- ExtJs常用验证表单的方法
- 如何通过js实现页面光标位置的控制
- javascript原生ajax
- js中的AMD规范
- JavaScript闭包 取for循环i
- JSON数据格式以及与后台交互数据转换实例
- JSF--转换器的使用和自定义