Tom's Guide > Forum > Programmation > javascript - tab fixe

javascript - tab fixe

Forum Programmation : javascript - tab fixe

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
gassane   10-06-2005 à 10:21:17

Hello,

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

http://dhtmlkitchen.com/scripts/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 :
  1. /**
  2. * Copyright©2001 Garrett Smith
  3. * Web:http://dhtmlitchen.com/
  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. }

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
toms@IDN   10-06-2005 à 10:27:12
- 0 +

tu veux fixer une taille pour les onglets ou les tableaux ??

Répondre à toms@IDN
gassane   10-06-2005 à 10:30:04
- 0 +

j'aimerais que la taille des onglets soient fixent alors que pour le moment et varie suivant la longueur du texte s'y trouvant.

merci et a+

Répondre à gassane
Eryopse   10-06-2005 à 10:41:09
- 0 +

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

Répondre à Eryopse
gassane   10-06-2005 à 10:45:16
- 0 +

merci mais comment la je ne fixe pas par exemple que l'onglet fait 10 caractère max non? Comment faire ca? Je vais essayer ce que tu me demande et te tiens au courant

a+

Répondre à gassane
Eryopse   10-06-2005 à 10:48:45
- 0 +

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.

Répondre à Eryopse
gassane   10-06-2005 à 10:51:35
- 0 +

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

Répondre à gassane
gassane   10-06-2005 à 10:59:24
- 0 +

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+

Répondre à gassane
gassane   10-06-2005 à 11:20:57
- 0 +

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+

Répondre à gassane
truthlesslife   18-04-2006 à 20:39:35
- 0 +

Il s'agit de l'unité "EM" qui fixe une mesure proportionnelle à la taille de la police... :-P

A la place des propriétés maxWidth et minWidth, tu pourrais utiliser simplement Width. Couplé a "overflow: hidden;" la taille des onglets ne devrait plus varier !

Répondre à truthlesslife
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > javascript - tab fixe
Aller à :

Il y a 1568 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,365 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens