Vorlage:Button
Aus BogenWiki
(Unterschied zwischen Versionen)
Nugman (Diskussion | Beiträge) |
Nugman (Diskussion | Beiträge) |
||
| (Der Versionsvergleich bezieht 22 dazwischenliegende Versionen mit ein.) | |||
| 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 und onmouseleave aufgerufen werden soll. |
| + | : Der Funktion werden folgende Parameter übergeben: ID, Event | ||
| + | ; CSS: CSS Class-Name | ||
|} | |} | ||
| - | {{Button|Caption=Test-Button|ID= | + | {{Button|Caption=Test-Button 1|ID=TestBtn1|OnEvent=TestBtnEvent}} |
| + | {{Button|Caption=Test-Button 2|ID=TestBtn2|OnEvent=TestBtnEvent}} | ||
<html><script type="text/javascript"> | <html><script type="text/javascript"> | ||
| - | function | + | sActiveBtnID = ''; |
| - | alert('Button "'+sID+'" angeklickt !!!'); | + | sActiveBgColor = '#808080'; |
| + | sActiveCaColor = 'white'; | ||
| + | sInactiveBgColor = '#E0E0E0'; | ||
| + | sInactiveCaColor = 'black'; | ||
| + | sHoverBgColor = '#D0D0D0'; | ||
| + | sHoverCaColor = 'black'; | ||
| + | function TestBtnEvent(sID,sEvent) { | ||
| + | eButton = document.getElementById(sID); | ||
| + | switch (sEvent) { | ||
| + | case 'onmouseenter': | ||
| + | if (sID != sActiveBtnID) { | ||
| + | eButton.style.background=sHoverBgColor; | ||
| + | eButton.style.color=sHoverCaColor; | ||
| + | } | ||
| + | break; | ||
| + | case 'onmouseleave': | ||
| + | if (sID != sActiveBtnID) { | ||
| + | eButton.style.background=sInactiveBgColor; | ||
| + | eButton.style.color=sInactiveCaColor; | ||
| + | } | ||
| + | break; | ||
| + | case 'onclick': | ||
| + | // alert('Button "'+sID+'" angeklickt !!!'); | ||
| + | if (sID != sActiveBtnID) { | ||
| + | if (sActiveBtnID != '') { | ||
| + | eButtonOld = document.getElementById(sActiveBtnID); | ||
| + | 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>" | + | /><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')" </html>{{#if:{{{CSS|}}}|<html>class="</html>{{{CSS}}}<html>" style="display:inline-block;cursor:pointer;" </html>|<html>style="display:inline-block;cursor:pointer;padding:4px 8px 3px 8px;background:#E0E0E0;border:solid #D0D0D0 1px;color:black;"</html>}}<html>><b></html>{{{Caption}}}<html></b></div></html><nowiki |
/></includeonly> | /></includeonly> | ||
Aktuelle Version vom 20:04, 28. Jun. 2022
| Name: | Button |
| Beschreibung: | Erzeugt einen Button ... |
| Parameter: |
|
Test-Button 1
Test-Button 2
