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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×