J'utilise un javascript qui fait ce genre de chose (tab) :
http://dhtmlkitchen.com/scripts/tabs/Ta ... ested.html
et j'aimerais savoir comment faire pour que les tab soie fixe et ne varie plus en fonction du texte affiché.
pouvez vous m'aider?
merci d'avance et a+
Voici le code :
Code : Tout sélectionner
/**
* Copyright©2001 Garrett Smith
* Web:http://dhtmlitchen.com/
*
* Last Modified:Sept 22, 2002.
*/
Browser={
isSupported:function(){
return(Boolean(document.getElementsByTagName)&&Boolean(document.getElementById));
},
id:new function(){
var ua=navigator.userAgent;
var OMNI=ua.indexOf("Omni")>0;
this.OPERA=ua.indexOf("Opera")>=0;
this.MAC=ua.indexOf("Mac")>0;
if(!this.OPERA&&!OMNI){
this.IE5=ua.indexOf("MSIE 5")>0;
this.IE5_0=ua.indexOf("MSIE 5.0")>0;
this.NS6=ua.indexOf("Gecko")>0;
this.MOZ=this.NS6&&ua.indexOf("Netscape")==-1;
this.MAC_IE5=this.MAC>0&&this.IE5;
this.IE6=ua.indexOf("MSIE 6")>0;
}}
};
var tabs, tabsClone, tabArray, activeTab, relatedTab=null;
TabParams={
useCloneOnBottom:false,
showRemoveLink:false, /* mettre à true pour afficher le bouton "Afficher tout". Modifié pour base Prestations BCVd*/
alwaysShowClone:false
};
function tabInit(){
if(window.tabInited)return;
if(!document.createElement||Browser.id.OPERA){
TabParams.useCloneOnBottom=false;
TabParams.alwaysShowClone=false;
TabParams.showRemoveLink=true;
}
tabs=document.getElementById('tabs');
tabs.getElementsWithClass=get_elements_with_class_from_classList;
if(Browser.id.OPERA&&!Browser.id.IE5){
tabArray=tabs.getElementsByTagName("span");
activeTab=tabArray[0];
}
else {
tabArray=tabs.getElementsWithClass("*", ["tab", "tabActive"]);
activeTab=tabs.getElementsWithClass("*", "tabActive")[0]||tabArray[0];
}
tabArray.isImg=tabArray[0].tagName.toLowerCase()=="img";
IE5_0noImg=(Browser.id.IE5_0&&!tabArray.isImg&&!Browser.id.MAC);
if(!Boolean(tabs.cloneNode)||!Boolean(tabs.cloneNode(true))||tabArray.isImg)TabParams.useCloneOnBottom=false;
if(TabParams.useCloneOnBottom){
tabsClone=document.body.appendChild(tabs.cloneNode(true));
tabsClone.className="tabsClone";
tabsClone.getElementsWithClass=get_elements_with_class_from_classList;
tabsCloneArray=tabsClone.getElementsWithClass("*", ["tab", "tabActive"]);
}
for(var i=0;i<tabArray.length; i++){
var _tab;
if(!Browser.id.OPERA){
_tab=tabArray[i];
_tab.content=document.getElementById("content"+(i+1));
}
else {
_tab=document.getElementById("tab"+(i+1));
_tab.num=i+1;
}
if(TabParams.useCloneOnBottom)tabsCloneArray[i].content=document.getElementById("content"+(i+1));
if(_tab.tagName.toLowerCase()=="img"){
_tab["normalsrc"]=new String(_tab.src);
_tab.hover=new Image();
_tab.hover.src=_tab.getAttribute("hoversrc");
_tab.active=new Image();
_tab.active.src=_tab.getAttribute("activesrc");
}
if(_tab.addEventListener){
_tab.addEventListener("mouseover", hoverTab ,false);
_tab.addEventListener("mouseout", hoverOff ,false);
_tab.addEventListener("mousedown", depressTab ,false);
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].addEventListener("mouseover", hoverTab ,false);
tabsCloneArray[i].addEventListener("mouseout", hoverOff ,false);
tabsCloneArray[i].addEventListener("mousedown", depressClonedTab ,false);
}}
else {
_tab.onmouseover=hoverTab;
_tab.onmouseout=hoverOff;
_tab.onmousedown=depressTab;
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].onmouseover=hoverTab;
tabsCloneArray[i].onmouseout=hoverOff;
tabsCloneArray[i].onmousedown=depressClonedTab;
}}
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].depressTab=depressClonedTab;
tabsCloneArray[i].controller=_tab;
_tab.bottomTab=tabsCloneArray[i];
}
_tab.depressTab=depressTab;
if(TabParams.showRemoveLink){
_tab.content.appendChild(document.createElement("br"));
removeTabLink=_tab.content.removeTabLink=_tab.content.appendChild(document.createElement("a"));
removeTabLink.id="removeTabLink"+(i+1);
removeTabLink.href="javascript:removeTabs("+(i+1)+")";
removeTabLink.appendChild(document.createTextNode("Afficher tout"));
removeTabLink.className="removeTab";
}
if(IE5_0noImg){
tabs.tabOffset=tabs.tabOffset?tabs.tabOffset:0;
var tabWidth=_tab.offsetWidth+18;
_tab.style.left=tabs.tabOffset+"px";
_tab.style.width=tabWidth+"px";
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].style.left=tabs.tabOffset+"px";
tabsCloneArray[i].style.width=tabWidth+"px";
}
_tab.style.display="block";
_tab.style.position="absolute";
_tab.style.whiteSpace="nowrap";
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].style.display="block";
tabsCloneArray[i].style.position="absolute";
tabsCloneArray[i].style.whiteSpace="nowrap";
}
tabs.tabOffset+=parseInt(_tab.offsetWidth)+4;
}
if(Browser.id.MAC_IE5&&TabParams.useCloneOnBottom)tabsCloneArray[i].innerHTML=_tab.innerHTML;
}
tabs.onchange=new Function();
var q=String(window.location.search);
if(q&&q.indexOf("tab=")>0)switchTabs(q.substring(q.indexOf("tab=")+4,q.indexOf("tab=")+8));
else if(window.location.hash!=""){
var hash=window.location.hash;
var el=document.getElementById(hash.substring(1));
if(el==null)return;
var content=findAncestorWithClass(el, "content");
if(content!=null&&Boolean(content.id)&&content.id.indexOf("content")==0){
var num=content.id.substring("content".length);
switchTabs("tab"+num, null, hash);
el=content=num=null;
}}
if(tabArray.isImg)activeTab.src=activeTab.getAttribute("activesrc");
else{
activeTab.className="tab tabActive";
if(TabParams.useCloneOnBottom)activeTab.bottomTab.className=activeTab.className;
}
if(Browser.id.IE5_0&&!Browser.id.MAC&&!tabArray.isImg)window.defaultStatus="IE 5.0 does not support inline boxes. "+"Please upgrade to IE 5.5 or 6.0 for better performance.";
if(TabParams.useCloneOnBottom){
setTabsClonePosition();
tabsClone.style.height=(activeTab.offsetHeight+1)+"px";
showTabsCloneIfNecessary();
if(window.addEventListener)window.addEventListener("resize",updateTabsClonePosition, false);
else window.onresize=updateTabsClonePosition;
}
window.tabInited=true;
}
function updateTabsClonePosition(e){
if(activeTab!=null)setTimeout("setTabsClonePosition();",500);
}
function setTabsClonePosition(){
var adjustment=0;
if(Browser.id.MAC_IE5)adjustment=-1 *
parseInt(activeTab.content.currentStyle.paddingBottom);
else if(Browser.id.IE5_0)adjustment=0;
else adjustment=1;
tabsClone.style.top=(activeTab.content.offsetHeight+activeTab.content.offsetTop+adjustment)+"px";
}
function showTabsCloneIfNecessary(){
var contentBottom=activeTab.content.offsetTop+activeTab.content.offsetHeight;
var visibility=(contentBottom>getViewportHeight()||TabParams.alwaysShowClone)?"visible":"hidden";
tabsClone.style.visibility=visibility;
}
function switchTabs(tab,e){
if(typeof document.getElementById=="undefined")return true;
var el=(arguments.length==3&&typeof arguments[2]=="string")?document.getElementById(arguments[2].substring(1)):null;
var booleanReturnValue=(arguments.length==3&&arguments[2]==true)?true:false;
try{
document.getElementById(tab).depressTab(e);
}
catch(exception){}
if(!el&&!booleanReturnValue){
window.scrollTo(0,0);
return false;
}
else if(el!=null)scrollToElement(el);
if(booleanReturnValue)return booleanReturnValue;
}
function scrollToElement(el){
try{
if(typeof el.scrollIntoView=="function")el.scrollIntoView();
else
window.location.hash="#"+el.id;
}
catch(ex){}}
function hoverTab(){
if(activeTab==this||activeTab==this.controller)return;
this.className="tabHover tab";
this.src=this.getAttribute("hoversrc");
if(TabParams.useCloneOnBottom){
if(this.bottomTab)this.bottomTab.className="tabHover tab";
else this.controller.className="tabHover tab";
}}
function hoverOff(){
if(activeTab==this||activeTab==this.controller)return;
this.className="tab";
this.src=this["normalsrc"];
if(TabParams.useCloneOnBottom){
if(this.bottomTab)this.bottomTab.className="tab";
else this.controller.className="tab";
}}
function depressTab(e){
if(activeTab==this)return;
relatedTab=activeTab;
this.className="tab";
this.className="tab tabActive";
this.src=this.getAttribute("activesrc");
if(activeTab)resetTab(activeTab);
activeTab=this;
tabs.onchange(e);
if(!Browser.id.OPERA){
if(!Browser.id.MAC_IE5)this.content.style.display="block";
this.content.style.visibility="visible";
}
else document.getElementById("content"+this.num).style.visibility="visible";
if(TabParams.useCloneOnBottom){
setTabsClonePosition();
this.bottomTab.className=this.className;
showTabsCloneIfNecessary();
}}
function depressClonedTab(e){
if(activeTab==this.controller)return;
this.controller.depressTab(e);
this.className="tab";
this.className="tab tabActive";
window.scrollTo(0,(tabsClone.offsetTop+tabsClone.offsetHeight)-getViewportHeight());
}
function resetTab(tab){
tab.className="tab";
tab.src=tab["normalsrc"];
if(activeTab.bottomTab)activeTab.bottomTab.className="tab";
if(!Browser.id.OPERA){
if(!Browser.id.MAC_IE5)tab.content.style.display="none";
tab.content.style.visibility="hidden";
}
else document.getElementById("content"+tab.num).style.visibility="hidden";
}
get_elements_with_class_from_classList=function(tagName, classList){
var returnedCollection=new Array(0);
var collection=(this.all&&tagName=="*")?this.all:this.getElementsByTagName(tagName);
for(var i=0; i<collection.length; i++)jloop:for(var j=0;j<classList.length; j++)if(collection[i].className.test(classList[j], " ")){
returnedCollection[returnedCollection.length]=collection[i];
break jloop;
}
return returnedCollection;
};
if(!String.prototype.test){
String.prototype.test=function(inp, delim){
var exps=getTokenizedExps(inp, delim);
return(exps.global.test(this)||exps.ends.test(this));
};
function getTokenizedExps(inp, delim){
return {
global:new RegExp(delim+inp+delim, "\g"),
ends:new RegExp("^"+inp+delim+"|^"+inp+"$|"+delim+inp+"$", "\g")};
}}
function findAncestorWithClass(el, klass){
for(var parent=el;parent!=null;){
if(parent.className!=null&&parent.className.test(klass, " "))return parent;
parent=parent.parentNode;
}
return null;
};
function getScrollTop(){
if(Browser.id.NS6)return(window.pageYOffset);
if(document.documentElement.scrollTop)return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
else if(document.body.scrollTop)return(document.body.scrollTop);
}
function getViewportHeight(){
if(Browser.id.NS6)return window.innerHeight;
if(Browser.id.IE6)return Math.max(document.documentElement.clientHeight, document.body.clientHeight);
return document.body.clientHeight-2;
}
function removeTabs(index){
var noScrollFlag=activeTab.id=="tab1";
resetTab(activeTab);
var removeTabLink;
for(var i=0; i<tabArray.length; i++)if(Boolean(tabArray[i].content)&&tabArray[i].content.style){
tabArray[i].content.style.position="relative";
if(i!=0){
tabArray[i].content.style.borderTopWidth="0";
tabArray[i].content.style.marginTop="0";
if(!Browser.id.MOZ)tabArray[i].content.style.top="0";
}
if(i!=tabArray.length-1)tabArray[i].content.style.borderBottomWidth="0";
else tabArray[i].content.style.marginBottom="10px";
if(!Browser.id.MAC_IE5)tabArray[i].content.style.display="block";
tabArray[i].content.style.visibility="visible";
removeTabLink=tabArray[i].content.removeTabLink;
if(removeTabLink!=null&&removeTabLink.firstChild!=null&&removeTabLink.firstChild.nodeName=="#text"){
var newIndex=parseInt(removeTabLink.id.substring(removeTabLink.id.length-1));
if(newIndex<tabArray.length-1)newIndex+=1;
removeTabLink.href="javascript:undoRemoveTabs('tab"+newIndex+"')";
removeTabLink.firstChild.nodeValue="Afficher condense";
}
if(Browser.id.NS6)tabArray[tabArray.length-1].content.style.marginBottom=tabArray[0].content.offsetTop+"px";
}
tabs.style.display="none";
if(TabParams.useCloneOnBottom)tabsClone.style.display="none";
if(noScrollFlag)return;
if(Browser.id.MOZ)window.scrollTo(0, document.getElementById("content"+index).offsetTop);
else window.location.hash='content'+index;
}
function undoRemoveTabs(sTabToActivate){
for(var i=0; i<tabArray.length; i++){
if(Boolean(tabArray[i].content)&&tabArray[i].content.style){
tabArray[i].content.style.position="absolute";
if(i!=0){
tabArray[i].content.style.top="";
tabArray[i].content.style.borderTopWidth="";
}
if(i!=tabArray.length-1)tabArray[i].content.style.borderBottomWidth="";
else tabArray[i].content.style.marginBottom="";
if(!Browser.id.MAC_IE5)tabArray[i].content.style.display="none";
tabArray[i].content.style.visibility="hidden";
var removeTabLink=tabArray[i].content.removeTabLink;
if(removeTabLink!=null&&removeTabLink.firstChild!=null&&removeTabLink.firstChild.nodeName=="#text"){
removeTabLink.firstChild.nodeValue="Afficher tout";
removeTabLink.href="javascript:removeTabs("+(i+1)+")";
}}
}
tabs.style.display="block";
if(TabParams.useCloneOnBottom)tabsClone.style.display="block";
activeTab=null;
switchTabs(sTabToActivate, null);
activeTab=document.getElementById(sTabToActivate);
if(Browser.id.NS6)tabArray[tabArray.length-1].content.style.marginBottom="";
}
