您的位置:首页 > Web前端 > JavaScript

QuoJS 中文文档

2015-11-01 15:46 513 查看
quojs支持的手势
Tap 触摸
Single Tap 轻轻点击(个人觉得和tap差不多)
Double-Tap 双击
Hold 长按
2xFingers Tap 双指触摸
2xFingers Double-Tap 双指双击
Swipe Up 上滑
Swipe Right 右滑
Swipe Down 下滑
Swipe Left 左滑
Swipe 滑动
Drag 双指推动(官方说是上推)
Rotate Left 左旋
Rotate Right 右旋转
Rotate 旋转
Pinch Out
Pinch 双指由内向外(放大)
Fingers 貌似是缩小具体的可以去看官方的图示
http://quojs.tapquo.com/

 如何使用呢?选择器
普通选择器
// 选择所有的p标签里面的span元素
$$('span', 'p');
//当p标签被点击时让p标签内的span元素的字体颜色变为红色
$$('p').tap(function() {
// 选择该标签的所有span元素
$$('span', this).style('color', 'red');
});
//可以使用传统的css选择器(很大很大一部分的css3选择器就不支持了)
$$('p > span').html('tapquo').style('color', 'blue');遍历方法
// 和jquery的一样,具体用法不在敷衍
.get(index);
.find('selector');
.parent();
.siblings('selector');
.children('selector');
.first();
.last();
.closest('selector');
.each(callback);
元素操作方法
// 获取和设置元素属性
.attr('attribute')//获取
.attr('attribute', 'value')//设置
.removeAttr('attribute')//移除
// 获取和设置data 的属性
.data('name')//获取
.data('name', 'value')//设置
// 获取和设置表单元素
.val()//获取
.val('value')//设置
//显示隐藏某元素(和JQ 一样)
.show()
.hide()
// 获取对象的尺寸 px
.offset('selector')
.height()
.width()
// 移除元素
.remove()
CSS操作方法
// 设置一个css属性
.style('css property', 'value')
// 添加/移除/反复一个css类 记住是.class 不是#id
.addClass('classname')
.removeClass('classname')
.toggleClass('classname')
// 检查元素是否含有某css类
.hasClass('classname')
// 设置有浏览器前缀的css属性 如含有-webkit- -moz-
.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 元素操作方法
// 获取设置html元素
.html()
.html('new html')
// 获取设置元素文字内容
.text()
.text('new text')
// 添加元素(和jq的一样)
.append(), prepend()
// 元素替换(和jq的一样)
.replaceWith()
// 清空元素
.empty()
以下是示例
$$('article').html('tapquo');
var content = $$('article').html(); //content is 'tapquo'
事件处理函式
// 给元素添加事件监听
.on(type, [selector,] function);
// 移除元素监听
.off(type, [selector,] function);
// 重复元素监听
.trigger(type);
//ready事件
.ready(function);
以下示例
$$(".tapquo").on("tap", function);
$$(".quojs").trigger("loaded");
$$.ready(function() {
alert("QuoJS rulz!");
});
手势触摸
.tap(function);
//长按 (650 ms)
.hold(function);
//点击
.singleTap(function);
//双击
.doubleTap(function);
滑动.swipe(function);
//滑动ing
.swiping(function);
//滑动的4个方向
.swipeLeft(function);
.swipeRight(function);
.swipeDown(function);
.swipeUp(function);缩放(暂时这么理解)s
.pinch(function);
.pinching(function);
//缩小 放大
.pinchIn(function);
.pinchOut(function);
Rotate methods
旋转
.rotate(function);
//检测是否旋转
.rotating(function);
//左/右旋转
.rotateLeft(function);
.rotateRight(function);
Ajax的和jq的一样就不敷衍了下面是一些官方直接忽略的部分直接示例解释
var environment = $$.environment();
var browser = environment.browser;//浏览器
var isMobile = environment.isMobile;//是否移动端
var os_name = environment.os.name;//操作系统
var os_version = environment.os.version;//操作系统版本
var screen = environment.screen;//屏幕
var online = $$.isOnline();//是否在线
原文
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: