Jump to content
Sign in to follow this  
Steve A

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

Recommended Posts

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>
<!-- 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/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>

 

How the spud code works and how to customize it

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...