QuoJs官方文档
来源:互联网 发布:暗黑破坏神3攻略软件 编辑:程序博客网 时间:2024/04/30 14:13
帮助说明
如果您认为QuoJS只是一个触摸事件管理器,那你就错了,它是一个功能丰富的类库,无需第三方JavaScript库(例如 jQuery, Prototype, Kendo ...)来创建基于浏览器应用程序的复杂项目。
项目地址:http://quojs.tapquo.com/
如何使用
QuoJS使用的命名空间是$$,所以如果你需要的话,你还可以使用其它的JavaScript类库例如(jQuery,Zepto...)使用通用符号$。
// Find all elements in 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支持浏览器的触摸事件,那么你有无数的事件和手势来帮助你做任何一个项目
既然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 deviceenv.isMobile //[BOOLEAN]env.os.name //[STRING] iOS, Android, Blackberry...env.os.version //[STRING] Versión of OSenv.screen //[OBJECT] With properties: width & height
0 0
- QuoJs官方文档
- QuoJs官方文档
- QuoJS 中文文档
- 官方文档
- 官方文档
- [SQLObject官方文档] 基础
- [SQLObject官方文档] 继承
- TPTP官方文档
- rsyncd.conf - 官方文档
- bind 官方文档
- spring官方文档
- hildon官方文档
- AIR官方文档
- SWFObject 2.0官方文档
- JNI官方文档
- Hadoop 官方中文文档
- oracle官方文档介绍
- oracle官方文档下载
- bzoj 3926 [Zjoi2015]诸神眷顾的幻想乡
- iOS开发问题集锦
- Objective-C Runtime 运行时之三:方法与消息
- iOS系类教程之用instruments来检验你的app
- 【SVN】常见问题解决方案
- QuoJs官方文档
- 拖动窗体内的控件源代码
- VelocityTracker简单用法
- 第13周项目(1)——Prim算法的验证
- php 获取微信共享的收货地址
- 第12周项目1 图基本算法库
- java 解决世界最难数独
- IOS版Unity游戏引擎的集成Admob管理库教程
- 第十二周项目三 图遍历算法实现