Vorlage:Button
Aus BogenWiki
(Unterschied zwischen Versionen)
Nugman (Diskussion | Beiträge) |
Nugman (Diskussion | Beiträge) |
||
| (Der Versionsvergleich bezieht 48 dazwischenliegende Versionen mit ein.) | |||
| Zeile 1: | Zeile 1: | ||
| - | <html><div style="display:inline-block;padding:4px 8px 3px 8px | + | <noinclude> |
| + | {|style="background:#F0F0F0" cellpadding="4" cellspacing="1" | ||
| + | |-style="background:white" valign="top" | ||
| + | | Name: | ||
| + | | Button | ||
| + | |-style="background:white" valign="top" | ||
| + | | Beschreibung: | ||
| + | | Erzeugt einen Button ... | ||
| + | |-style="background:white" valign="top" | ||
| + | | 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 | ||
| + | ; CSS: CSS Class-Name | ||
| + | |} | ||
| + | |||
| + | {{Button|Caption=Test-Button 1|ID=TestBtn1|OnEvent=TestBtnEvent}} | ||
| + | {{Button|Caption=Test-Button 2|ID=TestBtn2|OnEvent=TestBtnEvent}} | ||
| + | <html><script type="text/javascript"> | ||
| + | sActiveBtnID = ''; | ||
| + | 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> | ||
| + | |||
| + | </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')" </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> | ||
Aktuelle Version vom 20:04, 28. Jun. 2022
| Name: | Button |
| Beschreibung: | Erzeugt einen Button ... |
| Parameter: |
|
Test-Button 1
Test-Button 2
