About
QuipoJS is a minimalist, modular and object-oriented Javascript library with a goal of only 8-12k. It allows you to write powerful, flexible and cross-browser code with an elegant, well documented and micro coherent API. You just have to concentrate on getting stuff done.
QuipoJS simplifies the way you work and executes fast. It is great for mobile web development and comes with all mobile event handlers like tap, double tap, touch, swipe, etc. QuipoJS currently works on iOS, Android, Blackberry 5+ and WebOS mobile devices.
Quipo is released under the MIT License. Free to use and modify, developer and bussiness-friendly license.
Optimized for mobile devices
Mobile devices do not have a powerful CPU and does not have a quick Internet connection as desktop computers, in this sircunstances the size of your javascript library is very important, QuipoJS 1.0 is only 12KB, compared to jQuery 1.7.1 (92KB).
Download QuipoJS
Source code hosted on GitHub.
You can download the minified version (for production, only 12k): Quipo.min.js
or the uncompressed version (for development, 22k): Quipo.js
How to use
After downloading Quipo.min.js, include it with a script tag at the end of your body tag.
... <script src="Quipo.min.js"></script> <script> // Your QuipoJS code here </script> </body> </html>Edit the src attribute in the script tag to point to your copy of Quipo.min.js. For example, if Quipo.min.js is in the directory "js", and that directory is where your HTML file is, you can use:
<script src="js/Quipo.min.js"></script>
To start using QuipoJS and manipulate the HTML document, you need to wait until the document is ready to be manipulated, using the ready event:
$(document).ready(function(){
// Your code that manipulates the DOM here.
});
As you can see we use $ this is the symbol to talk to QuipoJS, everytime you use one of the functions of the API you need to use the $ symbol.Last, we are going to show one of the other events, tap (tap is for mobile devices and changed to click automatically for browsers):
$(document).ready(function(){
$('a').tap(function(event){
alert('You just clicked a link, and because of preventDefault, you are not going to studioquipo.com');
event.preventDefault();
});
});
Here is a complete example of all this, you can copy and paste this code into an HTML document in the same folder where your Quipo.min.js is to test it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>QuipoJS example</title>
<meta charset="utf-8">
</head>
<body>
<a href="http://www.studioquipo.com">Link to Www.StudioQuipo.Com</a>
<script src="Quipo.min.js"></script>
<script>
$(document).ready(function(){
$('a').tap(function(event){
alert('You just clicked a link, and because of preventDefault, you are not going to studioquipo.com');
event.preventDefault();
});
});
</script>
</body>
</html>
QuipoJS API
$()
$(selector, [context])
Create a collection object by performing a selector, wrapping DOM nodes or create elements from an HTML string.
$('div') // => All div elements on the page
$('#abc') // => Element with the ID "abc"
$('.abc') // => All elements with the class "abc"
$('<p>Hello World</p>') // => generate a P element
The function $() takes an optional context argument, which can be a DOM element or a QuipoJS object:
$('span', $('p')) // => Find all span elements in p elements
$('div').tap(function() { // tap event listener with callback
$('p', this).style('color', 'blue'); // => affects the p children/grandchildren
});
$.each
$.each(collection, function(index, item){ ... })
Iterate over array elements or object key-value pairs. Returning false from the iterator function stops the iteration.
$.each(['a', 'b', 'c'], function(index, item){
console.log('item %d is: %s', index, item);
});
var hash = { month: 'January', number: 1 };
$.each(hash, function(key, value){
console.log(key+': '+value);
});
$.extend
$.extend(target, [source, [source2...]])
Extend the target with properties from each of the source objects, overriding the properties that already exists on target.
var target = { abc: 'demo' };
var source = { text: 'demo source' };
$.extend(target, source);
// The target now is: { abc: 'demo', text: 'demo source' };
$.map
$.map(elements, function(element, index){ ... })
Iterate through elements and return all results of running the iterator function, with null and undefined values filtered out.
filter
filter(selector)
Filter the elements to contain only items that match the selector.
map
map(function(index, element){ ... })
Iterate through all elements and collect the return values of the iterator function. Inside the iterator function, this keyword refers to the current element (also passed as the second argument to the function).
Returns an array containing results of each iteration, with null and undefined values filtered out.
slice
slice(start, [end])
Extract the subset of this array, starting at start index. If end is specified, extract up to but not including end index.
Query functions
children
children([selector])
Get immediate children of each element. If selector is given, filter the results to only include ones matching the selector.
$('p').children(':visible'); // => get all children of P that are visible
closest
closest(selector, [context])
Traverse upwards from the current element to find the first element that matches the selector. If context node is given, consider only elements that are its descendants. It only returns the first ancestor matched.
$('input[type="text"]').closest('form');
each
each(function(index, element){ ... })
Iterate through every element of the collection. Inside the iterator function, this keyword refers to the current item (also passed as the second argument to the function). If the iterator function returns false, iteration stops.
$('div').each(function(index){
console.log('the div %d is: %o', index, this);
});
eq
eq(index)
Reduce the set of matched elements to the one at the specified index.
$('li').eq(0); // => get the first list item
$('li').eq(-1); // => get the last list item
first
first()
Reduce the set of matched elements to the first in the set.
$('ul').first(); // => the first ul
get
get([index])
Get all elements or a single element from the current collection. When no index is given, returns all elements in an array. When the index is specified it return only the element at that position. The returned element is not a QuipoJS collection.
var elements = $('div');
elements.get() // => get all elements as an array
elements.get(0) // => get first div element node
index
index([element])
Get the position of an element. When no element is given it returns the position of the current element among its siblings. When the element is given, returns its position in the current collection. If not found it returns -1.
$('li:nth-child(2)').index() // => returns 1
parent
parent([selector])
Get the immediate parents of each element in the collection. If the selector is given, the result is filtered to include only the ones that match the selector.
$('input').parent();
last
last()
Reduce the set of matched elements to the last in the set.
$('ul').last(); // => the last ul
Element functions
attr
attr(name, [value])
Read or set a DOM attribute. When the value is given, it sets the attribute to that value, if is not given it read the value of the attribute.
$('input').attr('name'); // => read the value of the attribute name
$('input').attr('name', 'txt_name'); // => set the value of the input name attribute
data
data(name, [value])
Read or write the data-* DOM attributes.
$('a').data('source'); //=> get the data-source attribute of the a element
height
height([value])
Get the height of the first element in the collection, if value is specified then set the height of all elements in the collection.
$('#abc').height(); // => 123
$(window).height(); // => 838 (viewport height)
$(document).height(); // => 22302
hide
hide()
Hide elements in the collection by setting their display css property to none.
$('#photo').hide();
offset
offset()
Get the position of the element in the document, it returns an object with properties: top, left, width and height.
remove
remove()
Remove the elements in the current collection from the DOM.
removeAttr
removeAttr(name)
Remove the specified attribute from all elements in the collection.
show
show()
Restore the default value of the display property of each element in the array, effectively showing them if they were hidden with hide().
val
val([value])
Get or set the value of a form element. When no value is given, it returns the value of the first element in the collection. When the value is given, it set the value to all elements in the collection.
$('#input_name').val(); // => get the value of that input.
$('#input_name').val('Bob'); // => set the value of that input to "Bob".
width
width([value])
Get or set the width, same as the height() function but for the width.
Output functions
append
append(content)
Append content to the DOM inside each element in the set of the set of matched elements. The content can be an HTML string, a DOM node or an array of nodes.
$('ul').append('<li>new list item</li>');
empty
empty()
Remove all child nodes of the set of matched elements from the DOM.
html
html([content])
Get or set the HTML contents of each element in the collection.
$('#demo').html(); // => get the HTML content of the container that have the id "demo"
$("div").html("<span class='red'>Hello <b>Again</b></span>"); // => set the HTML content of all div
prepend
prepend(content)
Prepend content to the DOM inside each element in the collection.
$('ul').prepend('<li>first list item</li>');
text
text([content])
Get or set the text content of each element in the collection. This is similar to html(), with the exception it can't be used to get or set HTML content.
Style functions
addClass
addClass(name)
Add the class with the specified name to the set of elements.
hasClass
hasClass(name)
Boolean that verifies if the first element in the set of elements has the specified class name.
removeClass
removeClass(name)
Remove the class with the specified name to the set of elements.
style
style(property, [value])
Read or set the CSS property from DOM elements.
$('h1').style('padding-left'); // => read that style property.
$('h1').style('padding-left', '20px'); // => set the property.
$('h1').style('padding-left', ''); // => remove the property.
toggleClass
toggleClass(name)
Add or remove one or more classes from each element in the collection.
$('#foo').toggleClass('classname');
Form functions
serialize
serialize()
Encode a set of form elements as a string for submission.
$('form').on('submit', function(){
alert($(this).serialize()); // => a=1&b=2&c=3
return false;
});
serializeArray
serializeArray()
Encode a set of form elements as an array of names and values. Similar to serialize().
$('form').on('submit', function(){
console.log($(this).serialize()); // => [ { name: "a", value: "1"}, { name: "b", value: "2" } ]
return false;
});
Event functions
bind
bind(type, function(event){ ... })
Attach an event handler to the set of elements.
delegate
delegate(selector, type, function(event){ ... })
Attach an event handler that is only triggered when the event originated from a node that matches a selector.
off
off(type, [selector], function(event){ ... })
Detach event handlers added with on(). To detach a specific event handler, the same function must be passed that was used for on(). Otherwise, just calling this method with an event type will detach all handlers of that type. When called without arguments, it detaches all event handlers registered on the current set of elements.
on
on(type, [selector], function(event){ ... }))
Add event handlers to the current set of elements. Multiple events types can be passed in a space-separated string, or as an object where event types are keys and handlers are values. If a selector is given, the handler function will only be called when an event originates from an element that matches the selector.
When an event handler return false, preventDefault() is called for the current event, preventing the default browser action such as following links.
var elem = $('#container');
elem.on('click', function(e){ ... }); // => observe all clicks inside #content
elem.on('click', 'nav a', function(e){ ... }); // => observe clicks inside navigation links in #content
$(document).on('click', 'a', function(e){ ... }); // => observe all clicks inside links in the document
ready
ready(function(){ ... })
Specify a function to execute when the DOM is fully loaded.
$(document).ready(function(){ ... });
trigger
trigger(type, [extraParameters])
Execute all handlers and behaviors attached to the matched elements for the given event type.
// Example 1:
$('#foo').on('click', function(){
alert($(this).text());
});
$('#foo').trigger('click');
// Example 2:
$('#foo').on('custom', function(event, param1, param2){
alert(param1 + ' | '+ param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
unbind
unbind(type, function(event){ ... })
Detach an event handler added with bind().
undelegate
undelegate(selector, type, function(event){ ... })
Detach event handler added with delegate().
Mobile events
touch(function(event){ ... })
Fired at the touchstart event
tap(function(event){ ... })
Fired when the element is tapped (or clicked for desktop)
longTap(function(event){ ... })
Long tap event (650 miliseconds)
doubleTap(function(event){ ... })
Used to detect double taps.
swipe(function(event){ ... })
Fired when the element is swiped on any direction.
swipeLeft(function(event){ ... })
Fired when the element is swiped to a specific direction.
swipeRight(function(event){ ... })
swipeDown(function(event){ ... })
swipeUp(function(event){ ... })
<style>.delete { display: none; }</style>
<ul id=items>
<li>List item 1 <span class=delete>DELETE</span></li>
<li>List item 2 <span class=delete>DELETE</span></li>
</ul>
<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete', this).show()
})
// delete row on tapping delete button
$('.delete').tap(function(){
$(this).parent('li').remove()
})
</script>
Ajax
$.ajax
$.ajax(options)
Perform an Ajax request. It can be to a local resource or cross-domain via HTTP access control support in browsers, if the url contains =?, JSON-P mode is assumed. If you need more controls (all keys are optional):
$.ajax({
type: 'POST', // defaults to 'GET'
url: 'http://rest',
data: {user: 'bob', pass: 'thepassword'},
dataType: 'json', //'json', 'xml', 'html', or 'text'
async: true,
success: function(response) { ... },
error: function(xhr, type) { ... }
});
$.ajaxSettings
$.ajaxSettings(options)
QuipoJS gives you the possibility to establish a common configuration for all ajax requests. You can define timeouts, callbacks for when the request was successful and when an error has occurred.
//Default Settings
$$.ajaxSettings = {
async: true,
success: {},
error: {},
timeout: 0
};
//Set de default timeout to 1 second (1000 miliseconds)
$$.ajaxSettings.timeout = 1000;
//Set de default callback when ajax success
$$.ajaxSettings.success = function(){ ... };
$.json
$.json(url, [parameters], [callback])
Perform a JSON request.
//Example of JSON asynchronous request
$$.json( 'http://', {user: 'bob', pass: 'thepassword'},
function(response) {
//In response we have a JSON parsed object
}
);
//The same example in synchronous mode.
$$.ajaxSettings.async = false;
var response = $$.json('http://', {user: 'bob', pass: 'thepassword'});
$.jsonp
$.jsonp(url, [parameters], [callback])
Perform a JSON-P request. See $.json() for an example.
$.get
$.get(url, [parameters], [callback], [mime-type])
Send an Ajax GET request.
$.get('/url.html', function(response){
console.log(response);
});
$.post
$.post(url, [parameters], [callback], [mime-type])
Send an Ajax POST request.
$.post('/form.php', { foo: 'bar' }, function(response){
console.log(response);
});