index.html

<%-- :mode=jsp: --%>
<%@ include file="tabs.jsf" %>

<%--{{{ intro --%>
<style>
.col {
	margin:25px 60px 0 0;
	width:330px;
	height:310px;
}

.col img {
	float:left;
	margin:0 15px 100px 0 !important;
}

.col.last {
	margin-top:25px !important;
}

.col p {
	color:#333;
}

p.more {
	color:#888;
	font-size:16px;
}
</style>

<div class="col" style="margin-top:-15px">

	<h3>Essential tools for modern websites</h3>

	<p class="more">
		Let's face it: do you really need drag-and-drop, resizable windows or sortable lists in your web applications?
	</p>

	<img src="${cdn}${jqt}/img/essential_tools.jpg"/>


	<p>
		Websites are not desktop applications. They are different. What you really need is high usability, striking visual effects and all those "web 2.0" goodies that you have seen on your favourite websites.
	</p>

	<p>
		This library is an answer to this need. All tools can be used together, extended, configured and styled. You'll find your personal way of using the library.
	</p>

</div>

<div class="col last" style="margin-top:-15px !important">

	<h3>Small size. High performance. Free CDN.</h3>

	<p class="more">
		The UI part of this library weighs ${v.jqtSize} Kb. This is possible with good programming habits and compressed files
	</p>


	<img src="${cdn}${jqt}/img/performance.jpg" />

	<p>
		You can pick your own selection of tools from the download page or you can load the most common combinations directly from a free Content Delivery Network (CDN).
	</p>

	<p>
		The CDN is configured with the proper expire headers and compression settings so that the file loads fast. This CDN can be used in production environments without any charge.
	</p>


</div>

<div class="col">

	<h3>For beginners</h3>

	<p class="more">
		A large demo area lets you copy &amp; paste working code directly into your pages.
	</p>

	<img src="${cdn}${jqt}/img/user_basic.png" style="margin:5px 30px" />

	<p>
		From each demo there is a minimal version without redundant HTML, CSS or JavaScript. You can use them as templates and fine tune them to your requirements. They provide a quick way to get started. You are also free to use and modify all the graphics you'll find.
	</p>



</div>

<div class="col last">

	<h3>For serious programmers</h3>

	<p class="more">
		Each tool does only what it is supposed to do and nothing else. Tools and not policy.
	</p>

	<img src="${cdn}${jqt}/img/user_advanced.png" style="margin:5px 30px"/>

	<p>
		Understandable API design. Clean design patterns. Compact and human readable source code on <a href="http://github.com/jquerytools/jquerytools" class="external">Github</a>. That's it.
	</p>

	<p>
		Learn one tool and you also have learned the other tools.
	</p>

</div>

<br clear="all" />

<%--}}}--%>



<!--{{{ understanding -->

<a name="understanding"></a>
<h2 class="first">Understanding <em>jQuery Tools</em></h2>


<p>
	jQuery Tools is a collection of the most important user interface components for the web. These are tabs, accordions, tooltips, overlays, exposing effects and scrollables. They can dramatically improve the usability and responsiveness of your site. They mainly focus on <em>presenting information</em> and <em>visual appeal</em>. After all, this is exactly what most websites desperately want: to present their content to the reader in an easy and visually pleasing manner.
</p>

<p>
	Other JavaScript UI libraries focus on desktop-like features such as drag-and-drop, ranges, sortable tables or draggable windows. They are meant to build "rich internet applications" (RIAs) such as email clients, task managers, CRM software, image organizers or feed viewers. These kinds of applications are very useful within a small group or when used in intranets; however, normal websites are very different in nature. Their purpose is to look good and present information. jQuery Tools are built exactly for that purpose.
</p>

<p>
	It is recommended that you start designing your pages without using any JavaScript. There are many examples of highly functional, good looking and user friendly web sites that are not using JavaScript. The purpose of this library is to enhance an existing site with the great possibilities that modern JavaScript techniques have to offer. This is essentially the idea of "progressive enhancement" which is a common design pattern today. You should realize that highly professional sites don't overuse JavaScript just for the fun of it. Scripting is only used when it truly makes the pages more readable and user-friendly. This is where these jQuery Tools come into play.
</p>

<p>
	This library is not a framework with a steep learning curve, lots of preliminary work and strict coding rules. You are not tied to any predefined HTML or CSS structures. You can include the library on your pages and start using it immediately. You can freely design the look and feel of your site or you can use any of the designs we present in our demos as a template.
</p>

<p>
	These tools can be easily combined. Think of scrollables that trigger overlays or overlays that contain scrollables together with tooltips or whatever combination you can imagine. The possibilities are endless. And if that is not enough, you can harness the enormous power of the jQuery library. Many times you see complex JavaScript components implemented that could be done with just a few lines of jQuery code. For many websites, this may be the only JavaScript library necessary.
</p>

<p style="font-size:16px;margin-top:20px">
	The old UNIX design philosophy <strong>"tools, not policy"</strong> is very important in web design.
</p>

<!--}}}-->


<!--{{{ Browser support -->
<a name="browser_support"></a>
<h2>Browser Support</h2>

<p>
	jQuery Tools have been proven to work with the following browsers:
</p>

<ul>
	<li> <a class="external" href="http://www.mozilla.com/en-US/firefox/">Firefox</a> 2.0+</li>
	<li> <a class="external" href="http://www.microsoft.com/windows/products/winfamily/ie/">Internet Explorer</a> 6+</li>
	<li> <a class="external" href="http://www.apple.com/safari/">Safari</a> 3+ </li>
	<li> <a class="external" href="http://www.opera.com/browser/">Opera</a> 9+ </li>
	<li> <a class="external" href="http://www.google.com/chrome/">Chrome</a> 1+ </li>
</ul>

<p>
	If you encounter any problem with jQuery Tools and any of these browsers, please report it to the <a href="/forum/20/">jQuery Tools forum</a>.
</p>

<!--}}}-->


<!--{{{ Flowplayer -->
<a name="flowplayer"></a>
<h2>jQuery Tools and Flowplayer</h2>

<p>
	You must have noticed that this project is hosted on the Flowplayer website. This is because some of the tools were initially developed for making widgets that work well with video sites. <samp>Scrollable</samp> was made for building playlists and <samp>Overlay</samp> was made for showing videos over other elements on the page. Little by little those widgets matured to the point where they are now.
</p>

<p>
	Today Flowplayer and jQuery Tools have nothing specific to do with each other. Flowplayer is a video player and jQuery Tools is a generic user-interface library for the web. Of course, they can be used together because both are well behaving pieces of software. Here is a quick example of how videos can be overlayed on a page:
</p>

<pii:code>
// install flowplayer into a container element whose id is "player"
var player = $f("player", "/swf/flowplayer-${v.core}.swf");

// setup button action. it will fire our overlay
$("a.overlayLink").overlay({

	// when the overlay is opened, load our player
	onLoad: function() {
		player.load();
	},

	// when the overlay is closed, unload our player
	onClose: function() {
		player.unload();
	}
});
</pii:code>


<p>
	Flowplayer is Open Source software licensed with the GPL&nbsp;3 open source license. There are also commercial licenses that allow us to focus full time on the development of tools and the player itself. They also allow us to provide the free content delivery network for the users of jQuery Tools. There is currently no possibility of expressing your satisfaction through making a donation; however, if you are interested in showing videos on your site you could consider purchasing a <a href="/download/">Flowplayer commercial license</a>.
</p>

<!--}}}-->