Persönliche Werkzeuge

Vorlage:Button

Aus BogenWiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 12: Zeile 12:
; Caption: Angeziegter Text auf dem Button
; Caption: Angeziegter Text auf dem Button
; ID:      Eindeutige ID des Button
; ID:      Eindeutige ID des Button
-
; OnEvent: JavaScript-Funktion die bei den Events onclick, onmouseenter, onmouseleave und onload aufgerufen werden soll.
+
; OnEvent: JavaScript-Funktion die bei den Events onclick, onmouseenter und onmouseleave aufgerufen werden soll.
-
:          Parameter: ID, Event, DefaultColor
+
:          Der Funktion werden folgende Parameter übergeben: ID, Event
|}
|}
-
{{Button|Caption=Test-Button 1|ID=TestBtn|onclick=TestBtnEvent}}
+
{{Button|Caption=Test-Button 1|ID=TestBtn1|onclick=TestBtnEvent}}
-
{{Button|Caption=Test-Button 2|ID=TestBtn|onclick=TestBtnEvent}}
+
{{Button|Caption=Test-Button 2|ID=TestBtn2|onclick=TestBtnEvent}}
<html><script type="text/javascript">
<html><script type="text/javascript">
sActiveBtnID = '';
sActiveBtnID = '';
-
sInActiveColor = '';
+
sActiveBgColor = '#808080';
-
function TestBtnEvent(sID,sEvent,sDefaultColor) {
+
sActiveCaColor = 'white';
 +
sInactiveBgColor = '#C0C0C0';
 +
sInactiveCaColor = 'black';
 +
sHoverBgColor = '#E0E0E0';
 +
sHoverCaColor = 'black';
 +
function TestBtnEvent(sID,sEvent) {
   alert('Button "'+sID+'" angeklickt !!!');
   alert('Button "'+sID+'" angeklickt !!!');
-
   bBtnActive = false;
+
   eButton = document.getElementById(sID);
-
   if (sID == sActiveBtnID)
+
   switch (sEvent) {
-
    bBtnActive = true;
+
  case 'onmouseenter'
-
  elsif (sEvent == 'onmouseenter')
+
    if (sID != sActiveBtnID) {
-
     bBtnActive = true;
+
      eButton.style.background=sInactiveBgColor;
-
   elsif (sEvent == 'onmouseleave')
+
      eButton.style.color=sInactiveCaColor;
-
     bBtnActive = false;
+
     }
-
  elsif (sEvent == 'onclick')
+
    break;
-
     bBtnActive = true;
+
   case 'onmouseleave'
-
  elsif (sEvent == 'onload')
+
     if (sID != sActiveBtnID) {
-
    sInActiveColor = sDefaultColor;
+
      eButton.style.background=sHoverBgColor;
-
 
+
      eButton.style.color=sHoverCaColor;
-
  this.style.background='#707070';
+
    }
-
  this.style.color='white';
+
    break;
 +
  case 'onclick'
 +
     if (sID != sActiveBtnID) {
 +
      if (sActiveBtnID != '') {
 +
        eButtonOld = document.getElementById(sID);
 +
        eButtonOld.style.background=sInactiveBgColor;
 +
        eButtonOld.style.color=sInactiveCaColor;
 +
      }
 +
      sActiveBtnID = sID;
 +
      eButton.style.background=sActiveBgColor;
 +
      eButton.style.color=sActiveCaColor;
 +
    } else {
 +
      sActiveBtnID = '';
 +
      eButton.style.background=sInactiveBgColor;
 +
      eButton.style.color=sInactiveCaColor;
 +
    }
 +
    break;
 +
  case 'onload'
 +
    eButton.style.background=sInactiveBgColor;
 +
    eButton.style.color=sInactiveCaColor;
 +
    break;
 +
  }
}
}
</script></html>
</script></html>
</noinclude><includeonly><nowiki
</noinclude><includeonly><nowiki
-
/><html><div id="</html>{{{ID}}}<html>" onload="" onclick="</html>{{{onclick}}}<html>('</html>{{{ID}}}<html>')" onmouseenter="" onmouseleave="this.style.background='#E0E0E0';this.style.color='black';" style="display:inline-block;padding:4px 8px 3px 8px;background:#E0E0E0;border:solid #D0D0D0 1px;color:black;cursor:pointer;"><b></html>{{{Caption}}}<html></b></div></html><nowiki
+
/><html><div id="</html>{{{ID}}}<html>" onload="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onload')" onclick="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onclick')" onmouseenter="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onmouseenter')" onmouseleave="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onmouseleave')" style="display:inline-block;padding:4px 8px 3px 8px;background:#E0E0E0;border:solid #D0D0D0 1px;color:black;cursor:pointer;"><b></html>{{{Caption}}}<html></b></div></html><nowiki
/></includeonly>
/></includeonly>

Version vom 20:47, 15. Nov. 2021

Name: Button
Beschreibung: Erzeugt einen Button ...
Parameter:
Caption
Angeziegter Text auf dem Button
ID
Eindeutige ID des Button
OnEvent
JavaScript-Funktion die bei den Events onclick, onmouseenter und onmouseleave aufgerufen werden soll.
Der Funktion werden folgende Parameter übergeben: ID, Event

Test-Button 1
Test-Button 2


Von „https://nugman.info/bogenwiki/index.php?title=Vorlage:Button“