Jump to content

Recommended Posts

Posted

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

 Examples

 

https://www.trumba.com/demo/TabSampleJQueryUI.htm

https://www.trumba.com/demo/TabSampleJQueryTools.htm

 

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...
×
×
  • Create New...