Erledigt: Scriptaculous Toggle Tabs und grafisches Menü

 


Abalone
Gast

12.04.10
15:22 Uhr
Ok, ich verzweifel langsam. Ich benutze Scriptaculous, um Inhaltsbereiche „faden“ zu lassen und hätte es nun gern, dass der gerade geklickte Menü-Link auch als aktiv markiert bleibt (ich benutze Grafiken). Dafür habe ich zwar auch ein Script (das tauscht die Klassen aus), das aber nicht zusammen mit dem Toggle-Script läuft. Ich würde die beiden nun gern miteinander verschmelzen, komme aber auf keinen grünen Zweig.

Toggle:
  1. /*-----------------------------------------------------------
  2. Toggles element's display value
  3. Input: any number of element id's
  4. Output: none
  5. ---------------------------------------------------------*/
  6.  
  7. function toggleDisp() {
  8. for (var i=0;i<arguments.length;i++){
  9. var d = $(arguments[i]);
  10. if (d.style.display == 'none')
  11. d.style.display = 'block';
  12. else
  13. d.style.display = 'none';
  14. }
  15. }
  16.  
  17. /*-----------------------------------------------------------
  18. Toggles tabs - Closes any open tabs, and then opens current tab
  19. Input: 1.The number of the current tab
  20. 2.The number of tabs
  21. 3.(optional)The number of the tab to leave open
  22. 4.(optional)Pass in true or false whether or not to animate the open/close of the tabs
  23. Output: none
  24. ---------------------------------------------------------*/
  25. function toggleTab(num,numelems,opennum,animate) {
  26. if ($('tabContent'+num).style.display == 'none'){
  27. for (var i=1;i<=numelems;i++){
  28. if ((opennum == null) || (opennum != i)){
  29. var temph = 'tabHeader'+i;
  30. var h = $(temph);
  31. if (!h){
  32. var h = $('tabHeaderActive');
  33. h.id = temph;
  34. }
  35. var tempc = 'tabContent'+i;
  36. var c = $(tempc);
  37. if(c.style.display != 'none'){
  38. if (animate || typeof animate == 'undefined')
  39. Effect.toggle(tempc,'slide',{duration:0.5, queue:{scope:'menus', limit: 20}});
  40. else
  41. toggleDisp(tempc);
  42. }
  43. }
  44. }
  45. var h = $('tabHeader'+num);
  46. h.id = 'tabHeaderActive';
  47. var c = $('tabContent'+num);
  48. c.style.marginTop = '0px';
  49. if (animate || typeof animate == 'undefined'){
  50. Effect.toggle('tabContent'+num,'slide',{duration:0.5, queue:{scope:'menus', position:'end', limit: 20}});
  51. }else{
  52. toggleDisp('tabContent'+num);
  53. }
  54. }
  55. }
Quelltext in Zwischenablage kopieren

change class für das Menü
  1. // class changer
  2. function change(id, newclass)
  3. {
  4. identity=document.getElementById(id);
  5. identity.className=newclass;
  6. }
  7. // Modularized Events
  8. window.onload = function() {
  9. document.getElementById("tabHeader1").onclick = function() {
  10. change('tabHeader1', 'company2');
  11. change('tabHeader2', 'focus');
  12. change('tabHeader3', 'ref');
  13. change('tabHeader4', 'career');
  14. change('slogan', 'slogan1');
  15. }
  16. document.getElementById("tabHeader2").onclick = function() {
  17. change('tabHeader1', 'company');
  18. change('tabHeader2', 'focus2');
  19. change('tabHeader3', 'ref');
  20. change('tabHeader4', 'career');
  21. change('slogan', 'slogan1');
  22. }
  23. document.getElementById("tabHeader3").onclick = function() {
  24. change('tabHeader1', 'company');
  25. change('tabHeader2', 'focus');
  26. change('tabHeader3', 'ref2');
  27. change('tabHeader4', 'career');
  28. change('slogan', 'slogan2');
  29. }
  30. document.getElementById("tabHeader4").onclick = function() {
  31. change('tabHeader1', 'company');
  32. change('tabHeader2', 'focus');
  33. change('tabHeader3', 'ref');
  34. change('tabHeader4', 'career2');
  35. change('slogan', 'slogan1');
  36. }
  37. }
Quelltext in Zwischenablage kopieren

Das Menü
  1. <ul class="mainnav">
  2. <li class="limarginbottom"><a id="tabHeader1" href="javascript:void(0)" onclick="toggleTab(1,20)" class="company">Agentur</a></li>
  3. <li class="limarginbottom"><a id="tabHeader2" href="javascript:void(0)" onclick="toggleTab(2,20)" class="focus">Fokus</a></li>
  4. <li class="limarginbottom"><a id="tabHeader3" href="javascript:void(0)" onclick="toggleTab(7,20)" class="ref">Referenzen</a></li>
  5. <li><a id="tabHeader4" href="javascript:void(0)" onclick="toggleTab(4,20)" class="career">Karriere</a></li>
  6. </ul>
Quelltext in Zwischenablage kopieren

Styleangaben für's Menü
  1. .company {text-decoration:none;border:0;padding:0;display:block;text-indent:-9999px;letter-spacing:-9999px;font-size:0;width:73px;height:10px;background:url(../img/company.gif) 0 0 no-repeat;}
  2. .company:hover {background-position:-73px 0;}
  3. .focus {text-decoration:none;border:0;padding:0;display:block;text-indent:-9999px;letter-spacing:-9999px;font-size:0;width:51px;height:11px;background:url(../img/focus.gif) 0 0 no-repeat;}
  4. .focus:hover {background-position:-51px 0;}
  5. .ref {text-decoration:none;border:0;padding:0;display:block;text-indent:-9999px;letter-spacing:-9999px;font-size:0;width:104px;height:10px;background:url(../img/references.gif) 0 0 no-repeat;}
  6. .ref:hover {background-position:-104px 0;}
  7. .career {text-decoration:none;border:0;padding:0;display:block;text-indent:-9999px;letter-spacing:-9999px;font-size:0;width:78px;height:10px;background:url(../img/career.gif) 0 0 no-repeat;}
  8. .career:hover {background-position:-78px 0;}
  9. .company2 {text-decoration:none;border:0;padding:0;display:block;text-indent:-9999px;letter-spacing:-9999px;font-size:0;width:73px;height:10px;background:url(../img/company.gif) -73px 0 no-repeat;}
  10. .focus2 {text-decoration:none;border:0;padding:0;display:block;text-indent:-9999px;letter-spacing:-9999px;font-size:0;width:51px;height:11px;background:url(../img/focus.gif) -51px 0 no-repeat;}
  11. .ref2 {text-decoration:none;border:0;padding:0;display:block;text-indent:-9999px;letter-spacing:-9999px;font-size:0;width:104px;height:10px;background:url(../img/references.gif) -104px 0 no-repeat;}
  12. .career2 {text-decoration:none;border:0;padding:0;display:block;text-indent:-9999px;letter-spacing:-9999px;font-size:0;width:78px;height:10px;background:url(../img/career.gif) -78px 0 no-repeat;}
Quelltext in Zwischenablage kopieren

Kann mir jemand einen Tipp geben, was ich aus dem change-class-Script übernehmen und wo ich es dann im Toggle-Script einfügen muss, damit das alles zusammen funktioniert?
Das letzte, was ich mir überlegt hatte, war zu schauen, welche „num“ übergeben wird, und dann eben die entsprechenden Klassen tauschen zu lassen, hat aber nicht hingehauen - so à la
  1. if(num == 1) {change('tabheader1','company');etc.pp.}
Quelltext in Zwischenablage kopierenEs hat nur beim ersten Menüpunkt hingehauen, aber auch nur beim ersten Klick. Ich erkenne einfach nicht, wo ich was einbauen muss heul
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Saturn, DaWanda oder notebooksbilliger.de geguckt? Vielleicht wirst du dort fuendig.

 
marx
Gast

12.04.10
15:24 Uhr
Geht das markieren des aktiven Links nicht mittlerweile direkt über CSS?

E: Wahrscheinlich nur bei Page-Reload oder?
Link zu diesem Beitrag in die Zwischenablage kopieren
Abalone
Gast

12.04.10
15:27 Uhr
Naja, da die Seite nicht neu geladen wird, fällt das flach.
Wenn ich Menü-Punkt 1 geklickt habe, müssen Menü-Punkt 2 und 3 wieder in den Urzustand zurückkehren, und es ändert sich auch noch an anderer Stelle eine Grafik. Geht nur über Klassenänderung per JS, denke ich.
Link zu diesem Beitrag in die Zwischenablage kopieren
Abalone
Gast

22.04.10
14:01 Uhr
Ok, ich hab's jetzt anders gelöst:

1. den Klassen des Menüs ein -on bzw. -off angehängt und dann
2. dieses Script benutzt

  1. function changeClass(currClass) {
  2. var obj = document.getElementById('mainnav').getElementsByTagName('a');
  3.  
  4. for (var x=0; x < obj.length; x++) {
  5. if (obj[x].className.search(/-on/) > -1) {
  6. obj[x].className = obj[x].className.replace(/-on/, "-off");
  7. } else if (obj[x].className == currClass) {
  8. obj[x].className = obj[x].className.replace(/-off/, "-on");
  9. }
  10. }
  11. }
Quelltext in Zwischenablage kopieren

Der HTML-Part:

  1. <ul class="mainnav" id="mainnav">
  2. <li class="limarginbottom"><a id="tabHeader1" href="javascript:void(0)" onclick="toggleTab(1,20);changeClass(this.className);" class="company-off">Agentur</a></li>
  3. <li class="limarginbottom"><a id="tabHeader2" href="javascript:void(0)" onclick="toggleTab(2,20);changeClass(this.className);" class="focus-off">Fokus</a></li>
  4. <li class="limarginbottom"><a id="tabHeader3" href="javascript:void(0)" onclick="toggleTab(7,20);changeClass(this.className);" class="ref-off">Referenzen</a></li>
  5. <li><a id="tabHeader4" href="javascript:void(0)" onclick="toggleTab(4,20);changeClass(this.className);" class="career-off">Karriere</a></li>
  6. </ul>
Quelltext in Zwischenablage kopieren

Jetzt haut's hin wie gewollt D
Link zu diesem Beitrag in die Zwischenablage kopieren
 
#