Jump to content


Photo

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

Tab spud display

  • Please log in to reply
No replies to this topic

#1 Steve A

Steve A

    Advanced Member

  • Admin
  • PipPipPip
  • 349 posts
  • Gender:Male

Posted 12 July 2012 - 01:13 PM

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...nsitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Tools Tab Sample</title>
<link rel="stylesheet" href="http://jquerytools.o...css/tabs.css"/>
<link rel="stylesheet" href="http://jquerytools.o...bs-panes.css"/>
<style type="text/css">.panes div { height: auto; }</style>
<script src="http://cdn.jquerytoo...y.tools.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" src="http://www.trumba.co...s.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>
<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Calendar Tab</a></li>
</ul>
<!-- tab "panes" -->
<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...nsitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery UI Tab Sample</title>
<link rel="stylesheet" href="http://code.jquery.c.../jquery-ui.css" type="text/css" media="all" />
<style type="text/css">.panes div { height: auto; }</style>
<script src="http://ajax.googleap.../jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.c...uery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" src="http://www.trumba.co...s.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>

How the spud code works and how to customize it






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users