QuoJS 多种触摸手势轻量级 JavaScript 库
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论