Javascript Menü à la Win Explorer: Anpassung möglich?

Das Forum für Programmierer und Systemadmins. Von Shell-, Perl- und PHP-Scripts bis zur objektorientierten Programmierung mit C++.

Javascript Menü à la Win Explorer: Anpassung möglich?

Beitragvon orso » Di 30 Jan, 2007 19:28

GUten Abend!

Ich habe auf einer Website (bin am basteln...) ein klassisches Javascript Menü, wo vor den verschiedenen Punkten + Zeichen sind, um Untermenü auszuklappen und dann + Zeichen, um diese wieder zu schließen. Ich hätte aber gerne, dass man nicht nur auf Plus, bez. Minus klicken kann, sondern zusätzlich auch auf den Namen der Rubrik.

+ Auto
+ Fahrrad
- Motorrad
Honda
Kawa
Suzi
+ LKW

Derzeit kann man nur durch Klick auf +/- das Menü steuern. Könntet Ihr mir sagen, wie ich es auch mit Klick auf z.B. das Wort Fahrrad steuern kann?

Die zuständige Passage ist IMHO folgende:

Code: Alles auswählen
function showhide(el){
  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus.png)":"url(plus.png)";
    }


Würde mich sehr über Hilfe freuen!

Im voraus herzlich dankend:

Orso
KEIN ChellODE -- xDSL Privat medium 4096/512 - TeleNode -- MEHR!
orso
Board-User Level 1
Board-User Level 1
 
Beiträge: 680
Registriert: Sa 13 Dez, 2003 09:37
Wohnort: Steiermark

Beitragvon FTH » So 04 Feb, 2007 21:01

Versuch dir mal den HTML Quelltext anzusehen.

vermutlich ist das + als href... definiert. Versuch dies auch bei den dazugehörigen Wörtern!
Linux is like a tent - no gates, no windows and an apache inside

http://www.inode.at
FTH
Junior Board-Mitglied
Junior Board-Mitglied
 
Beiträge: 35
Registriert: Mi 25 Jan, 2006 10:10
Wohnort: Weiz

Beitragvon orso » Mo 05 Feb, 2007 09:32

FTH hat geschrieben:Versuch dir mal den HTML Quelltext anzusehen.

vermutlich ist das + als href... definiert. Versuch dies auch bei den dazugehörigen Wörtern!


Hallo!

Danke für Deine Antwort! Ich habe es mit href gemacht, dass der Haupt-Menüpunkt ein Link ist, doch wie man es schafft, dass ein Klick auf diesen nicht einen Link öffnet, sondern - gleich wie beim Plus-Zeichen - das Untermenü aufmacht, weiß ich nicht.

Hg- Orso
KEIN ChellODE -- xDSL Privat medium 4096/512 - TeleNode -- MEHR!
orso
Board-User Level 1
Board-User Level 1
 
Beiträge: 680
Registriert: Sa 13 Dez, 2003 09:37
Wohnort: Steiermark

Beitragvon FTH » Mo 05 Feb, 2007 10:00

Hallo, vielleicht kannst du einmal einen Ausschnitt aus deinem Quelltext posten, aus dem man erkennen kann, wie die + Dargestellt werden und wie die Texte.

Ich vermute einmal du must beim href, noch irgendein onclick - oder soetwas ähnliches aufrufen, aber wie gesagt, bitte Quelltext posten, denn meine Kristallkugel ist gerade auf Urlaub, und ohne sie tu ich mir beim Raten etwas schwer :-)
Linux is like a tent - no gates, no windows and an apache inside

http://www.inode.at
FTH
Junior Board-Mitglied
Junior Board-Mitglied
 
Beiträge: 35
Registriert: Mi 25 Jan, 2006 10:10
Wohnort: Weiz

Beitragvon orso » Mo 05 Feb, 2007 11:19

Hallo!

Ja, mit mehr Quelltext wäre es sicherlich übersichtlicher. Sorry...

Code: Alles auswählen


#containerul, #containerul ul{
  text-align:left;
  margin:0; /* Removes browser default margins applied to the lists. */
  padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
  margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */
  padding:0; /* Removes browser default padding applied to the list items. */
  list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
  float:left;
  width:14px;
  height:1em;
  background-position:0 50%;
  background-repeat:no-repeat;
}
--></style>

<script type="text/javascript">
<!--
var temp, temp2, cookieArray, cookieArray2, cookieCount;
function initiate(){
  cookieCount=0;
  if(document.cookie){
    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();
    for(i in cookieArray){
      cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
    }
  }
  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
  temp=document.getElementById("containerul");
  for(var o=0;o<temp.getElementsByTagName("li").length;o++){
    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
      temp2 = document.createElement("span");
      temp2.className = "symbols";
      temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus.png)":"url(plus.png)"):"url(plus.png)";
      temp2.onclick=function(){
        showhide(this.parentNode);
        writeCookie();
      }
      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }
      cookieCount++;
    }
    else{
      temp2 = document.createElement("span");
      temp2.className = "symbols";
      temp2.style.backgroundImage = "url(page.png)";
      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);
    }
  }
}

function showhide(el){
  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus.png)":"url(plus.png)";
    }

function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.
  cookieArray=new Array()
  for(var q=0;q<temp.getElementsByTagName("li").length;q++){
    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
      if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
      }
    }
  }
  document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
}

</script>



Danke für Deine Hilfe!

Orso
KEIN ChellODE -- xDSL Privat medium 4096/512 - TeleNode -- MEHR!
orso
Board-User Level 1
Board-User Level 1
 
Beiträge: 680
Registriert: Sa 13 Dez, 2003 09:37
Wohnort: Steiermark

Beitragvon FTH » Mo 05 Feb, 2007 21:03

Hallo

Das wäre einmal der eine Teil, der die Grundfunktionalität zur Verfügung stellt.

Deine Änderung wirst du aber vermutlich im HTML Teil deiner Seite durchführen müssen. Schau einmal wo und wie deine JS-Funktion showhide() aufgerufen wird.
Ich nehme einmal an, hier wird der Schlüssel zum Erfolg liegen.

hth
FTH
Linux is like a tent - no gates, no windows and an apache inside

http://www.inode.at
FTH
Junior Board-Mitglied
Junior Board-Mitglied
 
Beiträge: 35
Registriert: Mi 25 Jan, 2006 10:10
Wohnort: Weiz


Zurück zu PROGRAMMIER FORUM

Wer ist online?

Mitglieder in diesem Forum: Trendiction [Crawler] und 8 Gäste