Jump to content

Tab automatic open onmouseover


robert_gsfame

Recommended Posts

I use dreamweaver to create the tabpanel for me, and the problem now is that i wish to have my tab automatically open onmouse over.....can anyone help me...i am really new to javascript,..thx in advance

 

 

below is the code:

 

var Spry;

if (!Spry) Spry = {};

if (!Spry.Widget) Spry.Widget = {};

 

Spry.Widget.TabbedPanels = function(element, opts)

{

this.element = this.getElement(element);

this.defaultTab = 0; // Show the first panel by default.

this.bindings = [];

this.tabSelectedClass = "TabbedPanelsTabSelected";

this.tabHoverClass = "TabbedPanelsTabHover";

this.tabFocusedClass = "TabbedPanelsTabFocused";

this.panelVisibleClass = "TabbedPanelsContentVisible";

this.focusElement = null;

this.hasFocus = false;

this.currentTabIndex = 0;

this.enableKeyboardNavigation = true;

 

Spry.Widget.TabbedPanels.setOptions(this, opts);

if (typeof (this.defaultTab) == "number")

{

if (this.defaultTab < 0)

this.defaultTab = 0;

else

{

var count = this.getTabbedPanelCount();

if (this.defaultTab >= count)

this.defaultTab = (count > 1) ? (count - 1) : 0;

}

 

this.defaultTab = this.getTabs()[this.defaultTab];

}

 

if (this.defaultTab)

this.defaultTab = this.getElement(this.defaultTab);

 

this.attachBehaviors();

};

 

Spry.Widget.TabbedPanels.prototype.getElement = function(ele)

{

if (ele && typeof ele == "string")

return document.getElementById(ele);

return ele;

}

 

Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)

{

var children = [];

var child = element.firstChild;

while (child)

{

if (child.nodeType == 1 /* Node.ELEMENT_NODE */)

children.push(child);

child = child.nextSibling;

}

return children;

};

 

Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)

{

if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))

return;

ele.className += (ele.className ? " " : "") + className;

};

 

Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)

{

if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))

return;

ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");

};

 

Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)

{

if (!optionsObj)

return;

for (var optionName in optionsObj)

{

if (ignoreUndefinedProps && optionsObj[optionName] == undefined)

continue;

obj[optionName] = optionsObj[optionName];

}

};

 

Spry.Widget.TabbedPanels.prototype.getTabGroup = function()

{

if (this.element)

{

var children = this.getElementChildren(this.element);

if (children.length)

return children[0];

}

return null;

};

 

Spry.Widget.TabbedPanels.prototype.getTabs = function()

{

var tabs = [];

var tg = this.getTabGroup();

if (tg)

tabs = this.getElementChildren(tg);

return tabs;

};

 

Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()

{

if (this.element)

{

var children = this.getElementChildren(this.element);

if (children.length > 1)

return children[1];

}

return null;

};

 

Spry.Widget.TabbedPanels.prototype.getContentPanels = function()

{

var panels = [];

var pg = this.getContentPanelGroup();

if (pg)

panels = this.getElementChildren(pg);

return panels;

};

 

Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)

{

ele = this.getElement(ele);

if (ele && arr && arr.length)

{

for (var i = 0; i < arr.length; i++)

{

if (ele == arr)

return i;

}

}

return -1;

};

 

Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)

{

var i = this.getIndex(ele, this.getTabs());

if (i < 0)

i = this.getIndex(ele, this.getContentPanels());

return i;

};

 

Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()

{

return this.currentTabIndex;

};

 

Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)

{

return Math.min(this.getTabs().length, this.getContentPanels().length);

};

 

Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)

{

try

{

if (element.addEventListener)

element.addEventListener(eventType, handler, capture);

else if (element.attachEvent)

element.attachEvent("on" + eventType, handler);

}

catch (e) {}

};

 

Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)

{

this.showPanel(tab);

};

 

Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)

{

this.addClassName(tab, this.tabHoverClass);

};

 

Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)

{

this.removeClassName(tab, this.tabHoverClass);

};

 

Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)

{

this.hasFocus = true;

this.addClassName(this.element, this.tabFocusedClass);

};

 

Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)

{

this.hasFocus = false;

this.removeClassName(this.element, this.tabFocusedClass);

};

 

Spry.Widget.TabbedPanels.ENTER_KEY = 13;

Spry.Widget.TabbedPanels.SPACE_KEY = 32;

 

Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)

{

var key = e.keyCode;

if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))

return true;

 

this.showPanel(tab);

 

if (e.stopPropagation)

e.stopPropagation();

if (e.preventDefault)

e.preventDefault();

 

return false;

};

 

Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)

{

var stopTraversal = false;

if (root)

{

stopTraversal = func(root);

if (root.hasChildNodes())

{

var child = root.firstChild;

while (!stopTraversal && child)

{

stopTraversal = this.preorderTraversal(child, func);

try { child = child.nextSibling; } catch (e) { child = null; }

}

}

}

return stopTraversal;

};

 

Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)

{

var self = this;

Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);

Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);

Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);

 

if (this.enableKeyboardNavigation)

{

 

 

var tabIndexEle = null;

var tabAnchorEle = null;

 

this.preorderTraversal(tab, function(node) {

if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)

{

var tabIndexAttr = tab.attributes.getNamedItem("tabindex");

if (tabIndexAttr)

{

tabIndexEle = node;

return true;

}

if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")

tabAnchorEle = node;

}

return false;

});

 

if (tabIndexEle)

this.focusElement = tabIndexEle;

else if (tabAnchorEle)

this.focusElement = tabAnchorEle;

 

if (this.focusElement)

{

Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);

Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);

Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);

}

}

};

 

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)

{

var tpIndex = -1;

 

if (typeof elementOrIndex == "number")

tpIndex = elementOrIndex;

else // Must be the element for the tab or content panel.

tpIndex = this.getTabIndex(elementOrIndex);

 

if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())

return;

 

var tabs = this.getTabs();

var panels = this.getContentPanels();

 

var numTabbedPanels = Math.max(tabs.length, panels.length);

 

for (var i = 0; i < numTabbedPanels; i++)

{

if (i != tpIndex)

{

if (tabs)

this.removeClassName(tabs, this.tabSelectedClass);

if (panels)

{

this.removeClassName(panels, this.panelVisibleClass);

panels.style.display = "none";

}

}

}

 

this.addClassName(tabs[tpIndex], this.tabSelectedClass);

this.addClassName(panels[tpIndex], this.panelVisibleClass);

panels[tpIndex].style.display = "block";

 

this.currentTabIndex = tpIndex;

};

 

Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)

{

var tabs = this.getTabs();

var panels = this.getContentPanels();

var panelCount = this.getTabbedPanelCount();

 

for (var i = 0; i < panelCount; i++)

this.addPanelEventListeners(tabs, panels);

 

this.showPanel(this.defaultTab);

};

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.