Quo JS Multi-touch gesture lightweight JavaScript Library "beautiful Alley reprint"

Quo JS is a lightweight, modular, object-oriented JavaScript library that defines a variety of touch gestures that can be used to simplify HTML file traversal, event handling, and Ajax interactions in mobile web development, making it easy for developers to write efficient cross-browser code.

Quo JS Introduction

Quo JS is designed to simplify the amount of code for your mobile development projects, optimize code for your current mobile device, and support gestures such as single point, multi-point, swipe, hold, and more.

Designed for Mobile

To change your goal, write JavaScript in a way: a good API library 5-6k gzip compressed so you can concentrate on dealing with the most basic things to do menial work. The open source MIT license is released so that you can use it to modify it in every case.

Lightweight

The current JavaScript library is unfriendly to mobile support, a very large library that is created based on the requirements of desktop devices, so mobile performance is not optimal. Not having to touch the event or semantic API can help developers create a good and cool good support for JavaScript.

Supported events

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.

Compatibility

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

How to use

Initialize the Quo JS plugin using the $$ namespace, because most plugins such as jquery use the $ this character.

Find all <span> elements in <p> elements$$ (' span ', ' P ');//subscribe to a tap event with a callback$$ (' P '). T AP (function () {//affects "span" children/grandchildren $$ (' span ', this). Style (' Color ', ' red ');}); /Chaining methods$$ (' p > span '). HTML (' tapquo '). Style (' Color ', ' blue ');

Query method

QUOJS has DOM elements that have been used in other well-known libraries very similar to the query engine. A lot of the methods are already in your use of jquery, here are their versions:

JQuery Compatible Query methods.get (index). Find (' selector '). Parent (). Siblings (' selector '). Children (' selector '). First (). Last (). Closest (' selector '). each (callback)

Element method

QUOJS has a query engine for DOM elements that have been used very similarly in other well-known libraries. A lot of the methods are already in your use of jquery, here are their versions:

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 ()

Style method

You can easily manage CSS styles for any DOM elements of your project with QUOJS. The method is completely detailed so it is easy to remember to apply CSS3 full power.

Set a CSS Property.style (' CSS property ', ' value ')//Add/remove a CSS Class Name.addclass (' ClassName '). Removeclass (' CLA Ssname '). 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 Operation Methods

These methods allow us to insert/update the contents of an existing element.

Get first element ' s. innerhtml.html ()//Set the contents of the element (s). HTML (' new HTML ')//Get first element ' s. Text Content.text ()//Set the text contents of the element (s). Text (' new text ')//Add HTML (or a DOM element) to element content S.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 '

Event handling

Each front-end project requires an effective management of an event, and you can create your own events and listen for existing events.

Add Event Listener to Elements.on (type, [selector,] function);//Remove Event listener from Elements.off (type, [Selecto R,] 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! ");});

Gesture Events

Although the browser only supports touch events you have a lot of event quojs and gestures to help you make a usable project.

Tap event, Common Event.tap (function),//long tap event (650 miliseconds). hold (function);//a Tap-delay event to combine W ith others Events.singletap (function);//if you send the Singletap.doubletap (function);

For more information on how to use it, please visit https://github.com/soyjavi/QuoJS/blob/master/README.md

Please support more: http://www.wmx80.com

Project Address: http://quojs.tapquo.com/

GitHub Address: Https://github.com/soyjavi/quojs

Quo JS Multi-touch gesture lightweight JavaScript Library "beautiful Alley reprint"