Codice PHP:
function tabberObj(argsObj)
{
var arg; /* name of an argument to override */
/* Element for the main tabber div. If you supply this in argsObj,
then the init() method will be called.
*/
this.div = null;
/* Class of the main tabber div */
this.classMain = "tabber";
/* Rename classMain to classMainLive after tabifying
(so a different style can be applied)
*/
this.classMainLive = "tabberlive";
/* Class of each DIV that contains a tab */
this.classTab = "tabbertab";
/* Class to indicate which tab should be active on startup */
this.classTabDefault = "tabbertabdefault";
/* Class for the navigation UL */
this.classNav = "tabbernav";
/* When a tab is to be hidden, instead of setting display='none', we
set the class of the div to classTabHide. In your screen
stylesheet you should set classTabHide to display:none. In your
print stylesheet you should set display:block to ensure that all
the information is printed.
*/
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
/* If you want to add an id to each link set this to true */
this.addLinkId = false;
/* If addIds==true, then you can set a format for the ids.
<tabberid> will be replaced with the id of the main tabber div.
<tabnumberzero> will be replaced with the tab number
(tab numbers starting at zero)
<tabnumberone> will be replaced with the tab number
(tab numbers starting at one)
<tabtitle> will be replaced by the tab title
(with all non-alphanumeric characters removed)
*/
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
/* You can override the defaults listed above by passing in an object:
var mytab = new tabber({property:value,property:value});
*/
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
/* Array of objects holding info about each tab */
this.tabs = new Array();
/* If the main tabber div was specified, call init() now */
if (this.div) {
this.init(this.div);
/* We don't need the main div anymore, and to prevent a memory leak
in IE, we must remove the circular reference between the div
and the tabber object. */
this.div = null;
}
}
tabberObj.prototype.init = function(e)
{
/* Set up the tabber interface.
e = element (the main containing div)
Example:
init(document.getElementById('mytabberdiv'))
*/
var
childNodes, /* child nodes of the tabber div */
i, i2, /* loop indices */
t, /* object to store info about a single tab */
defaultTab = 0, /* which tab to select by default */
DOM_ul, /* tabbernav list */
DOM_li, /* tabbernav list item */
DOM_a, /* tabbernav link */
aId, /* A unique id for DOM_a */
headingElement; /* searching for text to use in the tab */
/* Verify that the browser supports DOM scripting */
if (!document.getElementsByTagName) { return false; }
/* If the main DIV has an ID then save it. */
if (e.id) {
this.id = e.id;
}
/* Clear the tabs array (but it should normally be empty) */
this.tabs.length = 0;
/* Loop through an array of all the child nodes within our tabber element. */
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
/* Find the nodes where class="tabbertab" */
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
/* Create a new object to save info about this tab */
t = new Object();
/* Save a pointer to the div for this tab */
t.div = childNodes[i];
/* Add the new object to the array of tabs */
this.tabs[this.tabs.length] = t;
/* If the class name contains classTabDefault,
then select this tab by default.
*/
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
/* Create a new UL list to hold the tab headings */
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
/* Loop through each tab we found */
for (i=0; i < this.tabs.length; i++) {
t = this.tabs[i];
/* Get the label to use for this tab:
From the title attribute on the DIV,
Or from one of the this.titleElements[] elements,
Or use an automatically generated number.
*/
t.headingText = t.div.title;
/* Remove the title attribute to prevent a tooltip from appearing */
if (this.removeTitle) { t.div.title = ''; }
if (!t.headingText) {
/* Title was not defined in the title of the DIV,
So try to get the title from an element within the DIV.
Go through the list of elements in this.titleElements
(typically heading elements ['h2','h3','h4'])
*/
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/
/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}
if (!t.headingText) {
/* Title was not found (or is blank) so automatically generate a
number for the tab.
*/
t.headingText = i + 1;
}
/* Create a list element for the tab */
DOM_li = document.createElement("li");
/* Save a reference to this list item so we can later change it to
the "active" class */
t.li = DOM_li;
/* Create a link to activate the tab */
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
DOM_a.tabber = this;
DOM_a.tabberIndex = i;
/* Do we need to add an id to DOM_a? */
if (this.addLinkId && this.linkIdFormat) {
/* Determine the id name */
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
DOM_a.id = aId;
}
/* Add the link to the list element */
DOM_li.appendChild(DOM_a);
/* Add the list element to the list */
DOM_ul.appendChild(DOM_li);
}
/* Add the UL list to the beginning of the tabber div */
e.insertBefore(DOM_ul, e.firstChild);
/* Make the tabber div "live" so different CSS can be applied */
e.className = e.className.replace(this.REclassMain, this.classMainLive);
/* Activate the default tab, and do not call the onclick handler */
this.tabShow(defaultTab);
/* If the user specified an onLoad function, call it now. */
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}
return this;
};
tabberObj.prototype.navClick = function(event)
{
var
rVal, /* Return value from the user onclick function */
a, /* element that triggered the onclick event */
self, /* the tabber object */
tabberIndex, /* index of the tab that triggered the event */
onClickArgs; /* args to send the onclick function */
a = this;
if (!a.tabber) { return false; }
self = a.tabber;
tabberIndex = a.tabberIndex;
/* Remove focus from the link because it looks ugly.
I don't know if this is a good idea...
*/
a.blur();
/* If the user specified an onClick function, call it now.
If the function returns false then do not continue.
*/
if (typeof self.onClick == 'function') {
onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }
rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}
//gestione frame per cookies
self.tabShow(tabberIndex);
return false;
};
tabberObj.prototype.tabHideAll = function()
{
var i; /* counter */
/* Hide all tabs and make all navigation links inactive */
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
/* Hide a single tab and make its navigation link inactive */
div = this.tabs[tabberIndex].div;
/* Hide the tab contents by adding classTabHide to the div */
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
/* Show the tabberIndex tab and hide all the other tabs */
var div;
if (!this.tabs[tabberIndex]) { return false; }
/* Hide all the tabs first */
this.tabHideAll();
/* Get the div that holds this tab */
div = this.tabs[tabberIndex].div;
/* Remove classTabHide from the div */
div.className = div.className.replace(this.REclassTabHide, '');
/* Mark this tab navigation link as "active" */
this.navSetActive(tabberIndex);
/* If the user specified an onTabDisplay function, call it now. */
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that only one nav item can be active at a time.
*/
/* Set classNavActive for the navigation list item */
this.tabs[tabberIndex].li.className = this.classNavActive;
return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that one nav should always be active.
*/
/* Remove classNavActive from the navigation list item */
this.tabs[tabberIndex].li.className = '';
return this;
};
function tabberAutomatic(tabberArgs)
{
/* This function finds all DIV elements in the document where
class=tabber.classMain, then converts them to use the tabber
interface.
tabberArgs = an object to send to "new tabber()"
*/
var
tempObj, /* Temporary tabber object */
divs, /* Array of all divs on the page */
i; /* Loop index */
if (!tabberArgs) { tabberArgs = {}; }
/* Create a tabber object so we can get the value of classMain */
tempObj = new tabberObj(tabberArgs);
/* Find all DIV elements in the document that have class=tabber */
/* First get an array of all DIV elements and loop through them */
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
/* Is this DIV the correct class? */
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
/* Now tabify the DIV */
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
/* This function adds tabberAutomatic to the window.onload event,
so it will run after the document has finished loading.
*/
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
/* Taken from: [url]http://simon.incutio.com/archive/2004/05/26/addLoadEvent[/url] */
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
}
}
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}
per favore...abbiate la gentilezza di testarlo... Le immagini di background del css....mettete quelle che volete, fate tipo un img con su una riga...non e' importante
Rispondi quotando
