3 Button Menü erstellen - Seite 2 @ tutorials.de: Tutorials, Forum & Hilfe

Maik · 02.06.06 18:01

Dann markiere das Thema bitte auch als erledigt, indem du auf den "Status"-Button rechts vom "Antworten"-Button klickst.

Sven Mintel · 02.06.06 19:21

Hab den Preloader mal in das Skript eingebaut...das spart nen Haufen Schreibkram und die Gefahr von Tippfehlern wird erheblich reduziert

Code :

<script type="text/javascript">
<!--
clicked=false;
function btn_init()
{
  pattern=/(normal|hover|active)\./i;
  btns = document.getElementsByName('btn');
  tmp=[];
  for(b=0;b<btns.length;++b)
    {
      tmp[b]=[new Image(),new Image()];
      tmp[b][0].src=btns[b].src.replace(pattern,'hover.');
      tmp[b][1].src=btns[b].src.replace(pattern,'active.');
      btns[b].onmouseover=function()
        {
          if(clicked!=this)
            {
              this.src=this.src.replace(pattern,'hover.');
            }
        }
      btns[b].onmouseout=function()
        {
          if(clicked!=this)
            {
              this.src=this.src.replace(pattern,'normal.');
            }
        }
      btns[b].onclick=function()
        {
              if(clicked)
                {
                  clicked.src = clicked.src.replace(pattern,'normal.');
                }
              this.src=this.src.replace(pattern,'active.');
              clicked=this;
        }
    }
}
window.onload = btn_init;
//-->
</script>

kastalonien · 08.06.06 16:12

Hab' da nochmal ne Frage...

Kann man das obrige Script auch so umschreiben, dass es statt Grafiken mit im CSS definierten Text funktioniert (a:active, a:hover...u.s.w.) ?

thx für Antworten...

Sven Mintel · 08.06.06 16:25

Was für definierter Text?
CSS ist für das Layout zuständig und nicht für den Inhalt(Text).

kastalonien · 08.06.06 20:01

ja, ich meine einen Text, den ich mit CSS gelayouted habe...

Sven Mintel · 09.06.06 02:38

Jo..kann man, .... ändere den className des betreffenden Elementes statt der src des Bildes. Dann definiere noch die entsprechenden Klassen, fertitsch.

kastalonien · 10.06.06 15:06

...ändere den className des betreffenden Elementes statt der src des Bildes...

Wie mache ich dass

Sven Mintel · 10.06.06 21:35

Code :

1	document.getElementById('idDesElements').className='andererKlassenname';

Dieses Board besitzt übrigens auch eine Suchfunktion.
Abgesehen davon gehört das Ändern von Element-Attributen zum kleinen JS-1x1, da solltest du dich mal ein wenig einlesen.

Ecstasy · 06.02.12 16:27

Ich weiß, der Thread ist Ur-Alt.

Allerdings bräuchte ich dieses Script an 2 verschiedenen stellen. Problem hierbei ist, wenn in meiner Horizontalen Navigation ein Element angeklickt ist und er als "active" angezeigt wird und ich im anderen Menue auf ein Element klicke wird das Element in der Horizontalen Navigation auf Normal geswitcht.

Wie bekomme ich das in Griff? Die Funktion ein zweites mal einbinden und alles was btn heißt ,umbenennen, funktioniert nicht. Dann funktioniert nur eine der beiden Funktionen.

Vielen Dank im voraus!

Grüße
Sascha

**Quaese** · 06.02.12 22:18

Hi,

du könntest eine Art Pseudo-Objekt erstellen, in dem die Variablen lokal definiert sind. Als Parameter übergibst du die ID des jeweiligen Menüs.

Ein Beispiel mit CSS-Klassen für die unterschiedlichen Zustände:

Code :

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#nav01 .normal,
#nav02 .normal{
  color: #f00;
}
 
#nav01 .active,
#nav02 .active{
  color: #00f;
}
 
#nav01 .hover,
#nav02 .hover{
  color: #0f0;
}
-->
</style>
<script type="text/javascript">
  <!--
function qpMenu(options){
  var menu = {
    pattern: /(normal|hover|active)/i
  };
 
  for(var key in options)
    menu[key] = options[key];
 
  menu.btns = (menu.id===undefined)? document.getElementsByTagName("body")[0].getElementsByTagName("button")
                                   : document.getElementById(menu.id).getElementsByTagName("button");
 
  for(var b=0, bLen=menu.btns.length; b<bLen; b++){
    menu.btns[b].onmouseover = function(){
      if(menu.clicked != this){
        this.className = this.className.replace(menu.pattern, 'hover');
      }
    };
 
    menu.btns[b].onmouseout = function(){
      if(menu.clicked != this){
        this.className = this.className.replace(menu.pattern, 'normal');
      }
    };
 
    menu.btns[b].onclick = function(){
      if(menu.clicked){
        menu.clicked.className = menu.clicked.className.replace(menu.pattern, 'normal');
      }
      this.className = this.className.replace(menu.pattern, 'active');
      menu.clicked = this;
    };
  }
}
 
window.onload = function(){
  qpMenu({
    id: 'nav01'
  });
  qpMenu({
    id: 'nav02'
  });
}
 //-->
</script>
</head>
<body>
<div id="nav01">
  <button class="normal">eins</button>
  <button class="normal">zwei</button>
  <button class="normal">drei</button>
</div>
<div id="nav02">
  <button class="normal">eins</button>
  <button class="normal">zwei</button>
  <button class="normal">drei</button>
</div>
</body>
</html>

Ciao
Quaese

Ecstasy · 08.02.12 16:58

Funktioniert soweit super! Danke dir.

Nur mein Problem ist, dass auch jetzt alle Divs im "Normalzustand" sind. Ich möchte das erste Element gerne direkt beim Laden der Page als "active" haben.

Gibt es da eine Möglichkeit?

Grüße und Vielen Dank!
Sascha

EDIT:

Ich merke gerade das Problem, dass ich nur diverse Farben ändern kann. Ich habe aber für jeden Button ein anderes Hintergrundbild sowie andere Abmaße. Sprich ich kann nicht alles in "navi01" packen. Wenn ich alles trenne um meine Bilder zu haben, taucht ein Problem auf. Sobald ich den zweiten Button klicke um ihn auf "active" zu schalten, bleibt der erste weiterhin active.

**Quaese** · 08.02.12 20:28

Hi,

um unterschiedliche Eigenschaften zuzuweisen, sollte CSS ausreichen. Es müssen die MenuItems nur mit den gewünschten Klassen versehen werden.

Um bestimmte MenuPunkte programmatisch aktiv setzen zu können, kann eine entsprechende öffentliche (public) Methode zur Verfügung gestellt werden. Diese nimmt den Index des Punktes entgegen, der angewählt sein soll und setzt den notwendigen Zustand.

Beispiel:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#nav01 .normal{
  color: #f00;
}
#nav01 .active{
  color: #0f0;
}
#nav01 .hover{
  color: #00f;
}
 
 
#nav02 .eins,
#nav02 .zwei,
#nav02 .drei{
    border: 1px solid #000;
}
 
#nav02 .eins{
  width: 50px;
  height: 20px;
}
#nav02 .zwei{
  width: 60px;
  height: 30px;
}
#nav02 .drei{
  width: 40px;
  height: 40px;
}
 
#nav02 .eins.normal{
  color: #f00;
  background: url(bild1.png) 0 0 no-repeat;
}
#nav02 .zwei.normal{
  color: #0f0;
  background: url(bild2.png) 0 0 no-repeat;
}
#nav02 .drei.normal{
  color: #00f;
  background: url(bild3.png) 0 0 no-repeat;
}
 
#nav02 .eins.active{
  color: #000;
  background: url(bild1_active.png) 0 0 no-repeat;
}
#nav02 .zwei.active{
  color: #0cf;
  background: url(bild2_active.png) 0 0 no-repeat;
}
#nav02 .drei.active{
  color: #fc0;
  background: url(bild3_active.png) 0 0 no-repeat;
}
 
#nav02 .eins.hover{
  color: #cc0;
  background: url(bild1_hover.png) 0 0 no-repeat;
}
#nav02 .zwei.hover{
  color: #c0c;
  background: url(bild2_hover.png) 0 0 no-repeat;
}
#nav02 .drei.hover{
  color: #0cc;
  background: url(bild3_hover.png) 0 0 no-repeat;
}
-->
</style>
<script type="text/javascript">
  <!--
function qpMenu(options){
  var menu = {
    pattern: /(normal|hover|active)/i,
    tag: 'button'
  };
 
  for(var key in options)
    menu[key] = options[key];
 
  menu.btns = (menu.id===undefined)? document.getElementsByTagName("body")[0].getElementsByTagName(menu.tag)
                                   : document.getElementById(menu.id).getElementsByTagName(menu.tag);
 
  for(var b=0, bLen=menu.btns.length; b<bLen; b++){
    menu.btns[b].onmouseover = function(){
      if(menu.clicked != this){
        this.className = this.className.replace(menu.pattern, 'hover');
      }
    };
 
    menu.btns[b].onmouseout = function(){
      if(menu.clicked != this){
        this.className = this.className.replace(menu.pattern, 'normal');
      }
    };
 
    menu.btns[b].onclick = function(){
      _setActive(this);
    };
  }
  
  // private
  var _setActive = function(menuItem){
    if(menu.clicked){
      menu.clicked.className = menu.clicked.className.replace(menu.pattern, 'normal');
    }
    menuItem.className = menuItem.className.replace(menu.pattern, 'active');
    menu.clicked = menuItem;
  }
  
  // public
  menu.setActive = function(index){
    _setActive(menu.btns[index]);
    return menu;
  }
  
  return menu;
}
 
window.onload = function(){
  qpMenu({
    id: 'nav01',
    tag: 'button'
  });
  qpMenu({
    id: 'nav02',
    tag: 'div'
  }).setActive(0);
}
 //-->
</script>
</head>
<body>
<div id="nav01">
  <button class="normal">eins</button>
  <button class="normal">zwei</button>
  <button class="normal">drei</button>
</div>
<div id="nav02">
  <div class="eins normal">eins</div>
  <div class="zwei normal">zwei</div>
  <div class="drei normal">drei</div>
</div>
</body>
</html>

Das Script wurde auch dahin gehend erweitert, dass der Pseudoklasse der Tag-Name der MenuPunkte übergeben werden kann.

Ciao
Quaese

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Javascript/CSS Button Menü Creator

Pull Down Menü Auswahl und Button verknüpfen

Bei klick auf Button test/menü ausfahren

Button mit Menü

MENÜ Button mit mehreren Buttons !?

E-Mail:

Abonnieren Abbestellen