The jQuery Tools library includes a suppleemntary toolbox containing utilities that enhance the core components. This section covers FlashEmbed for embedding Flash content and the History plugin for managing browser navigation.
Embedding Flash with FlashEmbed
FlashEmbed provides a consistent method to embed Flash movies across different browsers, handling the varying embed code requirements internally.
Implementation
Include the FlashEmbed script and a container element in your HTML:
<script src="toolbox.flashembed.min.js"></script>
<div id="mediaContainer"></div>
Embed the Flash file using JavaScript:
flashembed("mediaContainer", "/media/player.swf");
Ensure this call is placed after the container element or within a $(document).ready() block.
Example: Embedding a Flash Video
A basic setup demonstrates FlashEmbed usage:
<html>
<head>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style>
#videoArea {
width: 787px;
height: 300px;
background-image: url(splash.jpg);
text-align: center;
cursor: pointer;
}
#videoArea img { margin-top: 110px; }
</style>
</head>
<body>
<div id="videoArea">
<img src="play_button.png" alt="Play" />
</div>
<script>
$(function() {
$("#videoArea").click(function() {
$(this).flashembed("http://static.flowplayer.org/swf/flash10.swf");
});
});
</script>
</body>
</html>
Considerations
Flash technology is being supplanted by HTML5 features like <video> and <canvas>. FlashEmbed remains useful for supporting legacy browsers, but its long-term relevance is diminishing as HTML5 adoption grows.
Managing Navigation with the History Plugin
The History plugin enables control over browser history, allowing backward and forward navigation within page components like tabs.
Usage
Typically integrated as a configuration option in tools like Tabs:
$(function() {
$("#contentTabs").tabs(".tabPane", { history: true });
});
When enabled, browser navigation buttons cycle through visited tabs, and URLs include hash fragments (e.g., page.html#tab2) for bookmarking and direct access.
Notes
The current implementation supports standard hash formats but may not handle all HTML5 history patterns. It functions primarily as a helper within other jQuery Tools components.
Expose Utility for Highlighting Content
Expose dims page backgrounds to highlight specific elements, often used with the Overlay tool. It operates via mask() for full-page overlays and expose() for targeting elements.
Basic Commands
// Apply a white mask
$(document).mask();
// Apply a custom-colored mask
$(document).mask("#789");
// Highlight elements while masking the rest
$(".highlight").expose();
// Close the mask
$.mask.close();
Example: Video Overlay with Expose
Combining Expose with Overlay to display video content:
<button rel="#videoOverlay1">Play Video 1</button>
<button rel="#videoOverlay2">Play Video 2</button>
<div class="overlay" id="videoOverlay1">
<a class="mediaPlayer" href="video.flv"></a>
</div>
<div class="overlay" id="videoOverlay2">
<a class="mediaPlayer" href="video.flv"></a>
</div>
<script>
$(function() {
$("button[rel]").overlay({
effect: 'apple',
expose: '#789',
onLoad: function() {
this.getOverlay().find("a.mediaPlayer").flowplayer(0).load();
},
onClose: function() {
$f().unload();
}
});
$("a.mediaPlayer").flowplayer("flowplayer.swf");
});
</script>
Mousewheel Integration
The mousewheel utility enables scroll navigation control, typically configured within tools like Scrollable:
$("#scrollableArea").scrollable({ circular: true, mousewheel: true });
Standalone usage is possible but less common:
$("#element").mousewheel(function(event, delta) {
// delta positive for up, negative for down
});