Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

441 lines (361 sloc) 11.422 kb
<!doctype html>
<!--
Flowplayer JavaScript, website, forums & jQuery Tools by Tero Piirainen
Prefer web standards over Flash. Video is the only exception (for now).
-->
<html lang="en">
<head>
<title>jQuery TOOLS - The missing UI library for the Web</title>
<meta name="description" content="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
">
<meta name="keywords" content="javascript ui library, javascript library, jquery ui library, user interface library, web 2.0 ui library
">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Distribution" content="Global" />
<meta name="author" content="Tero Piirainen">
<meta name="Robots" content="index,follow" />
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" href="/media/css/style.css">
<style>
#content{
width: 100%;
}
#scroll {
background-color: white;
}
#tools_index #content {
background-image:none;
float:none;
margin-top:25px;
padding:0;
width:100%;
}
#right {
display:none;
}
#tease {
background-image:url(/media/img/1.2/banner.jpg);
margin-top:30px;
display:block;
height:148px;
}
</style>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
</head>
<body>
<div id="top">
<div id="top-wrap">
<div id="noticeHolder">
<div id="notice">
This is a message.
</div>
<div id="closeNotice"></div>
</div>
<ul>
<li class="spacer left"></li>
<li>
<a id="top-fp"
href="">Flowplayer</a>
</li>
<li>
<a id="top-jt"
class="active home" >jQuery Tools</a>
</li>
<li class="spacer right"></li>
<li id="login_link" class="linkOnly">
<a href="/account">Login</a>
</li>
<li id="logout_link" class="linkOnly">
<a href="/logout.html">Logout</a>
</li>
</ul>
<form id="top-search" action="/search.html">
<input type="text" placeholder="Search site" name="q" />
</form>
</div>
</div>
<div id="wrap">
<div id="nav" class="clear">
<ul>
<li class="active">
<a href="/">Home</a>
</li>
<li >
<a href="/demos">Demos</a>
</li>
<li >
<a href="/documentation">Documentation</a>
</li>
<li >
<a href="/forum">Forums</a>
</li>
<li id="download" >
<a href="/download">Download</a>
</li>
</ul>
</div>
<div id="content">
<script>$(function() { $("#jqt1").addClass("active"); });</script>
<style>
img {
border:0;
}
#scroll {
position:relative;
height:;
overflow:hidden;
border:1px solid #ddd;
width:948px;
padding:15px;
height:473px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#tools {
width:9999em;
position:absolute;
height:400px;
}
.tool {
float:left;
width:1000px;
height:340px;
text-align:center;
}
.details {
font-size:18px;
color:#555;
margin-top:-20px;
background-color:transparent;
padding:5px 148px;
}
#thumbs {
background:url(/media/img/demo-navi.jpg) no-repeat;
height:90px;
position:absolute;
top:425px;
width:990px;
left:-8px;
}
.t {
padding:0 !important;
border:0 !important;
}
.t a {
background:transparent url(/media/img/demo-navi.jpg) no-repeat scroll -21px -90px;
margin-left:11px;
display:block;
width:99px;
float:left;
height:90px;
cursor:pointer;
}
.t a.active {
cursor:default !important;
}
.navi {
margin-left:314px;
_margin-left:304px;
}
/* CSS sprite for the navigation */
#t0 { margin-left:20px; _margin-left:10px;}
#t0.active { background-position:-21px 0 !important; }
#t0:hover { background-position:-21px -180px; }
#t0:active { background-position:-21px -270px; }
#t1 { background-position:-325px -90px; }
#t1:hover { background-position:-325px -180px; }
#t1:active { background-position:-325px -270px; }
#t1.active { background-position:-325px 0 !important; }
#t2 { background-position:-435px -90px; }
#t2:hover { background-position:-435px -180px; }
#t2:active { background-position:-435px -270px; }
#t2.active { background-position:-435px 0 !important; }
#t3 { background-position:-545px -90px; }
#t3:hover { background-position:-545px -180px; }
#t3:active { background-position:-545px -270px; }
#t3.active { background-position:-545px 0 !important; }
#t4 { background-position:-655px -90px; }
#t4:hover { background-position:-655px -180px; }
#t4:active { background-position:-655px -270px; }
#t4.active { background-position:-655px 0 !important; }
#t5 { background-position:-765px -90px; }
#t5:hover { background-position:-765px -180px; }
#t5:active { background-position:-765px -270px; }
#t5.active { background-position:-765px 0 !important; }
#t6 { background-position:-875px -90px; }
#t6:hover { background-position:-875px -180px; }
#t6:active { background-position:-875px -270px; }
#t6.active { background-position:-875px 0 !important; }
</style>
<!-- root element for everything -->
<div id="scroll">
<!-- scrollable items -->
<div id="tools">
<!-- empty slot -->
<div class="tool">&nbsp;</div>
<!-- tabs -->
<div class="tool">
<a href="/tabs/index.html">
<img src="/media/img/hero/tabs.jpg"/></a>
<div class="details">
<strong>Tabs</strong> is the most popular JavaScript tool on
the web. Tabs, horizontal tabs and accordions, finally done
the right way.
</div>
</div>
<!-- tooltip -->
<div class="tool">
<a href="/tooltip/index.html">
<img src="/media/img/hero/tooltips.jpg"/></a>
<div class="details">
<strong>Tooltip</strong> helps you to build easier user
interfaces. Big or small. Pluggable effects. Yet another
crucial tool.
</div>
</div>
<!-- overlay -->
<div class="tool">
<a href="/overlay/index.html">
<img src="/media/img/hero/overlay.jpg"/></a>
<div class="details">
<strong>Overlay</strong> is a significant part of the
JavaScript/Web 2.0 landscape. This tool handles them all:
commercial overlays, modal dialogs and slideshows.
</div>
</div>
<!-- scrollable -->
<div class="tool">
<a href="/scrollable/index.html">
<img src="/media/img/hero/scrollable.jpg"/></a>
<div class="details">
<strong>Scrollable</strong> is the most successful tool in
this library. Any size and shape. Infinite loops and more.
</div>
</div>
<!-- FORM -->
<div class="tool">
<a href="/release-notes/index.html#form">
<img src="/media/img/hero/form.jpg"/></a>
<div class="details">
<strong>FORM</strong> is a collection of essential form
building tools. Validation, range- and date inputs for
humans. New wave form development is here.
</div>
</div>
<!-- toolbox -->
<div class="tool">
<a href="/toolbox/flashembed.html">
<img src="/media/img/hero/toolbox/toolbox.jpg"/></a>
<div class="details">
<strong>TOOLBOX</strong> is a set of small niceties. Take
control of the mousewheel and your browser's back
button. Embed Flash and place masks over your document.
</div>
</div>
<%--}}}--%>
</div>
<!-- intro "page" -->
<div id="intro" class="tool">
<img style="margin:-17px 0 28px 0" width="721" height="346"
alt="jQuery Tools. The ultimate UI library for web"
src="/media/img/hero/jquerytools.jpg" />
<div class="details">
<strong>jQuery Tools</strong> is a collection of the most
important user-interface components for modern websites. Used by
large sites all over the world.
</div>
</div>
<!-- required for IE6/IE7 -->
<br clear="all" />
<!-- thumbnails -->
<div id="thumbs" class="t">
<!-- intro page navi button -->
<a id="t0" class="active"></a>
<!-- scrollable navigator root element -->
<div class="navi">
<a style="display:none"></a>
<a id="t1"></a>
<a id="t2"></a>
<a id="t3"></a>
<a id="t4"></a>
<a id="t5"></a>
<a id="t6"></a>
</div>
</div>
</div>
<script>
// initialize scrollable and return the programming API
var api = $("#scroll").scrollable({
items: '#tools'
// use the navigator plugin
}).navigator().data("scrollable");
// this callback does the special handling of our "intro page"
api.onBeforeSeek(function(e, i) {
// when on the first item: hide the intro
if (i) {
$("#intro").fadeOut("slow");
// dirty hack for IE7-. cannot explain
if ($.browser.msie && $.browser.version < 8) {
$("#intro").hide();
}
// otherwise show the intro
} else {
$("#intro").fadeIn(1000);
}
// toggle activity for the intro thumbnail
$("#t0").toggleClass("active", i == 0);
});
// a dedicated click event for the intro thumbnail
$("#t0").click(function() {
// seek to the beginning (the hidden first item)
$("#scroll").scrollable().begin();
});
</script>
<a id="tease" href="release-notes/"></a>
<br clear="all" />
</div>
<div id="right">
<ul class="more_info">
<li>
<a href="https://github.com/jquerytools/jquerytools/issues">
report a bug &raquo;</a>
</li>
<li>
<a href="/release-notes/index.html">
<img src="/media/img/1.2/banner-small.jpg"
alt="Introducing jQuery Tools 1.2" />
</a>
</li>
<li>
<a href="/release-notes/version-1.2.x.html">
What's new in v1.2.6 &raquo; </a>
</li>
</ul>
</div>
</div>
<div id="bottom-wrap">
<div id="footer">
<div id="footerlinks">
<a href="http://twitter.com/jquerytools">Twitter feed</a>
&nbsp;|
<a href="https://github.com/jquerytools/jquerytools">
github repository
</a> &nbsp;|
<a href="https://github.com/jquerytools/jquerytools/issues">
report a bug
</a>
</div>
</div>
</div>
<script>
// toggle category
$("#right header").click(function() {
$(this).toggleClass("open");
$(this).next(".cat").toggleClass("active");
});
</script>
<script>
var _tracker = _gat._getTracker("");
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.