Tabbar Tutorial

[Hakan]

Hallo Leute,

ich hoffe, ihr könnt mir helfen:

Ich benötige eine Tabbar-Navigation das client-seitig funktioniert.

Es gibt zwar im Internet eine Menge Skripte, die man nutzen kann (z.B. JQuery, etc.) , aber diese sind meist lizenziert und ausserdem will ich kein Skript benutzen, dass ich nicht verstehe.

Daher meine Frage: Kennt jemand ein gutes Tutorial, wie man sich per JS und CSS so ein Tabbar-Navigation erstellen kann? Am Besten etwas simples, ohne AJAX oder anderen SchnickSchnack.

Englisch/Deutsch egal und auch programmiertechnisch stelle ich mich normalerweise nicht ganz so dumm an.

Vielen Dank schon mal an alle!

Gute Nach, Hakan

[JürgenB]

Hallo Hakan,

kennst du schon http://de.selfhtml.org/css/layouts/navigationsleisten.htm

Gruß, Jürgen

[Hakan]

@Jürgen,

ich weiß nicht so genau, ob es das ist, was ich benötige.

Das scheint mir (muss es mir aber in Ruhe nochmal genauer anschauen) dass es sich hierbei nur um eine Navigationsleiste handelt.
Was ich benötige ist eine Tab-Bar bzw. Registerkartei mit unterschiedlichen Inhalten, die jedoch per JS client-seitig aufgerufen werden. Das heißt, bei Click auf ein Register sollte der Browser nicht nachladen müssen.

Trozdem Danke für Deinen Hinweis und ich werde es mir auf alle Fälle nochmal genauer anschauen. Vielleicht hilft es sogar bei meinem Problem!

Gruß, Hakan

[Gunnar Bittersmann]

@@Hakan:

nuqneH

wie man sich per JS und CSS so ein Tabbar-Navigation erstellen kann?

So wie in meinem Beispiel?

Qapla'

[JürgenB]

Hallo Gunnar,

offensichtlich verstehst du unter "Tabbar-Navigation" etwas anderes als ich. Bin gespannt, was Hakan denn nun sucht.

Gruß, Jürgen

[Gunnar Bittersmann]

@@JürgenB:

nuqneH

offensichtlich verstehst du unter "Tabbar-Navigation" etwas anderes als ich. Bin gespannt, was Hakan denn nun sucht.

Ich habe Hakan so verstanden, dass er die grundlegende Technik sucht, nicht das genaue Aussehen. Ob die Menüpunkte nun horizontal oder vertikal aufgelistet sind, ist Sache von einigen wenigen Zeilen CSS. Und ob die Menüpunkte und Inhalte nun Bilder oder Texte sind, ist zum Verständnis der grundlegenden Technik auch völlig irrelevant.

Qapla'

[Hakan]

Hi,

mal zwei Fragen zu Deinem Beispiel, dass ich nicht ganz vertehe:

Warum rufst Du showCurrent in einem Intervall alle 100ms auf?

Kannst Du eine kurze Erklärung zu der location.hash geben, dass Du innerhalb der showCurrent()-Methode benutzt?
Gehe mal davon aus, dass es irgendwas mit den Links zu tun hat, sprich welches Bild bei welchem Click aufgerufen werden soll, aber verstehen tue ich das nicht ganz, muss ich zugeben,.

Danke!

Gruß, Hakan

[Gunnar Bittersmann]

@@Hakan:

nuqneH

Kannst Du eine kurze Erklärung zu der location.hash geben, dass Du innerhalb der showCurrent()-Methode benutzt?

Das JavaScript ist nur für IE und Opera. (Es wäre zu testen, ob es für aktuelle Versionen noch notwendig ist.) Firefox und Webkits sind mit der reinen CSS-Lösung mit :target abgedeckt.

Du meinst jetzt nicht <http://de.selfhtml.org/javascript/objekte/location.htm#hash@title=diese kurze Erklärung>, oder?

Gehe mal davon aus, dass es irgendwas mit den Links zu tun hat, sprich welches Bild bei welchem Click aufgerufen werden soll, aber verstehen tue ich das nicht ganz, muss ich zugeben,.

Das Element, dessen ID im Fragment-Identifier im URI (der Teil nach '#') angegeben ist, wird sichtbar gemacht; die anderen Teile sind unsichtbar.

Qapla'

[ChrisB]

Hi,

Warum rufst Du showCurrent in einem Intervall alle 100ms auf?

Um auf eine Änderung des Hash-Parts des URL, die beim Klick auf einen der Anker oder auch beim Navigieren durch die history eintritt, zu reagieren - erforderlich in Browsern, die den Event hashchange noch nicht unterstützen.

Kannst Du eine kurze Erklärung zu der location.hash geben, dass Du innerhalb der showCurrent()-Methode benutzt?

Kurz genug?

MfG ChrisB