Started

Selectors

Utilities

Animation

AJAX

CSS

Event

Manipulation

Cookie

String

Attributes

Data

Storage

Miscellaneous

Tutorial

Installation

Firstly, download the correct version Qatrix from http://qatrix.com/download, and put the file on the correct file path on your server.

And add this code on the HTML file between <head> and </head>

<script type="text/javascript" src="qatrix-1.1.js"></script>

Select element

There are three selector on Qatrix: $() - select by element id; $tag - select by element tag name; $class - select by element class attribute. And the $() is the most important function for the whole operation.

Select by id
var element = $("element_id");
// Do something for element.
Select by tag name
$tag($("element_id"), "div", function (item)
{
	// Do something for every matched elements.
}
Select by class attribute
$class($("element_id"), "class_name", function (item)
{
	// Do something for every matched elements.
}

Do something with Qatrix function

The code design of Qatrix functions are simple and friendly. All the name of Qatrix functions are started with $, and for each DOM element function, the first argument is the matched element or the array of matched elements.

$hide($("element_id"));

// Or
$hide($("element_id_1 element_id_2 element_id_3");
]);

// Or
$hide($class($("element_id"), \'className\'));

$animate($("element_id"), {
	"width": {
		from: "200px",
		to: "100px"
	},
	"opacity": {
		from: "1",
		to: "0.5"
	},
	"height": "200px",
	"font-size": "24px"
}, 300, function ()
{
	//Do something after animation completed
});

$ajax("ajax.example.php", {
	data: {
		"query": "keywords",
		"location": "York",
		"id": "1234"
	},
	success: function (data)
	{
		$append($(\'box\'), data);
	}
});

Congratulations! You know how to use Qatrix now. It`s really simple right? And we will take more time to optimize and increase the performance of the code for you to easily build up a high performance web application with less code. Enjoy coding!

Learn more functions and features from APIs page.

Using Qatrix with jQuery

You can use the following technique to make Qatrix and jQuery working together.

<html>
<head>
	<script src="jquery.js"></script>
	<script src="qatrix.js"></script>
	<script>
	// Use jQuery via jQuery(...)
	jQuery(document).ready(function() {
		jQuery("div").hide();
	});
	
	// Or
	
	// Use jQuery in wrap
	// Without changing the original jQuery code
	(function($) {
		/* some jQuery code that uses $ */
		$("div").hide();
	})(jQuery);
	
	// Or
	
	// Use jQuery as another shortcut
	// Best compatible with different libraries
	var $j = jQuery;
	$j("div").hide();
	
	// if jQuery load after Qatrix
	// <script src="qatrix.js">
	// <script src="jquery.js">
	
	var $j = jQuery.noConflict();
	$j(document).ready(function() {
		$j("div").hide();
	});

	// Or
	jQuery(document).ready(function() {
		jQuery("div").hide();
	});
	
	
	// And then use Qatrix as will
	$ready(function ()
	{
		$hide($("box"));
	});
	
	</script>
</head>
</html>

Using Qatrix with other frameworks

If you want to use Qatrix working with other framework that conflicting the name of function, you can use the following technique to solve this problem.

<html>
<head>
	<script src="other.js"></script>
	<script src="qatrix.js"></script>
	<script>
	// Use Qatrix with Qatrix namespace 
	Qatrix.$cookie.set("foo", "bar");
	
	// Or define the shortcut for Qatrix at first
	var Q = Qatrix;
	Q.$cookie.set("foo", "bar");
	
	</script>
</head>
</html>