<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<script src= "Spryassets/sprytabbedpanels.js" type= "Text/javascript" ></script>
<link href= "Spryassets/sprytabbedpanels.css" rel= "stylesheet" type= "Text/css"/>
<body>
<div id= "TABBEDPANELS1" class= "Tabbedpanels" >
<ul class= "Tabbedpanelstabgroup" >
<li class= "Tabbedpanelstab" tabindex= "0" > Latest update </li>
<li class= "Tabbedpanelstab" tabindex= "0" > Industry news </li>
<li class= "Tabbedpanelstab" tabindex= "0" > Job search </li>
</ul>
<div class= "Tabbedpanelscontentgroup" >
<div class= "Tabbedpanelscontent" > Content 1</div>
<div class= "Tabbedpanelscontent" > Content 3</div>
<div class= "Tabbedpanelscontent" > Content 4</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<div id= "TabbedPanels2" class= "Tabbedpanels" >
<ul class= "Tabbedpanelstabgroup" >
<li class= "Tabbedpanelstab" tabindex= "0" >tab 1</li>
<li class= "Tabbedpanelstab" tabindex= "0" >tab 2</li>
</ul>
<div class= "Tabbedpanelscontentgroup" >
<div class= "Tabbedpanelscontent" > Content 1</div>
<div class= "Tabbedpanelscontent" > Content 2</div>
</div>
</div>
<p> </p>
<script type= "Text/javascript" >
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels ("TABBEDPANELS1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels ("TABBEDPANELS2");
-->
</script>
</body>
This is the CSS for this code
. Tabbedpanels {
margin:0px;
padding:0px;
Float:left;
Clear:none;
width:310px;
}
. Tabbedpanelstabgroup {
margin:0px;
padding:0px;
Background:url (.. /design/list_4.jpg);
width:310px;
}
. Tabbedpanelstab {
Background:url (.. /design/list_3.jpg);
position:relative;
top:0px;
Float:left;
PADDING:7PX 10px;
margin:0px 1px 0px 0px;
Font:bold 0.7em;
Font-weight:bold;
Color: #666666;
Background-color: #DDD;
List-style:none;
height:18px;
/*
Border-left:solid 1px #CCC;
Border-bottom:solid 1px #999;
Border-top:solid 1px #999;
Border-right:solid 1px #cfcfcf;
*/
-moz-user-select:none;
-khtml-user-select:none;
Cursor:pointer;
}
. Tabbedpanelstabhover {
Background-color: #FFFFFF;
}
. tabbedpanelstabselected {
Background:url (.. /design/focus.jpg);
width:60px;
Color: #FFFFFF;
}
. Tabbedpanelstab a {
Color:black;
Text-decoration:none;
}
. Tabbedpanelscontentgroup {
Clear:both;
}
. tabbedpanelscontent {
padding:4px;
}
. tabbedpanelscontentvisible {
}
. Vtabbedpanels. Tabbedpanelstabgroup {
Float:left;
Width:10em;
Height:20em;
Background-color: #EEE;
position:relative;
Border-top:solid 1px #999;
Border-right:solid 1px #999;
Border-left:solid 1px #CCC;
Border-bottom:solid 1px #CCC;
}
. Vtabbedpanels. Tabbedpanelstab {
Float:none;
margin:0px;
Border-top:none;
Border-left:none;
Border-right:none;
}
. Vtabbedpanels. tabbedpanelstabselected {
Background-color: #EEE;
Border-bottom:solid 1px #999;
}
. Vtabbedpanels. Tabbedpanelscontentgroup {
Clear:none;
Float:left;
padding:0px;
Width:30em;
Height:20em;
}
Here's a look at JS
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 The "the" 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 The DefaultTab is expressed as a number/index, convert
it to an element.
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];
}
The DefaultTab property are supposed to being the tab element for the tab content
To show by default. The caller is allowed into the element itself or the
Element ' s ID, so we need to convert the "current value to" an element if necessary.
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[i])
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); );
Spry.Widget.TabbedPanels.addEventListener (tab, "Mouseout", function (e) {return self.ontabmouseout (e, tab);}, False);
if (this.enablekeyboardnavigation)
{
Xxx:ie doesn ' t allow the setting of TabIndex dynamically. This means we can ' t
Rely on adding the TabIndex attribute if it's missing to enable keyboard navigation
By default.
Find the the "Within" tab container that has a tabindex or the
Anchor tag.
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 is 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[i])
This.removeclassname (Tabs[i], this.tabselectedclass);
if (Panels[i])
{
This.removeclassname (Panels[i], this.panelvisibleclass);
Panels[i].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[i], panels[i]);
This.showpanel (This.defaulttab);
};
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
