QuoJS 多种触摸手势轻量级 JavaScript 库

发布于 2019-12-15 14:06:53 字数 5699 浏览 2218 评论 0

QuoJS 是一个轻量级模块化、面向对象的 JavaScript 库,定义了多种触摸手势,可以用于移动 Web 开发中简化 HTML 文件遍历、事件处理及 Ajax 交互等,让开发者轻松编写出高效的跨浏览器代码。

QuoJS 介绍

QuoJS 旨在简化你的移动开发项目的代码量,针对当前的移动设备优化代码运行,支持单点、多点、滑动、按住等多种手势的操作。

专为移动

为了改变你的目标,编写 JavaScript 的方式:一个好的 API 库 5-6k gzip 压缩过的所以你可以集中精力处理最基本的东西做苦力的工作。开源的 MIT 许可下发布,让您可以使用它,修改它在每一种情况。

轻量级

当前的JavaScript库对移动支持不友好,这是非常大的图书馆,是基于桌面设备的要求创建的,所以移动性能不是最优的。不必触摸事件或语义 API 可以帮助开发者创造一个良好的和凉爽的好支持 JavaScript。

支持的事件

QuoJS supports the following gestures:

  • Tap
  • Single 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

So you can also use QuoJS for mobile applicatios.

兼容性

  • Mobile Browsers: Android Navigator 4+, Chrome for Android, Safari, FirefoxOS & Blackberry
  • Desktop Browsers (no gestures available): Chrome 30+, Safari 4+, Firefox 24+ & Opera.

使用方法

初始化 QuoJS 插件使用$$命名空间,因为大多数插件例如 jQuery 等使用 $ 这个字符。

// 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 Compatible Query methods
.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样式。该方法是完全详细所以要记得应用CSS3全功率很容易。

// 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);

更多使用方法,请访问 https://github.com/soyjavi/QuoJS/blob/master/README.md

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

末蓝

文章 0 评论 0

年少掌心

文章 0 评论 0

党海生

文章 0 评论 0

飞翔的企鹅

文章 0 评论 0

鹿港小镇

文章 0 评论 0

wookoon

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文