Display spuds in a tab, drop-down, or other hidden section of a web page

Steve A · July 12, 2012

To display a calendar in a section of a page, such as a tab or drop-down, that is hidden when the page first loads:

Use a call to the $Trumba.addSpud() method to load the calendar spud when a viewer first displays the hidden section.

For example, in the case of a tab control, use an event handler to make the call.
Provide the ID of the div (the tab, drop-down, or other section) that contains the spud by including the spudId argument in the $Trumba.addSpud() method.

For a demonstration of how to display a calendar in a tab, view the commented source code.

JQuery Tools tab control

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">'>http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Tools Tab Sample</title>
<link rel="stylesheet" href="http://jquerytools.org/media/css/tabs.css"/>
<link rel="stylesheet" href="http://jquerytools.org/media/css/tabs-panes.css"/>
<style type="text/css">.panes div { height: auto; }</style>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>'>http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
var calendarLoaded = false;
function addSpudToTab() {
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "main",
spudId: "divSpud"
});
calendarLoaded = true;
}
$(function () {
$("ul.tabs").tabs("div.panes > div", {
onClick: function (event, tabIndex) {
if (tabIndex == 1 && !calendarLoaded)
addSpudToTab();
}
});
});
</script>

<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Calendar Tab</a></li>
</ul>

<div class="panes">
<div>First tab contents.</div>
<div id="divSpud"></div>
</div>
</body>
</html>

JQuery UI tab control

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery UI Tab Sample</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />
<style type="text/css">.panes div { height: auto; }</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
var calendarLoaded = false;
function addSpudToTab() {
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "main",
spudId: "divSpud"
});
calendarLoaded = true;
}
$(function () {
$("#tabs").tabs({
select: function(event, ui) {
if (ui.index == 1 && !calendarLoaded)
addSpudToTab();
}
});
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Calendar Tab</a></li>
</ul>
<div id="tabs-1">
<p>First tab contents.</p>
</div>
<div id="tabs-2">
<div id="divSpud"></div>
</div>
</div>
</body>
</html>