JavaScript Button - Website X5 Helpsite

Javascript-Button kommen häufiger zur Anwendung, als man denkt. Der Vorteil dieser Button besteht darin, dass diese verhältnismäßig einfach srukturiert sind und meist identische Funktionen aufweisen.

Einige hier gezeigte Button zeigen keine Wirkung, da diese nur zur Erweiterung in kompletten Funktions-Skripten zur Anwendung kommen oder die Grundvoraussetzungen dazu nicht erfüllt sind.

Es sind nur Beispiel-Button, die auch teilweise in Kombination ausgeführt werden können oder sogar müssen.

Einige Funktionen können variieren oder ausgetauscht werden, führen aber die gleiche Funktion aus z. B. :

.js-button { font-family: tahoma, arial; font-size: 12px; font-weight: normal;

background-color: #e1e1e1; border: 1px solid #000; border-radius: 5px;

padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; }

Zurück:

Vorwärts:

Verlinkung:

'wsX5Obj/Obj_FILE/demo-popup.html',

'Titel PopUp',

'width=500,height=500,scrollbars'

);

var win=null;

function NewWindow(mypage,myname,w,h,pos,infocus) {

if(pos=="random") {

myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;

mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;

}

if(pos=="center") {

myleft=(screen.width)?(screen.width-w)/2:100;

mytop=(screen.height)?(screen.height-h)/2:100;

}

else if((pos!='center' && pos!="random") || pos==null) {

myleft=0;

mytop=20;

}

settings="width=" + w + ",height=" + h + ",top=" + mytop + ",left=" + myleft + ", scrollbars=yes, location=no, directories=no, status=no, menubar=no, toolbar=no, resizable=no";

win=window.open(mypage,myname,settings);

win.focus();

}

'wsX5Obj/Obj_FILE/demo-popup.html',

'popup',

'500',

'500',

'center',

'front'

Download:

Drucken:

document.getElementById('print').onclick = function() {

window.print();

}

function printPage() {

focus();

if (window.print) {

jetztdrucken = confirm('Seite drucken ?');

if (jetztdrucken) window.print();

}

}

Fenster öffnen:

document.getElementById('emptyWin').onclick = function() {

window.open('','');

}

document.getElementById('popupWin').onclick = function() {

var winURL = 'wsX5Obj/Obj_FILE/demo-popup.html';

var winName = 'popupWin';

var winSize = 'width=500, height=500, scrollbars=no';

var ref = window.open(winURL, winName, winSize);

}

function Zoom(){

window.open("wsX5Obj/Obj_FILE/demo-zoom.html",

"fensterln", "width=100, height=100")

}

for(var i = 100; i < 500; i++)

self.resizeTo(i, 0)

for(var i= 100; i < 500; i++)

self.resizeTo(550, i)

var myWin = new Object;

myWin.prop = "width=500, height=300, scrollbars=no";

myWin.file = "wsX5Obj/Obj_FILE/demo-popup.html";

document.getElementById('openWin').onclick = function () {

if (this.innerHTML == "Fenster öffnen/schließen") {

myWin.ref = window.open(myWin.file, "", myWin.prop);

this.innerHTML = "Fenster schließen";

}

else if (this.innerHTML == "Fenster schließen") {

// alert('Fenster geschlossen ' + myWin.ref); // ggf. Meldung ausgeben

myWin.ref.close();

this.innerHTML = "Fenster öffnen/schließen";

}

}

Fenster schließen:

Wechsel-Button:

onclick="document.images.change.src='wsX5Obj/Obj_IMG/car_02xs.jpg'">

onclick="document.images.change.src='wsX5Obj/Obj_IMG/car_01xs.jpg';">

onclick="if(document.getElementById('visit').style.visibility=='visible')

document.getElementById('visit').style.visibility='hidden';

<img src="wsX5Obj/Obj_IMG/car_03xs.jpg"><br>

display: block = Anzeige, display: none = Nichtanzeige -->

onClick="this.style.backgroundColor='#0000FF'"

onDblClick="this.style.backgroundColor='#FF0000'">

var a=1;

function DKlick() {

if (a==1) {

document.Beschriftung.dblKlick.value="V I E L E N  D A N K";

a=0;

return;

}

if (a==0) {

document.Beschriftung.dblKlick.value="Klick MICH an";

a=1;

return;

}

}

<input type="button" class="js-button" value="Klick MICH an" name="dblKlick"

onClick="DKlick();">

Seite aktualisieren:

Senden/Absenden:

function OneSend() {

document.all["OSend"].value="Formular gesendet";

document.all["OSend"].disabled="disabled";

return true;

}

function OneKlick() {

document.all["OKlick"].outerHTML =

'<input type="button" value="Erfolgreich gesendet" disabled>'

}

E-Mail Funktionen:

function checkemail() {

var str=document.validation.emailcheck.value;

var filter=/^(\w+(?:\.\w+)*)@((?:\w+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

if (filter.test(str) ==true) {

alert("OK");

}

else {

alert("Bitte eine gültige E-Mail-Adresse eingeben!")

}

}

E-Mail Adresse:<br>

<input type="text" value="" size="30" name="emailcheck">

<input type="button" class="js-button"

value="Adresse prüfen" onClick="checkemail()">

Ausgaben/Meldungen:

'Die Meldung: Hier ein Text nur zur Demonstration. Diese Funktion ist deshalb eingeschränkt.'

'\t Die Meldung: \n Hier ein Text, nur zur Demonstration. \n Diese Funktion ist deshalb eingeschränkt.'

'Hier könnte jetzt ein Text von Dir stehen, \n auch Mehrzeilig.'

function Geschenk() {

if (confirm("Bitte, schenkst Du mir Dein Auto?")==true) {

alert("Das finde ich ja echt toll.");

}

else {

alert("War mir klar, Du bist gemein.");

}

}

Daten ermitteln:

function Check() {

alert("Die aktuelle Fenstergröße\n Breite: " +

document.body.offsetWidth+"  Höhe: "+

document.body.offsetHeight + " Pixel")

}

function Source() {

if (window.location.protocol=="file:") {

document.dStat.anzeige.value="Lokal";

}

if (window.location.protocol=="http:") {

document.dStat.anzeige.value="Extern";

}

}

<input type="button" class="js-button" value="Dokument Status" onClick="Source()"> =

<input type="text" value="" name="anzeige" size="7">

function Status() {

if (navigator.onLine == true) {

document.bStat.anzeige.value="Online";

}

else {

document.bStat.anzeige.value="Offline";

}

}

<input type="button" class="js-button" value="Browser Status" onClick="Status()"> =

<input type="text" value="" name="anzeige" size="10">

function farbanzeiger(A, B) {

if (B.length == 6) {

document.getElementById(A).style.backgroundColor="#" + B;

}

}

Diverse Sample:

var nn=0, pause=100;

function zaehler() {

document.count.Button.value=Math.floor(nn)+"%";

nn++;

if  (nn <= 99) {

setTimeout("zaehler()",pause);

}

else {

document.count.Button.value="...fertig (Start)";

nn=0;

}

}

<input type="button" class="js-button" value="Zähler Button" name="Button"

onclick="this.blur(); zaehler()">

function Test(Name) {

alert("Sie haben Button " + Name + " gedrückt");

}

function taste(A,B) {

var item = A.toString();

if (document.getElementById(item).value == B) {

document.getElementById(item).value = A;

}

else {

document.getElementById(item).value = B;

}

}

onClick="taste('Mann' , '&#187; Mann');">

onClick="taste('Kind' , '&#187; Kind &#171;');">

onClick="taste('Frau' , 'Frau &#171;');">

var aktiv = false;

function blink() {

var h = "0" + Math.round (Math.random () * 15).toString (16);

h = "0" + Math.round (Math.random () * 255).toString (16) + h.substring (h.length - 2);

h = "0" + Math.round (Math.random () * 255).toString (16) + h.substring (h.length - 4);

document.getElementById("bText").style.color= '#' + h.substring (h.length - 6);

aktiv = window.setTimeout ("blink()", 600); // Blink-Geschwindigkeit

}

function blinkStop() {

if (aktiv) {

window.clearTimeout(aktiv);

}

}

var progressBar = document.getElementById('bar');

function updateProgress(newValue) {

progressBar.value = newValue;

}

onClick="updateProgress('1')">

onClick="updateProgress('2')">

onClick="updateProgress('3')">

onClick="updateProgress('4')">

onClick="updateProgress('5')">

.all { font-size:14px; font-weight:bold; text-align:center; }

.rot { background-color:red;  color:#000;}

.yellow { background-color:yellow; color:#000;}

function farbwechselClass() {

var elementList = document.getElementsByClassName("all rot");

for (var i = 0; i < elementList.length; i++) {

elementList[i].className = 'all yellow';

}

}

onClick="farbwechselClass();">

Image Button:

<img src="wsX5Sys/btn_demo-p.gif" alt="X5 Demo-Image"

onmouseover="this.src='wsX5Sys/btn_demo-a.gif'"

onmouseout="this.src='wsX5Sys/btn_demo-p.gif'">

Newsletter anmelden

onClick="location='wsx5sys06.php'; return false;"><br>

onClick="history.back()"><br>