[% jquery.link_elements %] [% jquery.script_src_elements %]

Catalyst::View::Component::jQuery Demo

Navigation menu generated automatically from Catalyst application action attributes (MenuPath and MenuTitle).

[% menu %]

This page demonstrates the use of Catalyst::View::Component::jQuery to make a "jquery" method available in your TT templates.

CatalystX::Menu::Suckerfish is used to generate a Suckerfish-style menu from action attributes defined in the TestApp application. Modify the MenuPath and MenuTitle attributes and restart the application to see how the menu is automatically generated on-the-fly.

Running the testapp_server.pl script with the -r switch will automatically restart the script if you want a quick way to test changes.

The following three lines in the template print the html elements required to fetch the stylesheets and JavaScript files required by your jQuery plugins, and then the jQuery ready event. [% stag = "[\%" etag = "%\]" %]

[% stag; ' jquery.link_elements '; etag %]


<link type="text/css" href="/static/css/theme/jquery-ui.custom.css" rel="stylesheet" media="all" />
<link type="text/css" href="/static/css/superfish.css" rel="stylesheet" media="all" />
<link type="text/css" href="/static/css/superfish-vertical.css" rel="stylesheet" media="all" />
<link type="text/css" href="/static/css/superfish-navbar.css" rel="stylesheet" media="all" />
<link type="text/css" href="/static/site/css/superfish.css" rel="stylesheet" media="all" />
<link type="text/css" href="/static/site/css/superfish-skin.css" rel="stylesheet" media="all" />

[% stag; ' jquery.script_src_elements '; etag %]


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/static/js/hoverIntent.js"></script>
<script type="text/javascript" src="/static/js/superfish.js"></script>
<script type="text/javascript" src="/static/js/supersubs.js"></script>

[% stag; ' jquery.document_ready '; etag %]


<script type="text/javascript">
$(document).ready(function (){
minWidth : 12,
maxWidth : 13,
extraWidth : 1
delay : 500,
animation : { opacity : "show" },
dropShadows : true
[% jquery.document_ready %]