{"id":25580,"date":"2021-06-10T18:06:00","date_gmt":"2021-06-10T15:06:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25580"},"modified":"2021-10-18T02:30:42","modified_gmt":"2021-10-17T23:30:42","slug":"sweetalert-ein-schoener-ersatz-fuer-javascript-dialogfelder","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/sweetalert-ein-schoener-ersatz-fuer-javascript-dialogfelder\/","title":{"rendered":"SweetAlert &#8211; Ein sch\u00f6ner Ersatz f\u00fcr JavaScript-Dialogfelder"},"content":{"rendered":"<p>JavaScript ist in alle Browser eingebettet. JavaScript bietet Dialogfelder (Alert, Confirm, Prompt), die in allen g\u00e4ngigen Browsern verf\u00fcgbar sind. Jeder Browser zeigt diese Dialogfelder in Bezug auf die Benutzeroberfl\u00e4che unterschiedlich an.<\/p>\n<p>Beim Erstellen einer Anwendung liegt unser Hauptaugenmerk auf der Benutzererfahrung. Und irgendwo bieten die Dialogfelder von JavaScript keine gute Benutzererfahrung. Dies liegt daran, dass diese Boxen in jedem Browser eine unterschiedliche Benutzeroberfl\u00e4che haben, was die Konsistenz von Look and Feel irgendwie st\u00f6rt.<\/p>\n<p>In diesem Artikel besprechen wir den <a href=\"https:\/\/sweetalert.js.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SweetAlert,<\/a> der ein sch\u00f6ner Ersatz f\u00fcr JavaScript-Dialogfelder ist. Abgesehen von diesen grundlegenden Warnungen bietet SweetAlert noch viel mehr wie Erfolgsmeldungen, Warnmodelle, Ajax-Behandlung in Popups usw.<\/p>\n<h3>SweetAlert-Dialogfelder<\/h3>\n<p>W\u00e4hrend der Verwendung von SweetAlert haben wir die volle Kontrolle \u00fcber den Text und die Schaltfl\u00e4chen der Dialogfelder. Wir k\u00f6nnen den \u00dcberschriftstext und den Schaltfl\u00e4chentext nach Belieben \u00e4ndern.<\/p>\n<p>Nachfolgend finden Sie einige Beispiele f\u00fcr SweetAlert-Dialogfelder.<\/p>\n<p><strong>Dialogfeld \u201eWarnung&#8220;<\/strong><\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70ae9734.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70ae9734.png\" alt=\"SweetAlert - Ein sch\u00f6ner Ersatz f\u00fcr JavaScript-Dialogfelder\" ><\/a><\/p>\n<p><strong>Dialogfeld \u201eBest\u00e4tigen&#8220;<\/strong><\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70b4612a.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70b4612a.png\" alt=\"SweetAlert - Ein sch\u00f6ner Ersatz f\u00fcr JavaScript-Dialogfelder\" ><\/a><\/p>\n<p><strong>Eingabeaufforderungsdialogfeld<\/strong><\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70baf757.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70baf757.png\" alt=\"SweetAlert - Ein sch\u00f6ner Ersatz f\u00fcr JavaScript-Dialogfelder\" ><\/a><\/p>\n<h3>So verwenden Sie SweetAlert<\/h3>\n<p>Die Verwendung von SweetAlert in der Anwendung ist ein unkomplizierter Vorgang. Es erfordert, dass wir ihre JS-Datei einschlie\u00dfen und wir sind gut darin, die Methoden der SweetAlert-Bibliothek zu verwenden.<\/p>\n<h4>Beispiel f\u00fcr eine Warnbox<\/h4>\n<pre><code>&lt;script src=\"\/\/unpkg.com\/sweetalert\/dist\/sweetalert.min.js\"&gt;&lt;\/script&gt;\n&lt;script&gt;\nswal(\"Hello world!\");\n&lt;\/script&gt;<\/code><\/pre>\n<p>W\u00e4hrend Sie SweetAlert verwenden, m\u00fcssen Sie die <code>swal<\/code>Funktion verwenden, um die verschiedenen Arten von Dialogfeldern aufzurufen. Der obige Code gibt ein Popup mit dem Text &#8218;Hallo Welt!&#8216; aus.<\/p>\n<p>Wir k\u00f6nnen auch den modalen Titel und dann den Text wie folgt festlegen;<\/p>\n<pre><code>swal(\"Here's the title!\", \"...and here's the text!\");<\/code><\/pre>\n<p>Wenn Sie aufgrund der Art der Operation ein Popup anzeigen m\u00f6chten, \u00fcbergeben Sie das dritte Argument. Drittes Argument kann \u201eErfolg&#8220;, \u201eWarnung&#8220;, \u201eFehler&#8220;, \u201eInfo&#8220; sein.<\/p>\n<pre><code>swal(\"Good job!\", \"You clicked the button!\", \"success\"); \/\/success, warning, error, info<\/code><\/pre>\n<p>Probieren Sie alle Werte des dritten Arguments aus und Sie erhalten f\u00fcr jeden von ihnen eine andere Benutzeroberfl\u00e4che.<\/p>\n<h4>Beispiel f\u00fcr ein Best\u00e4tigungsfeld<\/h4>\n<p>Um das SweetAlert-Best\u00e4tigungsfeld zu verwenden, verwenden Sie den folgenden Code:<\/p>\n<pre><code>swal({\n\u00a0\u00a0\u00a0\u00a0title: \"Are you sure?\",\n\u00a0\u00a0\u00a0\u00a0text: \"Once deleted, you will not be able to recover this record!\",\n\u00a0\u00a0\u00a0\u00a0icon: \"warning\",\n\u00a0\u00a0\u00a0\u00a0buttons: true,\n\u00a0\u00a0\u00a0\u00a0dangerMode: true,\n})\n.then((willDelete) =&gt; {\n\u00a0\u00a0\u00a0\u00a0if (willDelete) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Poof! Your record has been deleted!\", {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon: \"success\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Your imaginary file is safe!\");\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n<p>Manchmal m\u00fcssen wir AJAX-Anfragen mit dem Best\u00e4tigungsdialogfeld senden. In diesem Fall senden wir nach dem Klicken auf den Best\u00e4tigen-Button eine AJAX-Anfrage und behandeln die Antwort dann wie folgt.<\/p>\n<pre><code>swal({\n\u00a0\u00a0\u00a0\u00a0title: \"Are you sure?\",\n\u00a0\u00a0\u00a0\u00a0text: \"Once deleted, you will not be able to recover this record!\",\n\u00a0\u00a0\u00a0\u00a0icon: \"warning\",\n\u00a0\u00a0\u00a0\u00a0buttons: true,\n\u00a0\u00a0\u00a0\u00a0dangerMode: true,\n})\n.then((willDelete) =&gt; {\n\u00a0\u00a0\u00a0\u00a0if (willDelete) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0jQuery.get('ajax.php', function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == true) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Poof! Your record has been deleted!\", {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon: \"success\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Your imaginary file is safe!\");\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n<h4>Beispiel f\u00fcr eine Eingabeaufforderungsbox<\/h4>\n<p>Ein Eingabeaufforderungsdialogfeld wird auf der Website sehr selten verwendet. Wenn es jedoch jemand mit SwetAlert verwenden m\u00f6chte, verwenden Sie den folgenden Code.<\/p>\n<pre><code>swal(\"Write something here:\", {\n\u00a0\u00a0\u00a0\u00a0content: \"input\",\n})\n.then((value) =&gt; {\n\u00a0\u00a0\u00a0\u00a0swal(`You typed: ${value}`);\n});<\/code><\/pre>\n<p>Dies sind die Grundlagen der SweetAlert-Bibliothek. Weitere Informationen finden Sie in der SweetAlert- <a href=\"https:\/\/sweetalert.js.org\/docs\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dokumentation<\/a>.<\/p>\n<h4>Zum Thema passende Artikel<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/statische-website-kostenlos-auf-firebase-hosting-bereitstellen\/\" title=\"Statische Website kostenlos auf Firebase Hosting bereitstellen\">Statische Website kostenlos auf Firebase Hosting bereitstellen<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/google-recaptcha-mit-javascript-validieren\/\" title=\"Google reCAPTCHA mit JavaScript validieren\">Google reCAPTCHA mit JavaScript validieren<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/html-formularvalidierung-mit-petersilie\/\" title=\"HTML-Formularvalidierung mit Petersilie\">HTML-Formularvalidierung mit Petersilie<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SweetAlert ist ein sch\u00f6ner Ersatz f\u00fcr JavaScript-Dialogfelder. Mit SweetAlert erstellte Dialogfelder bieten eine bessere Benutzererfahrung als<\/p>\n","protected":false},"author":1,"featured_media":21636,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[244],"tags":[845],"class_list":["post-25580","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-3","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=25580"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25580\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/21636"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=25580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=25580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=25580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}