Vorlage:Button
Aus BogenWiki
(Unterschied zwischen Versionen)
Nugman (Diskussion | Beiträge) |
Nugman (Diskussion | Beiträge) |
||
| (Der Versionsvergleich bezieht 14 dazwischenliegende Versionen mit ein.) | |||
| Zeile 14: | Zeile 14: | ||
; OnEvent: JavaScript-Funktion die bei den Events onclick, onmouseenter und onmouseleave aufgerufen werden soll. | ; OnEvent: JavaScript-Funktion die bei den Events onclick, onmouseenter und onmouseleave aufgerufen werden soll. | ||
: Der Funktion werden folgende Parameter übergeben: ID, Event | : Der Funktion werden folgende Parameter übergeben: ID, Event | ||
| + | ; CSS: CSS Class-Name | ||
|} | |} | ||
| - | {{Button|Caption=Test-Button 1|ID=TestBtn1| | + | {{Button|Caption=Test-Button 1|ID=TestBtn1|OnEvent=TestBtnEvent}} |
| - | {{Button|Caption=Test-Button 2|ID=TestBtn2| | + | {{Button|Caption=Test-Button 2|ID=TestBtn2|OnEvent=TestBtnEvent}} |
<html><script type="text/javascript"> | <html><script type="text/javascript"> | ||
sActiveBtnID = ''; | sActiveBtnID = ''; | ||
sActiveBgColor = '#808080'; | sActiveBgColor = '#808080'; | ||
sActiveCaColor = 'white'; | sActiveCaColor = 'white'; | ||
| - | sInactiveBgColor = '# | + | sInactiveBgColor = '#E0E0E0'; |
sInactiveCaColor = 'black'; | sInactiveCaColor = 'black'; | ||
| - | sHoverBgColor = '# | + | sHoverBgColor = '#D0D0D0'; |
sHoverCaColor = 'black'; | sHoverCaColor = 'black'; | ||
function TestBtnEvent(sID,sEvent) { | function TestBtnEvent(sID,sEvent) { | ||
| - | |||
eButton = document.getElementById(sID); | eButton = document.getElementById(sID); | ||
switch (sEvent) { | switch (sEvent) { | ||
| - | case 'onmouseenter' | + | case 'onmouseenter': |
if (sID != sActiveBtnID) { | if (sID != sActiveBtnID) { | ||
| - | eButton.style.background= | + | eButton.style.background=sHoverBgColor; |
| - | eButton.style.color= | + | eButton.style.color=sHoverCaColor; |
} | } | ||
break; | break; | ||
| - | case 'onmouseleave' | + | case 'onmouseleave': |
if (sID != sActiveBtnID) { | if (sID != sActiveBtnID) { | ||
| - | eButton.style.background= | + | eButton.style.background=sInactiveBgColor; |
| - | eButton.style.color= | + | eButton.style.color=sInactiveCaColor; |
} | } | ||
break; | break; | ||
| - | case 'onclick' | + | case 'onclick': |
| + | // alert('Button "'+sID+'" angeklickt !!!'); | ||
if (sID != sActiveBtnID) { | if (sID != sActiveBtnID) { | ||
if (sActiveBtnID != '') { | if (sActiveBtnID != '') { | ||
| - | eButtonOld = document.getElementById( | + | eButtonOld = document.getElementById(sActiveBtnID); |
eButtonOld.style.background=sInactiveBgColor; | eButtonOld.style.background=sInactiveBgColor; | ||
eButtonOld.style.color=sInactiveCaColor; | eButtonOld.style.color=sInactiveCaColor; | ||
| Zeile 58: | Zeile 59: | ||
} | } | ||
break; | break; | ||
| - | case 'onload' | + | case 'onload': |
eButton.style.background=sInactiveBgColor; | eButton.style.background=sInactiveBgColor; | ||
eButton.style.color=sInactiveCaColor; | eButton.style.color=sInactiveCaColor; | ||
| Zeile 67: | Zeile 68: | ||
</noinclude><includeonly><nowiki | </noinclude><includeonly><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 | + | /><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
