Johannes Posel: Kann soetwas realisiert werden??

Hallo da draussen :-)

Ich würde gerne eine sehr komplexe <UL><LI>-Struktur (bis zu 5 Tiefen) vereinfachen, und zwar nach dem Schema der Baumstruktur des Windows Explorers, d.h. mann sieht erst nur die Oberbegriffe, dann kann man einen anklicken, und es komen die nächsten Unterbegriffe usw... Irgendeine Idee???

1000 Dank!

Johannes

  1. Hallo Johanes

    und zwar nach dem Schema der Baumstruktur des Windows Explorers, d.h. mann sieht erst nur die Oberbegriffe, dann kann man einen anklicken, und es komen die nächsten Unterbegriffe usw... Irgendeine Idee???

    Es gibt einen sehr schönen Freeware-Script dafür, den Joust Outliner. Ist allerdings für einen Java-Neuling (wie z.B. mich) etwas schwierig anzupassen. Ich habe auch andere, müßte aber nach den URLs suchen. Ich melde mich heute nachmittag noch mal.

    In der Zwischenzeit kannst Du hier im Forum unter "Themen begonnen vor..." suchen: das Thema wurde bereits angesprochen.

    Bis danndann

    PAF (patrickausfrankfurt)

    1. Hallo Johannes

      Ich melde mich heute nachmittag noch mal.

      Und hier bin ich!

      Joust kannst Du downloaden unter:

      http://www.alchemy-computing.co.uk/index.htm?/joust_dload.htm

      Dann habe ich in der Hilfe eines (auch sehr guten) HTML-Editor einen anderen Outliner gesehen, der allerdings ein Java-Applet ist.
      Viel anzupassen ist da nicht, außer in der Datei "tree.txt" und unter PARAM NAME eventuell die Farbe des Applet-Fensters. Die Symbole für Ordner und Dokumente lassen sich aber nicht ändern.

      http://www.imint.com (Alan's Tree Menue)

      Shadowrunner's HTML-Pad gibt es unter:

      http://www.nextweb.net/shadowrunner/htmlpad In der Hilfe ist das Menü eingebaut.

      Und wenn es einfache Baumstruktur sein darf, Stefan Münz hatte damals dieses Menü hier im FOrum gepostet (nur mit MSIE):

      <HTML>
      <HEAD>
      <STYLE TYPE='text/css'>
      <!--
      li.oItem { color:#0000CC; cursor:hand; font-family:Verdana; font-size:9pt; margin-left:-2px; font-weight:bold; line-height:12pt; list-style-image:url(x3.gif) } ;
      li.oParent { color:#CC6600; cursor:hand; font-family:Verdana; font-size:9pt; font-weight:bold; margin-left:-2px;  line-height:12pt; list-style-image:url(x1.gif) } ;
      li.oParopen { color:#CC6600; cursor:hand; font-family:Verdana; font-size:9pt; font-weight:bold; margin-left:-2px;  line-height:12pt; list-style-image:url(x2.gif) } ;
      ul ul { display: none; } ;
      // -->
      </STYLE>

      <SCRIPT LANGUAGE='Javascript'>
      <!--
      // Returns the closest parent tag with tagName containing
      // the src tag. If no such tag is found - null is returned.
      function checkParent( src, tagName ) {
        while ( src != null ) {
         if (src.tagName == tagName)
          return src;
         src = src.parentElement;
        }
        return null;
      }

      // Returns the first tag with tagName contained by
      // the src tag. If no such tag is found - null is returned.
      function checkContent( src, tagName ) {
        var pos = src.sourceIndex ;
        while ( src.contains( document.all[++pos] ) )
         if ( document.all[pos].tagName == tagName )
          return document.all[pos] ;
        return null ;
      }

      // Handle onClick event in the outline box
      function outlineAction() {    
        var src = event.srcElement ;
        var item = checkParent( src, "LI" ) ;
        if(src.className == "oParent") src.className = "oParopen";
        else if(src.className == "oParopen") src.className = "oParent";

      if ( parent != null ) {
         var content = checkContent( item, "UL" ) ;

      if ( content != null )
          if ( content.style.display == "" )
           content.style.display = "block" ;
          else
           content.style.display = "" ;
        }
        event.cancelBubble = true;
      }

      function chg(obj,mode) {    
         event.cancelBubble = true;
            if(mode == 1)
             obj.style.color = "#FFFFFF";
            if(mode == 2)
             obj.style.color = "#FFCC33";
          }

      function Go(to,mode)
      {
      if(mode==1)
        top.location.href=to;
      if(mode==2)
        self.location.href=to;
      }

      // -->
      </SCRIPT>
      </HEAD>
      <BODY BGCOLOR=#FFFFFF TEXT=#000000>

      <DIV id="Outline" style="position:absolute; top:10px; left:5px; width:280px" onClick="JavaScript:outlineAction();">

      <UL>
           <LI class='oParent'>Suchdienste
            <UL>
            <LI class='oItem' onClick="Go('http://www.altavista.digital.com/',2)">Altavista</LI>
            <LI class='oItem' onClick="Go('http://www.crawler.de/',2)">Crawler</LI>
            <LI class='oItem' onClick="Go('http://www.dino-online.de/',2)">DINO Online</LI>
            <LI class='oItem' onClick="Go('http://www.excite.de/',2)">Excite</LI>
            <LI class='oItem' onClick="Go('http://www.infoseek.com/',2)">InfoSeek</LI>
            <LI class='oItem' onClick="Go('http://www.yahoo.de/',2)">Yahoo</LI>
           </LI>
           <LI class='oParent'>Information/Auskunft
            <UL>
            <LI class='oItem' onClick="Go('http://www.teleinfo.de/abfragen/bin/neuabfrage.pl',2)">Telefonauskunft (TeleInfo)</LI>
            <LI class='oItem' onClick="Go('http://www.branchenbuch.com/index.html',2)">Branchenbuch</LI>
            <LI class='oItem' onClick="Go('http://www.iicm.edu/ref.m10/',2)">Meyer's Lexikon</LI>
            <LI class='oItem' onClick="Go('http://db3.telebuch.de/telebuch/de/index.htm',2)">ABC Bücherdienst</LI>
            <LI class='oItem' onClick="Go('http://www.wetteronline.de/',2)">Wetter online (weltweit)</LI>
                  <LI class='oItem' onClick="Go('http://bahn.hafas.de/',2)">DB Fahrplanauskunft</LI>
            </UL>
           </LI>
           <LI class='oParent'>Nachrichten und Aktuelles
            <UL>
            <LI class='oItem' onClick="Go('http://www.br-online.de/news/aktuell/',2)">Nachrichtenticker des BR</LI>
            <LI class='oItem' onClick="Go('http://www.yahoo.de/schlagzeilen/',2)">Nachrichtenticker Yahoo</LI>
            <LI class='oItem' onClick="Go('http://videotext.ardzdf.de:9090/telenet/ARD/100/1.html',2)">Videotext ARD</LI>
            <LI class='oItem' onClick="Go('http://www.cs.vu.nl/~gerben/news.html',2)">Daily News</LI>
            <LI class='oItem' onClick="Go('http://www.mathematik.uni-ulm.de/germnews/',2)">German News</LI>
            </UL>
           </LI>
           <LI class='oParent'>Software
            <UL>
            <LI class='oItem' onClick="Go('http://www.winfiles.com/',2)">Winfiles (Shareware)</LI>
            <LI class='oItem' onClick="Go('http://www.shareware.com/',2)">Shareware.com</LI>
            <LI class='oItem' onClick="Go('http://www.filez.com/',2)">Filez (Dateisuche)</LI>
            <LI class='oItem' onClick="Go('http://www.softline.de/',2)">Softline (Versand)</LI>
            </UL>
        </LI>
      </UL>
      </DIV>

      <!-- *************** DHTML Outline (end) ***************** -->

      </BODY>
      </HTML>

      Für den Anfang dürfte es ja reichen!!!!

      Vielleicht kenne andere Forum-Besucher andere Möglichkeiten.
      Ich persönlich halte den Joust Outliner für den besten, auch wenn man erst einmal zeit braucht, um herauszufinden, wo man was wie anpassen kann (trotz guter Erklärungen).

      Bis danndann

      PAF (patrickausfrankfurt)