Skip to content

Commit 7a1e002

Browse files
author
Javi Jiménez
committed
Merge pull request soyjavi#113 from 1m4n0l/master
Modified README.md file
2 parents b65dff8 + 983b3c1 commit 7a1e002

File tree

1 file changed

+262
-15
lines changed

1 file changed

+262
-15
lines changed

‎README.md

100755100644
Lines changed: 262 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,269 @@
1-
# QuoJS 3.0.2
2-
### Micro #JavaScript Library for Mobile Devices
1+
QuoJS
2+
=====
33

4-
## QuoJS?
5-
QuoJS is a micro, modular, Object-Oriented and concise JavaScript Library that simplifies HTML document traversing, event handling, and Ajax interactions for rapid mobile web development. It allows you to write powerful, flexible and cross-browser code with its elegant, well documented, and micro coherent API.
4+
Is a micro, modular, Object-Oriented and concise JavaScript Library that simplifies HTML document traversing, event handling, and Ajax interactions for rapid mobile web development. It allows you to write powerful, flexible and cross-browser code with its elegant, well documented and micro coherent API.
65

7-
Designed to change the way that you write JavaScript with the goal: a 5-6k library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done.
8-
Released under the MIT license, which gives you the possibility to use it and modify it in every circumstance.
6+
Designed to change the way that you write JavaScript with the small size goal: a 5-6k gzipped library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done. Released under the Open Source MIT license, which gives you the possibility to use it and modify it in every circumstance.
97

10-
[Source code](https://github.com/soyjavi/QuoJS) and [issue tracking](https://github.com/soyjavi/QuoJS/issues) are available on Github.
8+
Current JavaScript libraries hate mobile, they are very big libraries that were built based on requirements of desktop devices, so mobile performance isn't optimal. Doesn't have a good support to touch events or a semantic API that would help the developer to create a good & cool JavaScript
119

12-
## Learn more about the project
13-
The idea of QuoJs arose earlier this year, the author [Javi Jiménez Villar](http://twitter.com/soyjavi) saw how existing JavaScript Libraries were not optimized for mobile devices. They were very big libraries that were built based on requirements of desktop devices, so mobile performance was not optimal.
14-
These libraries doesn't have a good support to touch events such as: touch, tap, swipe ... or a semantic API that would help the developer to create a good & cool JavaScript.
10+
*Current version: [3.0.2]()*
11+
12+
13+
Getting Started
14+
---------------
15+
QuoJS only is not only a touch event manager, is an extensive library that requires no third-party JavaScript libraries (such as jQuery, Prototype, Kendo ...) to create complex projects and browser-based applications.
16+
17+
### GitHub
18+
This is opensource, so feel free to fork this project to help us improve Quo. All source code is developed with CoffeeScript.
19+
20+
### Licensing
21+
QuoJS is licensed under GPLv3 licensed and a Commercial License for OEM uses. See [LICENSE](https://github.com/soyjavi/QuoJS/blob/master/LICENSE.txt) for more information.
22+
23+
Touch events
24+
------------
25+
QuoJS supports the following gestures:
26+
27+
* **Tap**
28+
* **Single Tap**
29+
* **Double-Tap**
30+
* **Hold**
31+
* **2xFingers Tap**
32+
* **2xFingers Double-Tap**
33+
* **Swipe Up**
34+
* **Swipe Right**
35+
* **Swipe Down**
36+
* **Swipe Left**
37+
* **Swipe**
38+
* **Drag**
39+
* **Rotate Left**
40+
* **Rotate Right**
41+
* **Rotate**
42+
* **Pinch Out**
43+
* **Pinch**
44+
* **Fingers**
45+
46+
So you can also use QuoJS for mobile applicatios.
47+
48+
How to use
49+
----------
50+
The namespace to use QuoJS is the symbol $$, so (if you needed) you can instantiate other JavaScript libraries (such jQuery, Zepto...) that use the common symbol $.
51+
52+
```
53+
// Find all <span> elements in <p> elements
54+
$$('span', 'p');
55+
56+
//Subscribe to a tap event with a callback
57+
$$('p').tap(function() {
58+
// affects "span" children/grandchildren
59+
$$('span', this).style('color', 'red');
60+
});
61+
62+
// Chaining methods
63+
$$('p > span').html('tapquo').style('color', 'blue');
64+
```
65+
#### Query Methods
66+
QuoJS has a query engine for DOM Elements very similar to that already use in other famous libraries. Many of the methods already you use in jQuery have their version here:
67+
68+
```
69+
// jQuery Compatible Query methods
70+
.get(index)
71+
.find('selector')
72+
.parent()
73+
.siblings('selector')
74+
.children('selector')
75+
.first()
76+
.last()
77+
.closest('selector')
78+
.each(callback)
79+
```
80+
#### Element Methods
81+
QuoJS has DOM Elements query engine very similar to that already use in other famous libraries. Many of the methods already you use in jQuery have their version here:
82+
83+
```
84+
// Get/Set element attribute
85+
.attr('attribute')
86+
.attr('attribute', 'value')
87+
.removeAttr('attribute')
88+
// Get/Set the value of the "data-name" attribute
89+
.data('name')
90+
.data('name', 'value')
91+
// Get/Set the value of the form element
92+
.val()
93+
.val('value')
94+
// Show/Hide a element
95+
.show()
96+
.hide()
97+
// get object dimensions in px
98+
.offset('selector')
99+
.height()
100+
.width()
101+
// remove element
102+
.remove()
103+
```
104+
#### Style Methods
105+
With QuoJS you can easily manage CSS styles of any DOM element of your project. The methods are fully verbose so it will be very easy to remember to apply the full power of CSS3
106+
107+
```
108+
// set a CSS property
109+
.style('css property', 'value')
110+
// add/remove a CSS class name
111+
.addClass('classname')
112+
.removeClass('classname')
113+
.toggleClass('classname')
114+
// returns true of first element has a classname set
115+
.hasClass('classname')
116+
// Set a style with common vendor prefixes
117+
.vendor('transform', 'translate3d(50%, 0, 0)');
118+
```
119+
```
120+
$$('article').style('height', '128px');
121+
$$('article input').addClass('hide');
122+
123+
var houses = $$('.house');
124+
if (houses.hasClass('ghost')) {
125+
houses.addClass('buuhh');
126+
}
127+
```
128+
#### DOM Manipulation methods
129+
These methods allow us to insert/update content inside an existing element.
130+
131+
```
132+
// get first element's .innerHTML
133+
.html()
134+
// set the contents of the element(s)
135+
.html('new html')
136+
// get first element's .textContent
137+
.text()
138+
// set the text contents of the element(s)
139+
.text('new text')
140+
// add html (or a DOM Element) to element contents
141+
.append(), prepend()
142+
// If you like set a new Dom Element in a existing element
143+
.replaceWith()
144+
// Empty element
145+
.empty()
146+
```
147+
```
148+
$$('article').html('tapquo');
149+
var content = $$('article').html(); //content is 'tapquo'
150+
```
151+
#### Events handler
152+
Every frontend project needs a event management efficient, you can create your own events as well as subscribe to existing ones.
153+
154+
```
155+
// add event listener to elements
156+
.on(type, [selector,] function);
157+
// remove event listener from elements
158+
.off(type, [selector,] function);
159+
// triggers an event
160+
.trigger(type);
161+
//If loaded correctly all resources
162+
.ready(function);
163+
```
164+
```
165+
// Subscribe for a determinate event
166+
$$(".tapquo").on("tap", function);
167+
// Trigger custom event
168+
$$(".quojs").trigger("loaded");
169+
// Loaded page
170+
$$.ready(function() {
171+
alert("QuoJS rulz!");
172+
});
173+
```
174+
#### Gestures Events
175+
Although browsers only support touch events with QuoJS you have numerous events and gestures to help you make a usable project.
176+
177+
```
178+
//Tap event, common event
179+
.tap(function);
180+
//Long tap event (650 miliseconds)
181+
.hold(function);
182+
//A tap-delay event to combine with others events
183+
.singleTap(function);
184+
//If you send two singleTap
185+
.doubleTap(function);
186+
```
187+
#### Swipe methods
188+
Not only have the basic swipe, you have more control over this gesture as used in the common native Apps.
189+
190+
```
191+
.swipe(function);
192+
//Detect if is swipping
193+
.swiping(function);
194+
//Swipe directions
195+
.swipeLeft(function);
196+
.swipeRight(function);
197+
.swipeDown(function);
198+
.swipeUp(function);
199+
```
200+
#### Pinch methods
201+
As with the previous gesture, QuoJS have easy control over this gesture and its variations.
202+
203+
```
204+
.pinch(function);
205+
//Detect if is pinching
206+
.pinching(function);
207+
//Pinch zoom
208+
.pinchIn(function);
209+
.pinchOut(function);
210+
```
211+
#### Rotate methods
212+
As with the previous gesture, QuoJS have easy control over this gesture and its variations.
213+
214+
```
215+
.rotate(function);
216+
//Detect if is rotating
217+
.rotating(function);
218+
//Rotate directions
219+
.rotateLeft(function);
220+
.rotateRight(function);
221+
```
222+
#### Ajax Methods
223+
The main premise is to create ajax calls simple and fun.
224+
225+
```
226+
$$.get(url, [parameters], [callback], [mime-type]);
227+
$$.post(url, [parameters], [callback], [mime-type]);
228+
$$.put(url, [parameters], [callback], [mime-type]);
229+
$$.delete(url, [parameters], [callback], [mime-type]);
230+
$$.json(url, [parameters], [callback]);
231+
```
232+
```
233+
$$.json(url, {id: 1980, user: 'dan'}, function(data){ ... });
234+
```
235+
```
236+
$$.ajax({
237+
type: 'POST', // defaults to 'GET'
238+
url: 'http://rest',
239+
data: {user: 'soyjavi', pass: 'twitter'},
240+
dataType: 'json', //'json', 'xml', 'html', or 'text'
241+
async: true,
242+
success: function(response) { ... },
243+
error: function(xhr, type) { ... }
244+
});
245+
```
246+
#### Settings in Ajax Requests
247+
You can establishing a common configuration for all ajax requests, defining timeouts, callbacks for success or error response.
248+
249+
```
250+
//Default Settings
251+
$$.ajaxSettings = {
252+
async: true,
253+
success: {},
254+
error: {},
255+
timeout: 0
256+
};
257+
//Set de default timeout to 1 second (1000 miliseconds)
258+
$$.ajaxSettings.timeout = 1000;
259+
260+
//Set de default callback when ajax request failed
261+
$.ajaxSettings.error = function(){ ... };
262+
```
263+
```
264+
$$.ajaxSettings.async = false;
265+
var response = $$.json('http://', {id: 1980, user: 'dan'});
266+
```
15267

16-
- Visit QuoJS [Site](http://quojs.tapquo.com/)
17268

18-
## Credits
19-
Created by [@soyjavi](http://twitter.com/soyjavi).
20-
Released under MIT license,
21269

22-
See [LICENSE.txt](https://raw.github.com/soyjavi/QuoJS/master/LICENSE.txt) for license.

0 commit comments

Comments
 (0)