Se connecter avec
S'enregistrer | Connectez-vous

javascript - tab fixe

Dernière réponse : dans Programmation

Hello,

J'utilise un javascript qui fait ce genre de chose (tab) :

http://dhtmlkitchen.com/scripts/tabs/Tabs/demo/nested.h...

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 :
  1. /**
  2. * Copyright©2001 Garrett Smith
  3. * Web:<a href="http://dhtmlitchen.com/" target="_blank">http://dhtmlitchen.com/</a>
  4. *
  5. * Last Modified:Sept 22, 2002.
  6. */
  7. Browser={
  8. isSupported:function(){
  9. return(Boolean(document.getElementsByTagName)&&Boolean(document.getElementById));
  10. },
  11. id:new function(){
  12. var ua=navigator.userAgent;
  13. var OMNI=ua.indexOf("Omni")>0;
  14. this.OPERA=ua.indexOf("Opera")>=0;
  15. this.MAC=ua.indexOf("Mac")>0;
  16. if(!this.OPERA&&!OMNI){
  17. this.IE5=ua.indexOf("MSIE 5")>0;
  18. this.IE5_0=ua.indexOf("MSIE 5.0")>0;
  19. this.NS6=ua.indexOf("Gecko")>0;
  20. this.MOZ=this.NS6&&ua.indexOf("Netscape")==-1;
  21. this.MAC_IE5=this.MAC>0&&this.IE5;
  22. this.IE6=ua.indexOf("MSIE 6")>0;
  23. }}
  24. };
  25. var tabs, tabsClone, tabArray, activeTab, relatedTab=null;
  26. TabParams={
  27. useCloneOnBottom:false,
  28. showRemoveLink:false, /* mettre à true pour afficher le bouton "Afficher tout". Modifié pour base Prestations BCVd*/
  29. alwaysShowClone:false
  30. };
  31. function tabInit(){
  32. if(window.tabInited)return;
  33. if(!document.createElement||Browser.id.OPERA){
  34. TabParams.useCloneOnBottom=false;
  35. TabParams.alwaysShowClone=false;
  36. TabParams.showRemoveLink=true;
  37. }
  38. tabs=document.getElementById('tabs');
  39. tabs.getElementsWithClass=get_elements_with_class_from_classList;
  40. if(Browser.id.OPERA&&!Browser.id.IE5){
  41. tabArray=tabs.getElementsByTagName("span");
  42. activeTab=tabArray[0];
  43. }
  44. else {
  45. tabArray=tabs.getElementsWithClass("*", ["tab", "tabActive"]);
  46. activeTab=tabs.getElementsWithClass("*", "tabActive")[0]||tabArray[0];
  47. }
  48. tabArray.isImg=tabArray[0].tagName.toLowerCase()=="img";
  49. IE5_0noImg=(Browser.id.IE5_0&&!tabArray.isImg&&!Browser.id.MAC);
  50. if(!Boolean(tabs.cloneNode)||!Boolean(tabs.cloneNode(true))||tabArray.isImg)TabParams.useCloneOnBottom=false;
  51. if(TabParams.useCloneOnBottom){
  52. tabsClone=document.body.appendChild(tabs.cloneNode(true));
  53. tabsClone.className="tabsClone";
  54. tabsClone.getElementsWithClass=get_elements_with_class_from_classList;
  55. tabsCloneArray=tabsClone.getElementsWithClass("*", ["tab", "tabActive"]);
  56. }
  57. for(var i=0;i<tabArray.length; i++){
  58. var _tab;
  59. if(!Browser.id.OPERA){
  60. _tab=tabArray[i];
  61. _tab.content=document.getElementById("content"+(i+1));
  62. }
  63. else {
  64. _tab=document.getElementById("tab"+(i+1));
  65. _tab.num=i+1;
  66. }
  67. if(TabParams.useCloneOnBottom)tabsCloneArray[i].content=document.getElementById("content"+(i+1));
  68. if(_tab.tagName.toLowerCase()=="img"){
  69. _tab["normalsrc"]=new String(_tab.src);
  70. _tab.hover=new Image();
  71. _tab.hover.src=_tab.getAttribute("hoversrc");
  72. _tab.active=new Image();
  73. _tab.active.src=_tab.getAttribute("activesrc");
  74. }
  75. if(_tab.addEventListener){
  76. _tab.addEventListener("mouseover", hoverTab ,false);
  77. _tab.addEventListener("mouseout", hoverOff ,false);
  78. _tab.addEventListener("mousedown", depressTab ,false);
  79. if(TabParams.useCloneOnBottom){
  80. tabsCloneArray[i].addEventListener("mouseover", hoverTab ,false);
  81. tabsCloneArray[i].addEventListener("mouseout", hoverOff ,false);
  82. tabsCloneArray[i].addEventListener("mousedown", depressClonedTab ,false);
  83. }}
  84. else {
  85. _tab.onmouseover=hoverTab;
  86. _tab.onmouseout=hoverOff;
  87. _tab.onmousedown=depressTab;
  88. if(TabParams.useCloneOnBottom){
  89. tabsCloneArray[i].onmouseover=hoverTab;
  90. tabsCloneArray[i].onmouseout=hoverOff;
  91. tabsCloneArray[i].onmousedown=depressClonedTab;
  92. }}
  93. if(TabParams.useCloneOnBottom){
  94. tabsCloneArray[i].depressTab=depressClonedTab;
  95. tabsCloneArray[i].controller=_tab;
  96. _tab.bottomTab=tabsCloneArray[i];
  97. }
  98. _tab.depressTab=depressTab;
  99. if(TabParams.showRemoveLink){
  100. _tab.content.appendChild(document.createElement("br"));
  101. removeTabLink=_tab.content.removeTabLink=_tab.content.appendChild(document.createElement("a"));
  102. removeTabLink.id="removeTabLink"+(i+1);
  103. removeTabLink.href="javascript:removeTabs("+(i+1)+")";
  104. removeTabLink.appendChild(document.createTextNode("Afficher tout"));
  105. removeTabLink.className="removeTab";
  106. }
  107. if(IE5_0noImg){
  108. tabs.tabOffset=tabs.tabOffset?tabs.tabOffset:0;
  109. var tabWidth=_tab.offsetWidth+18;
  110. _tab.style.left=tabs.tabOffset+"px";
  111. _tab.style.width=tabWidth+"px";
  112. if(TabParams.useCloneOnBottom){
  113. tabsCloneArray[i].style.left=tabs.tabOffset+"px";
  114. tabsCloneArray[i].style.width=tabWidth+"px";
  115. }
  116. _tab.style.display="block";
  117. _tab.style.position="absolute";
  118. _tab.style.whiteSpace="nowrap";
  119. if(TabParams.useCloneOnBottom){
  120. tabsCloneArray[i].style.display="block";
  121. tabsCloneArray[i].style.position="absolute";
  122. tabsCloneArray[i].style.whiteSpace="nowrap";
  123. }
  124. tabs.tabOffset+=parseInt(_tab.offsetWidth)+4;
  125. }
  126. if(Browser.id.MAC_IE5&&TabParams.useCloneOnBottom)tabsCloneArray[i].innerHTML=_tab.innerHTML;
  127. }
  128. tabs.onchange=new Function();
  129. var q=String(window.location.search);
  130. if(q&&q.indexOf("tab=")>0)switchTabs(q.substring(q.indexOf("tab=")+4,q.indexOf("tab=")+8));
  131. else if(window.location.hash!=""){
  132. var hash=window.location.hash;
  133. var el=document.getElementById(hash.substring(1));
  134. if(el==null)return;
  135. var content=findAncestorWithClass(el, "content");
  136. if(content!=null&&Boolean(content.id)&&content.id.indexOf("content")==0){
  137. var num=content.id.substring("content".length);
  138. switchTabs("tab"+num, null, hash);
  139. el=content=num=null;
  140. }}
  141. if(tabArray.isImg)activeTab.src=activeTab.getAttribute("activesrc");
  142. else{
  143. activeTab.className="tab tabActive";
  144. if(TabParams.useCloneOnBottom)activeTab.bottomTab.className=activeTab.className;
  145. }
  146. 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.";
  147. if(TabParams.useCloneOnBottom){
  148. setTabsClonePosition();
  149. tabsClone.style.height=(activeTab.offsetHeight+1)+"px";
  150. showTabsCloneIfNecessary();
  151. if(window.addEventListener)window.addEventListener("resize",updateTabsClonePosition, false);
  152. else window.onresize=updateTabsClonePosition;
  153. }
  154. window.tabInited=true;
  155. }
  156. function updateTabsClonePosition(e){
  157. if(activeTab!=null)setTimeout("setTabsClonePosition();",500);
  158. }
  159. function setTabsClonePosition(){
  160. var adjustment=0;
  161. if(Browser.id.MAC_IE5)adjustment=-1 *
  162. parseInt(activeTab.content.currentStyle.paddingBottom);
  163. else if(Browser.id.IE5_0)adjustment=0;
  164. else adjustment=1;
  165. tabsClone.style.top=(activeTab.content.offsetHeight+activeTab.content.offsetTop+adjustment)+"px";
  166. }
  167. function showTabsCloneIfNecessary(){
  168. var contentBottom=activeTab.content.offsetTop+activeTab.content.offsetHeight;
  169. var visibility=(contentBottom>getViewportHeight()||TabParams.alwaysShowClone)?"visible":"hidden";
  170. tabsClone.style.visibility=visibility;
  171. }
  172. function switchTabs(tab,e){
  173. if(typeof document.getElementById=="undefined")return true;
  174. var el=(arguments.length==3&&typeof arguments[2]=="string")?document.getElementById(arguments[2].substring(1)):null;
  175. var booleanReturnValue=(arguments.length==3&&arguments[2]==true)?true:false;
  176. try{
  177. document.getElementById(tab).depressTab(e);
  178. }
  179. catch(exception){}
  180. if(!el&&!booleanReturnValue){
  181. window.scrollTo(0,0);
  182. return false;
  183. }
  184. else if(el!=null)scrollToElement(el);
  185. if(booleanReturnValue)return booleanReturnValue;
  186. }
  187. function scrollToElement(el){
  188. try{
  189. if(typeof el.scrollIntoView=="function")el.scrollIntoView();
  190. else
  191. window.location.hash="#"+el.id;
  192. }
  193. catch(ex){}}
  194. function hoverTab(){
  195. if(activeTab==this||activeTab==this.controller)return;
  196. this.className="tabHover tab";
  197. this.src=this.getAttribute("hoversrc");
  198. if(TabParams.useCloneOnBottom){
  199. if(this.bottomTab)this.bottomTab.className="tabHover tab";
  200. else this.controller.className="tabHover tab";
  201. }}
  202. function hoverOff(){
  203. if(activeTab==this||activeTab==this.controller)return;
  204. this.className="tab";
  205. this.src=this["normalsrc"];
  206. if(TabParams.useCloneOnBottom){
  207. if(this.bottomTab)this.bottomTab.className="tab";
  208. else this.controller.className="tab";
  209. }}
  210. function depressTab(e){
  211. if(activeTab==this)return;
  212. relatedTab=activeTab;
  213. this.className="tab";
  214. this.className="tab tabActive";
  215. this.src=this.getAttribute("activesrc");
  216. if(activeTab)resetTab(activeTab);
  217. activeTab=this;
  218. tabs.onchange(e);
  219. if(!Browser.id.OPERA){
  220. if(!Browser.id.MAC_IE5)this.content.style.display="block";
  221. this.content.style.visibility="visible";
  222. }
  223. else document.getElementById("content"+this.num).style.visibility="visible";
  224. if(TabParams.useCloneOnBottom){
  225. setTabsClonePosition();
  226. this.bottomTab.className=this.className;
  227. showTabsCloneIfNecessary();
  228. }}
  229. function depressClonedTab(e){
  230. if(activeTab==this.controller)return;
  231. this.controller.depressTab(e);
  232. this.className="tab";
  233. this.className="tab tabActive";
  234. window.scrollTo(0,(tabsClone.offsetTop+tabsClone.offsetHeight)-getViewportHeight());
  235. }
  236. function resetTab(tab){
  237. tab.className="tab";
  238. tab.src=tab["normalsrc"];
  239. if(activeTab.bottomTab)activeTab.bottomTab.className="tab";
  240. if(!Browser.id.OPERA){
  241. if(!Browser.id.MAC_IE5)tab.content.style.display="none";
  242. tab.content.style.visibility="hidden";
  243. }
  244. else document.getElementById("content"+tab.num).style.visibility="hidden";
  245. }
  246. get_elements_with_class_from_classList=function(tagName, classList){
  247. var returnedCollection=new Array(0);
  248. var collection=(this.all&&tagName=="*")?this.all:this.getElementsByTagName(tagName);
  249. for(var i=0; i<collection.length; i++)jloop:for(var j=0;j<classList.length; j++)if(collection[i].className.test(classList[j], " ")){
  250. returnedCollection[returnedCollection.length]=collection[i];
  251. break jloop;
  252. }
  253. return returnedCollection;
  254. };
  255. if(!String.prototype.test){
  256. String.prototype.test=function(inp, delim){
  257. var exps=getTokenizedExps(inp, delim);
  258. return(exps.global.test(this)||exps.ends.test(this));
  259. };
  260. function getTokenizedExps(inp, delim){
  261. return {
  262. global:new RegExp(delim+inp+delim, "\g"),
  263. ends:new RegExp("^"+inp+delim+"|^"+inp+"$|"+delim+inp+"$", "\g")};
  264. }}
  265. function findAncestorWithClass(el, klass){
  266. for(var parent=el;parent!=null;){
  267. if(parent.className!=null&&parent.className.test(klass, " "))return parent;
  268. parent=parent.parentNode;
  269. }
  270. return null;
  271. };
  272. function getScrollTop(){
  273. if(Browser.id.NS6)return(window.pageYOffset);
  274. if(document.documentElement.scrollTop)return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  275. else if(document.body.scrollTop)return(document.body.scrollTop);
  276. }
  277. function getViewportHeight(){
  278. if(Browser.id.NS6)return window.innerHeight;
  279. if(Browser.id.IE6)return Math.max(document.documentElement.clientHeight, document.body.clientHeight);
  280. return document.body.clientHeight-2;
  281. }
  282. function removeTabs(index){
  283. var noScrollFlag=activeTab.id=="tab1";
  284. resetTab(activeTab);
  285. var removeTabLink;
  286. for(var i=0; i<tabArray.length; i++)if(Boolean(tabArray[i].content)&&tabArray[i].content.style){
  287. tabArray[i].content.style.position="relative";
  288. if(i!=0){
  289. tabArray[i].content.style.borderTopWidth="0";
  290. tabArray[i].content.style.marginTop="0";
  291. if(!Browser.id.MOZ)tabArray[i].content.style.top="0";
  292. }
  293. if(i!=tabArray.length-1)tabArray[i].content.style.borderBottomWidth="0";
  294. else tabArray[i].content.style.marginBottom="10px";
  295. if(!Browser.id.MAC_IE5)tabArray[i].content.style.display="block";
  296. tabArray[i].content.style.visibility="visible";
  297. removeTabLink=tabArray[i].content.removeTabLink;
  298. if(removeTabLink!=null&&removeTabLink.firstChild!=null&&removeTabLink.firstChild.nodeName=="#text"){
  299. var newIndex=parseInt(removeTabLink.id.substring(removeTabLink.id.length-1));
  300. if(newIndex<tabArray.length-1)newIndex+=1;
  301. removeTabLink.href="javascript:undoRemoveTabs('tab"+newIndex+"')";
  302. removeTabLink.firstChild.nodeValue="Afficher condense";
  303. }
  304. if(Browser.id.NS6)tabArray[tabArray.length-1].content.style.marginBottom=tabArray[0].content.offsetTop+"px";
  305. }
  306. tabs.style.display="none";
  307. if(TabParams.useCloneOnBottom)tabsClone.style.display="none";
  308. if(noScrollFlag)return;
  309. if(Browser.id.MOZ)window.scrollTo(0, document.getElementById("content"+index).offsetTop);
  310. else window.location.hash='content'+index;
  311. }
  312. function undoRemoveTabs(sTabToActivate){
  313. for(var i=0; i<tabArray.length; i++){
  314. if(Boolean(tabArray[i].content)&&tabArray[i].content.style){
  315. tabArray[i].content.style.position="absolute";
  316. if(i!=0){
  317. tabArray[i].content.style.top="";
  318. tabArray[i].content.style.borderTopWidth="";
  319. }
  320. if(i!=tabArray.length-1)tabArray[i].content.style.borderBottomWidth="";
  321. else tabArray[i].content.style.marginBottom="";
  322. if(!Browser.id.MAC_IE5)tabArray[i].content.style.display="none";
  323. tabArray[i].content.style.visibility="hidden";
  324. var removeTabLink=tabArray[i].content.removeTabLink;
  325. if(removeTabLink!=null&&removeTabLink.firstChild!=null&&removeTabLink.firstChild.nodeName=="#text"){
  326. removeTabLink.firstChild.nodeValue="Afficher tout";
  327. removeTabLink.href="javascript:removeTabs("+(i+1)+")";
  328. }}
  329. }
  330. tabs.style.display="block";
  331. if(TabParams.useCloneOnBottom)tabsClone.style.display="block";
  332. activeTab=null;
  333. switchTabs(sTabToActivate, null);
  334. activeTab=document.getElementById(sTabToActivate);
  335. if(Browser.id.NS6)tabArray[tabArray.length-1].content.style.marginBottom="";
  336. }

Autres pages sur : javascript tab fixe

Lassé par la pub ? Créez un compte

essaye de rajouter aprés les lignes :

_tab.style.display="block";
_tab.style.position="absolute";
_tab.style.whiteSpace="nowrap";

_tab.style.overflow="hidden";

le nom de la valeur est mal choisie. cela veux simplement dire que le contenu qui dépasse de l'onglet ne sera pas affiché.

Tiens nous au courant ;) 

Edit

Il ya aussi la propriété maxWidth de l'objet style que tu peux utiliser.

Pour plus d'info la dessus visite ce site :
http://www.w3schools.com/
Il est en anglais mais c'est LA référence de la programmation web

Les tailles sur le WEB sont toujours en pixel ou en pourcentage.

A ma connaissance il n'y a pas moyen de les fixer en nombre de caractéres.

C'est d'ailleurs limitatifs car il suffit que l'utilisateur change la police par défaut et cela ne passe plus correctement.

oki donc ce que je comprend :

je vais rajouer un style.maxwidth et un style.minwidth (vais essayer de trouver la syntaxe) en pixel afin que mes onglet soie toujours de la meme longueur. JE vais essayer et te tien az courant.

merci

voici ce que j'ai rajouté :

_tab.style.minWidth= "130px!important";
_tab.style.minWidth= "130px!important";

je ne peux pas tester pour le moment, je dois faire un restart du srv http pour que les modif soie prise en compte. J'espère que je pourraisle faire praidement, genre dans la demi heure

merci et a+

ok je n'ai plus d'erreur en affichant la page. Voici ce que j'ai ajouté (en rouge):

_tab.style.display="block";
_tab.style.position="absolute";
_tab.style.whiteSpace="nowrap";

_tab.style.overflow="hidden";
_tab.style.minWidth="130px!important";
_tab.style.maxWidth="130px!important";
[/color]

mais cela ne change rien, j'ai toujours des onglets de grandeur variable par rapport au texte. HELP ME PLZ!

merci d'avance et a+
Lassé par la pub ? Créez un compte
Tom's guide dans le monde