$.toast('Hier kannst du den Text des Toasts einfügen')

$.toast({
	heading: 'Information',
	text: 'Jetzt kkannst du Symbole hinzufügen, um verschiedene Arten von Toast zu generieren',
	showHideTransition: 'slide',
	icon: 'info'
})

$.toast({
	heading: 'Error',
	text: 'Es ist leider ein Fehler aufgetreten!',
	showHideTransition: 'fade',
	icon: 'error'
})

$.toast({
	heading: 'Warnung',
	text: 'Der Toaster lässt sich sehr einfach bedienen!',
	showHideTransition: 'plain',
	icon: 'warning'
})

$.toast({
	heading: 'Erfolgreich',
	text: 'Das waren nur die grundlegenden Beispiels! Scrolle nach unten, um weitere Details zu sehen.',
	showHideTransition: 'slide',
	icon: 'success'
})

$.toast({
	text: 'Dies wird die Toastnachricht'
})

$.toast({
	heading: 'Ist der Toast nützlich?',
	text: [
		'Ja', 
		'Nein', 
		'Vielleicht'
	],
	icon: 'info'
})

$.toast({
	heading: 'Kann ich <em>HTML</em> benutzen?',
	text: '<b>Ja, kein Problem</b>',
	hideAfter: false,
	icon: 'success'
})

$.toast({
	heading: 'Überschrift',
	text: 'Mit der Option `heading` kannst du die Überschrift der Toastnachricht angeben.',
})

$.toast({
	text: 'Setze `hideAfter` auf false und der Toast wird angeheftet.',
	hideAfter: false
})

$.toast({
	text: 'Setze die Option `hideAfter` auf Millisekunden, und der Toast wird nach den angegebenen Millisekunden ausgeblendet.',
	hideAfter: 5000   // in Millisekunden
})

$.toast({
	text: 'Setze die Option `showHideTransition` auf fade|plain|slide um die jeweilige Animationen einzustellen.',
	heading: 'Animation nach oben und unten',
	showHideTransition: 'slide'
})

$.toast({
	text: 'Setze die Option `showHideTransition` auf fade|plain|slide um die jeweilige Animationen einzustellen.',
	heading: 'Einfache Animation',
	showHideTransition: 'fade'
})

$.toast({
	text: 'Setze die Option `showHideTransition` auf fade|plain|slide um die jeweilige Animationen einzustellen.',
	heading: 'Ein- und Ausblenden zur Ecke',
	showHideTransition: 'plain'
})

$.toast({
	heading: 'Schließbarer Toast',
	text: 'Setze die Option `allowToastClose`auf true|false um den Toast schließbar zu machen oder nicht',
	allowToastClose: true
})

$.toast({
	heading: 'Nicht schließbarer Toast',
	text: 'Setze die Option `allowToastClose`auf true|false um den Toast schließbar zu machen oder nicht',
	allowToastClose: false
})

$.toast({
	heading: 'Festgelegte Anzahl von Toasts',
	text: 'Wenn eine Zahl festgelegt ist, wird maximal die festgelegte Anzahl von Toasts gleichzeitig angezeigt.',
	stack: 4
})

$.toast({
	heading: 'Kein Toaststapel',
	text: 'Wenn false festgelegt ist, wird jeweils nur ein Toast angezeigt.',
	stack: false
})

$.toast().reset('all');$.toast({
	heading: 'Unten Links',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'bottom-left',
	stack: false
})

$.toast().reset('all');$.toast({
	heading: 'Unten Rechts',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'bottom-right',
	stack: false
})

$.toast().reset('all');$.toast({
	heading: 'Unten Mitte',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'bottom-center',
	stack: false
})

$.toast().reset('all');$.toast({
	heading: 'Oben Links',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'top-left',
	stack: false
})

$.toast().reset('all');$.toast({
	heading: 'Oben Rechts',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'top-right',
	stack: false
})

$.toast().reset('all');$.toast({
	heading: 'Oben Mitte',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'top-center',
	stack: false
})

$.toast().reset('all');$.toast({
	heading: 'Mitte der Seite',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'mid-center',
	stack: false
})

$.toast().reset('all');$.toast({
	heading: 'Benutzerdefinierte Position',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: {
		left: 120,
		top: 120
	},
	stack: false
})

$.toast().reset('all');

$.toast({
	heading: 'Warnung',
	text: 'Ein Toast mit Warnung Icon.',
	icon: 'warning'
})

$.toast({
	heading: 'Erfolg',
	text: 'Ein Toast mit Erfolg Icon.',
	icon: 'success'
})

$.toast({
	heading: 'Fehler',
	text: 'Ein Toast mit Fehler Icon.',
	icon: 'error'
})

$.toast({
	heading: 'Information',
	text: 'Ein Toast mit Information Icon.',
	icon: 'info'
})

$.toast({
	heading: 'Farben',
	text: 'Farben werden mit den Optionen `bgColor` and `textColor` eingestellt.',
	bgColor: '#FF1356',
	textColor: '#FFFFFF'
})

$.toast({
	text: 'Dieser Text ist linksbündig',
	textAlign: 'left'
})

$.toast({
	text: 'Dieser Text ist rechtsbündig',
	textAlign: 'right'
})

$.toast({
	text: 'Dieser Text ist zentriert',
	textAlign: 'center'
})

$.toast({
	heading: 'Benutzerdefinierte Klasse',
	text: 'Benutzerdefinierte Klassen werden mit der Option `class` angegeben.',
	class: 'larger-font'
})

$.toast({
	text: 'Löst die Ereignisse aus',

	beforeShow: function () {
		alert('Der Toast ist im Begriff zu erscheinen.');
	},

	afterShown: function () {
		alert('Der Toast ist erschienen.');
	},

	beforeHide: function () {
		alert('Der Toast ist im Begriff, sich zu verstecken.');
	},

	afterHidden: function () {
		alert('Der Toast wurde versteckt.');
	}
})

var myToast = $.toast({
	heading: 'Information',
	text: 'Hier ist eine Informationen, die später in einen Fehler umgewandelt wird.',
	icon: 'info',
	hideAfter: false
});

// Update the toast after three seconds.
window.setTimeout(function(){
	myToast.update({
		heading: 'Fehler',
		text: 'Hier ist eine Information, die sich in Fehler geändert hat.',
		icon: 'error',
		hideAfter: false
	});    
}, 3000)

var myToast = $.toast('Toast, die entfernt werden müssen.');
myToast.reset(); // Entfernt die Toasts 'Toast, die entfernt werden müssen.'

$.toast().reset('all');