Easily build up high performance application with less code

Download Latest Qatrix 1.1

Compressed and Gzipped 6KB
download
Development version 35KB
download
Like Qatrix?

High performance

More native and highly optimized function to speed up the experience

High performance

Easy-to-learn

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

Easy-to-learn

Light and powerful

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

Light and powerful
Compatibility: IE6+, Chrome4+, Firefox2+, Safari3+, Opera9+
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");