HP-4-Fun

PHP-Fusion V7.x Downloads
Alle meine gesammelten Downloads für das CMS PHP-Fusion V7.x

Navigation
Startseite Downloads jQuery Toast
Jquery Toast Plugin

Schnellstart

Falls nicht bereits vorhanden, muss eine Jquery Library eingebunden werden. Entweder du lädst dir diese von den entsprechenden Seiten selber herrunter oder du bindest den folgenden Codeschnipsel in deine Datei ein.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Zum Schluss müssen noch die Dateien jquery.toast.css und jquery.toast.js in die Datei eingebunden werden

<link rel="stylesheet" href="jquery.toast.css">
<script src="jquery.toast.js"></script>
			

Hinweis: Achte drauf, dass die Pfade zu den Dateien stimmen.

Neu in dieser Version

1. Anzeige einens Ladebalkens.
Der Ladebalken ist standardmäßig aktiviert. Verwende die Optionen `loader` und` loaderBg`, um ihn zu deaktivieren oder die Farbe zu ändern. Schaue dir die Beispiele unten an

Toast anzeigen
$.toast({
	heading: 'Information',
	text: 'Ladebalken sind standardmäßig aktiviert. Verwende `loader`,` loaderBg`, um das Standardverhalten zu ändern ',
	icon: 'info',
	loader: true,        // Ändere es in false, um den Ladebalken zu deaktivieren 
	loaderBg: '#9EC600'  // Hintergrundfarbe vom Ladebalken
})

2. Optionaler Schließ Button.
Der optionale Schließ Button ist standardmäßig aktiviert, wird aber nur bei einer Texteingabe bei `btText` unter dem Toast Text angezeigt.

Toast anzeigen
$.toast({
	heading: 'Information',
	text: 'Der optionale Schließ Button ist standardmäßig aktiviert, wird aber nur bei einer Texteingabe bei `btText` unter dem Toast Text angezeigt.',
	icon: 'info',
	btText: 'Toast schließen',  // Text auf dem Button
	hideAfter: 6000
})

Toast Beispiele

Um einen einfachen Toast zu generieren, kannst du einfach den Code der Beispiele kopieren

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

Es gibt verschiedene Arten von Toasts:

Toast anzeigen
$.toast({
	heading: 'Information',
	text: 'Jetzt kkannst du Symbole hinzufügen, um verschiedene Arten von Toast zu generieren',
	showHideTransition: 'slide',
	icon: 'info'
})
Toast anzeigen
$.toast({
	heading: 'Error',
	text: 'Es ist leider ein Fehler aufgetreten!',
	showHideTransition: 'fade',
	icon: 'error'
})
Toast anzeigen
$.toast({
	heading: 'Warnung',
	text: 'Der Toaster lässt sich sehr einfach bedienen!',
	showHideTransition: 'plain',
	icon: 'warning'
})
Toast anzeigen
$.toast({
	heading: 'Erfolgreich',
	text: 'Das waren nur die grundlegenden Beispiels! Scrolle nach unten, um weitere Details zu sehen.',
	showHideTransition: 'slide',
	icon: 'success'
})

Optionen

Natürlich ist das nicht alles, was du mit diesem Plugin tun kannst. Es gibt viele weitere Optionen. Beginnen wir damit, jede Option einzelnd zu erklären

Du solltest beachten, dass du bei jeder Verwendung von Optionen ein Optionsobjekt übergibst und der Text wie folgt angeben werden muss:

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

Der Text kann ein Array sein:

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

Or put some HTML in the text

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

1. Angeben der Überschrift

Mit der Option heading kannst du die Überschrift der Toastnachricht angeben.

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

2. Toast anheften

Manchmal möchte man Toasts anheften. Um sie anzuheften muss man hideAfter auf false setzen. Dies ist ein angehefteter Toast.

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

3. Ändern des Toast-Ausblend-Timers

Mit der Option hideAfter kann der Timer geändert werden, nach dem Toast ausgeblendet werden soll. Der Timer muss dann in Millisekunden angeben werden.

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

4. Ändern der Animation zum Ein- und Ausblenden

Mit der Option showHideTransition kann die Animation festlegt werden. Folgende Einstellungen stehen zur Verfügung:

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

5. Den Toast schließbar machen oder nicht

Mit der Option allowToastClose wird eingestellt, ob ein Toast schließbar ist oder nicht. Es wird ein kleiner Kreuzknopf zum anklicken ein- oder ausblendet

Toast anzeigen
$.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 anzeigen
$.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
})

6. Festlegen des Toaststapels

Mit der stack Option wird festgelegt, wie viele Toasts gleichzeitig angezeigt werden können. Standardmäßig ist diese Option auf 5 eingestellt.

Toast anzeigen
$.toast({
	heading: 'Festgelegte Anzahl von Toasts',
	text: 'Wenn eine Zahl festgelegt ist, wird maximal die festgelegte Anzahl von Toasts gleichzeitig angezeigt.',
	stack: 4
})
Toast anzeigen
$.toast({
	heading: 'Kein Toaststapel',
	text: 'Wenn false festgelegt ist, wird jeweils nur ein Toast angezeigt.',
	stack: false
})

Hinweis: Klicke mehrmals auf die Schaltfläche `Toast anzeigen`, um diese Beispiels zu testen.

7. Positionierung des Toasts

Die Option position kann verwendet werden, um die Position des Toasts anzugeben. Es gibt folgende vordefinierte Positionen:

Toast anzeigen
$.toast({
	heading: 'Unten Links',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'bottom-left',
	stack: false
})
Toast anzeigen
$.toast({
	heading: 'Unten Rechts',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'bottom-right',
	stack: false
})
Toast anzeigen
$.toast({
	heading: 'Unten Mitte',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'bottom-center',
	stack: false
})
Toast anzeigen
$.toast({
	heading: 'Oben Links',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'top-left',
	stack: false
})
Toast anzeigen
$.toast({
	heading: 'Oben Rechts',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'top-right',
	stack: false
})
Toast anzeigen
$.toast({
	heading: 'Oben Mitte',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'top-center',
	stack: false
})
Toast anzeigen
$.toast({
	heading: 'Mitte der Seite',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: 'mid-center',
	stack: false
})
Toast anzeigen
$.toast({
	heading: 'Benutzerdefinierte Position',
	text: 'Gib die benutzerdefinierte Position ein oder nutze eine der Vordefinierten.',
	position: {
		left: 120,
		top: 120
	},
	stack: false
})

Hinweis: Es ist zu beachten, dass nach dem Ändern der Toastposition mit Hilfe der Eigenschaft `position` die Position für die nächsten Toasts zurückgesetzt werden muss, wenn diese an ihrer Standardposition angezeigt werden sollen, d. H. In der unteren linken Ecke. Andernfalls wird jeder neu erzeugte Toast an der letzten Position angezeigt, d. H. An der Stelle, an der der zuletzt positionierte Toast angezeigt wurde. Du kannst die Toastposition zurücksetzen mit:

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

8. Nachrichten mit Symbolen

Mit der Option icon können die vordefinierten Toasttypen angegeben werden. Es folgen die vordefinierten Typen:

Toast anzeigen
$.toast({
	heading: 'Warnung',
	text: 'Ein Toast mit Warnung Icon.',
	icon: 'warning'
})
Toast anzeigen
$.toast({
	heading: 'Erfolg',
	text: 'Ein Toast mit Erfolg Icon.',
	icon: 'success'
})
Toast anzeigen
$.toast({
	heading: 'Fehler',
	text: 'Ein Toast mit Fehler Icon.',
	icon: 'error'
})
Toast anzeigen
$.toast({
	heading: 'Information',
	text: 'Ein Toast mit Information Icon.',
	icon: 'info'
})

9. Hintergrund & Text Farbe

Mit der bgColor Option wird die Hintergrundfarbe des Toasts eingestellt. Standard ist '#444'

textColor Option wird die Schriftfarbe des Toasts eingestellt. Standard ist '#eee'

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

10. Festlegen der Textausrichtung

Die Option textAlign wird verwendet, um die Ausrichtung von Text innerhalb des Toasts festzulegen. Zulässige Werte sind:

Toast anzeigen
$.toast({
	text: 'Dieser Text ist linksbündig',
	textAlign: 'left'
})
Toast anzeigen
$.toast({
	text: 'Dieser Text ist rechtsbündig',
	textAlign: 'right'
})
Toast anzeigen
$.toast({
	text: 'Dieser Text ist zentriert',
	textAlign: 'center'
})

11. Benutzerdefinierte Klassen

Die Option class wird verwendet, um dem Toast benutzerdefinierte Klassen hinzuzufügen.

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

12. Toast Ereignisse

Toast macht die folgenden Ereignisse verfügbar, damit du alles einbinden kannst, was du möchtest.

Toast anzeigen
$.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.');
	}
})

13. Toast aktualisieren

Wenn du einen Verweis auf einen Toast hast und diesen aktualisieren möchtest, kannst du dies tun, indem du die Option update für die Instanz aufrufst.

Toast anzeigen
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)

14. Toasts zurücksetzen

Wenn du den Verweis auf einen bestimmten Toast hast, kannst du diesen wie folgt zurücksetzen:

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

Wenn du nicht auf einen bestimmten Toast verweisen und jeden Toast zurücksetzen möchtst, gehen wie folgt vor:

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

Toast Generator

Toast anzeigen
					
$.toast({
	text: '', // Text, der im Toast angezeigt werden soll.
	heading: '', // Optionale Überschrift, die auf dem Toast angezeigt werden soll.
	icon: 'warning', // Anzuzeigendes Icon. Wenn keine Angabe, wird kein Icon angezeigt.
	showHideTransition: 'fade', // fade, slide oder plain
	allowToastClose: true, // Boolescher Wert true oder false
	btText: '', // Optionaler Button zum Schließen. Der Button wird, bei einer Eingabe, unter dem Text angezeigt.
	hideAfter: 3000, // false = Toast anzuheften, Zahl = Ausblendzeit vom Toast in Millisekunden.
	stack: 5, // false = ein Toast, Zahl = maximale Anzahl gleichzeitig angezeigter Toasts.
	position: 'bottom-left', // Position des Toasts: bottom-left, bottom-right, bottom-center, top-left, top-right, top-center, mid-center oder an ein Objekt mit left, right, top und bottom Werten.
	position: { left : 20, right : 20, top : 20, bottom : 20 }, // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
	bgColor: '#444444',  // Hintergrundfarbe des Toast
	textColor: '#EEEEEE',  // Text Farbe des Toast
	textAlign: 'left',  // Text Ausrichtung: left, right oder center
	loader: true,  // Ob der Ladebalken angezeigt werden soll oder nicht. Standard ist True
	loaderBg: '#FCD703',  // Ladebalkenfarbe
	beforeShow: function () {}, // wird ausgelöst, kurz bevor der Toast erscheint.
	afterShown: function () {}, // wird ausgelöst, nachdem der Toast erschienen ist.
	beforeHide: function () {}, // wird ausgelöst, bevor sich der Toast versteckt.
	afterHidden: function () {}  // wird ausgelöst, nachdem der Toast versteckt wurde.
});
					

Jquery Toast Plugin Download

Die benötigten Dateien für das Jquery Toast Plugin bekommst du hier: Download

Rechtliches
Impressum Datenschutz Kontakt