{"id":266,"date":"2018-04-04T19:58:24","date_gmt":"2018-04-04T17:58:24","guid":{"rendered":"https:\/\/ekiwi.de\/?p=266"},"modified":"2018-04-04T19:58:24","modified_gmt":"2018-04-04T17:58:24","slug":"sweetalerts-schoene-alternative-zu-java-script-alerts","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/266\/sweetalerts-schoene-alternative-zu-java-script-alerts\/","title":{"rendered":"SweetAlerts &#8211; sch\u00f6ne Alternative zu Java-Script alerts"},"content":{"rendered":"<p>Die Standardmethode mit Java-Script Fehlermeldungen und PopUps auszugeben ist seit Urzeiten das klassische &#8222;alert&#8220;. Ein <code>alert(\"Hello World\")<\/code>; gibt eine einfache Nachrichtenbox des Browsers aus. <\/p>\n<p><!--more--><\/p>\n<p>Jeder Browser unterst\u00fctzt es. Allerdings dr\u00e4ngen sich die Standardmeldungen sehr in den Vordergrund. Kein Wunder, handelt es sich um normale Browserfenster. Diese k\u00f6nnen nur \u00fcber den OK-Button weg geklickt werden.<\/p>\n<p>Browserhersteller sind daher dazu \u00fcbergegangen, den Benutzer bei mehrfachen Anzeigen die Option anzubieten, die Webseite daran zu hindern, weitere Fenster zu \u00f6ffnen. Somit kann man sich auch als Entwickler nicht darauf verlassen, dass die Meldungen z.B. bei einer Formular\u00fcberpr\u00fcfung angezeigt werden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/04\/standard_alert.png\" alt=\"\" width=\"421\" height=\"176\" class=\"aligncenter size-full wp-image-267\" srcset=\"\/wp-content\/uploads\/2018\/04\/standard_alert.png 421w, \/wp-content\/uploads\/2018\/04\/standard_alert-300x125.png 300w\" sizes=\"auto, (max-width: 421px) 100vw, 421px\" \/><\/p>\n<p>Eine sch\u00f6ne M\u00f6glichkeit und Alternative bietet sich in Form von <a href=\"https:\/\/sweetalert.js.org\">SweetAlerts<\/a> an. Die kleine Java-Script Bibliothek erlaubt mit wenig Aufwand schicke Message-Boxen anzuzeigen.<\/p>\n<p>Die Funktionen bauen aufeinander auf, will man nur eine Nachricht anzeigen, reicht der Aufruf einer Funktion mit einem Parameter. Ein zweiter und dritter Parameter legen Unteritel und Icon f\u00fcr den Dialog fest.<\/p>\n<p>Auch Buttonbeschriftungen, Eingabem\u00f6glichkeiten und R\u00fcckgabewerte sind m\u00f6glich. Nach dem Aufruf ploppen die Dialoge mit einer schicken Animation auf. Je nach Art des Dialogs wird eine zus\u00e4tzliche Animationsgrafik anzeigt. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/04\/sweet_alerts.gif\" alt=\"\" width=\"626\" height=\"344\" class=\"aligncenter size-full wp-image-268\" \/><\/p>\n<p>Mit wenigen Zeilen Code hat man sich so eine schicke Alternative zu den normalen Alert-Boxen des Browsers gebastelt. Wer SweetAlerts ausprobieren will, kann das <a href=\"https:\/\/ekiwi.de\/tryit\/?file=sweet_alert\">direkt in unserem Online-Editor ausprobieren<\/a>. <\/p>\n<p>Weitere Beispiele, den Download des Scriptes findet man <a href=\"https:\/\/sweetalert.js.org\/guides\/\">auf der Herstellerhomepage<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Die Standardmethode mit Java-Script Fehlermeldungen und PopUps auszugeben ist seit Urzeiten das klassische &#8222;alert&#8220;. Ein alert(&#8222;Hello World&#8220;); gibt eine einfache<\/p>\n","protected":false},"author":1,"featured_media":269,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5,15],"tags":[50],"class_list":["post-266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","category-javascript","tag-java-script"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/269"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}