Qatrix

High performance

More native and highly optimized function to speed up the experience

Easy-to-learn

Familiar what you used and learnt before with flexible and friendly code

Light and powerful

6KB gzipped file size with 60+ useful functions, everything you wanted

DOM & Animation

$tag($('wrap'), 'div', function (item)
{
	$html(item, 'some value');
});

$hide($('element_id'));

$hide($('element_id_1 element_id_2 element_id_3'), 500);

$animate($("element"), {
	"width": {
		from: 200,
		to: 30
	}
}, 500, function ()
{
	// Do something
});

AJAX

$ajax("example.php", {
	data: {
		"foo": "bar"
	},
	success: function (data)
	{
		// Do something
	}
}
});

Template

var template = "<div><h1>{{header}}</h1><h2>{{header2}}</h2><ul>{{#list}}<li>{{this}}</li>{{/list}}</ul><ul>{{#people}}<li>{{name}} - {{city}}</li>{{/people}}</ul></div>";

var data = {
	header: "Header",
	header2: "Header2",
	header3: "Header3",
	list: ["1", "2", "3"],
	people: [
		{"name": "Tom", "city": "California"},
		{"name": "Jack", "city": "Newton"},
		{"name": "Jone", "city": "Tokyo"}
	]
};

$append($("container"), $template(template, data));

// Output (formatted)
// <div>
//	<h1>Header</h1>
//	<h2>Header2</h2>
//	<ul>
//		<li>1</li>
//		<li>2</li>
//		<li>3</li>
//	</ul>
//	<ul>
//		<li>Tom - California</li>
//		<li>Jack - Newton</li>
//		<li>Jone - Tokyo</li>
//	</ul>
// </div>

Require

$require([
	"http://abc.com/foo.js",
	"http://abc.com/foo.css"
], function ()
{
	// Do something
});

Cookie & storage

$cookie.set("foo", "bar");

$storage.set("foo", "bar");