{"id":29233,"date":"2021-06-10T18:49:00","date_gmt":"2021-06-10T15:49:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29233"},"modified":"2021-10-18T03:33:39","modified_gmt":"2021-10-18T00:33:39","slug":"sweetalert-piekny-zamiennik-okien-dialogowych-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/sweetalert-piekny-zamiennik-okien-dialogowych-javascript\/","title":{"rendered":"SweetAlert \u2014 pi\u0119kny zamiennik okien dialogowych JavaScript"},"content":{"rendered":"<p>JavaScript jest osadzony we wszystkich przegl\u0105darkach. JavaScript udost\u0119pnia okna dialogowe (alert, potwierdzenie, monit), kt\u00f3re s\u0105 dost\u0119pne we wszystkich g\u0142\u00f3wnych przegl\u0105darkach. Ka\u017cda przegl\u0105darka wy\u015bwietla te okna dialogowe inaczej pod wzgl\u0119dem interfejsu u\u017cytkownika.<\/p>\n<p>Podczas tworzenia aplikacji skupiamy si\u0119 przede wszystkim na do\u015bwiadczeniu u\u017cytkownika. I gdzie\u015b, okna dialogowe JavaScript nie zapewniaj\u0105 dobrego do\u015bwiadczenia u\u017cytkownika. Dzieje si\u0119 tak, poniewa\u017c w ka\u017cdej przegl\u0105darce te pola maj\u0105 inny interfejs u\u017cytkownika, co w jaki\u015b spos\u00f3b \u0142amie sp\u00f3jno\u015b\u0107 wygl\u0105du i stylu.<\/p>\n<p>W tym artykule om\u00f3wimy <a href=\"https:\/\/sweetalert.js.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SweetAlert,<\/a> kt\u00f3ry jest pi\u0119knym zamiennikiem okien dialogowych JavaScript. Opr\u00f3cz tych podstawowych alert\u00f3w SweetAlert zapewnia znacznie wi\u0119cej, takich jak komunikaty o sukcesie | komunikaty o b\u0142\u0119dach, modele ostrze\u017ce\u0144, obs\u0142uga Ajax w wyskakuj\u0105cych okienkach itp.<\/p>\n<h3>Okna dialogowe SweetAlert<\/h3>\n<p>U\u017cywaj\u0105c SweetAlert b\u0119dziemy mieli pe\u0142n\u0105 kontrol\u0119 nad tekstem i przyciskami okien dialogowych. Mo\u017cemy zmieni\u0107 tekst nag\u0142\u00f3wka, tekst przycisku wed\u0142ug naszej wygody.<\/p>\n<p>Poni\u017cej znajduje si\u0119 kilka przyk\u0142ad\u00f3w okien dialogowych SweetAlert.<\/p>\n<p><strong>Okno dialogowe alertu<\/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 \u2014 pi\u0119kny zamiennik okien dialogowych JavaScript\" ><\/a><\/p>\n<p><strong>Okno dialogowe potwierdzenia Dialog<\/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 \u2014 pi\u0119kny zamiennik okien dialogowych JavaScript\" ><\/a><\/p>\n<p><strong>Okno dialogowe monitu<\/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 \u2014 pi\u0119kny zamiennik okien dialogowych JavaScript\" ><\/a><\/p>\n<h3>Jak u\u017cywa\u0107 SweetAlert<\/h3>\n<p>U\u017cywanie SweetAlert w aplikacji jest prostym procesem. Wymaga to od nas do\u0142\u0105czenia ich pliku JS i dobrze jest korzysta\u0107 z metod biblioteki SweetAlert.<\/p>\n<h4>Przyk\u0142ad pola alertu<\/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>U\u017cywaj\u0105c SweetAlert, musisz u\u017cy\u0107 <code>swal<\/code>funkcji do wywo\u0142ania r\u00f3\u017cnych typ\u00f3w okien dialogowych. Powy\u017cszy kod wy\u015bwietli wyskakuj\u0105ce okienko z tekstem \u201eHello world!&quot;.<\/p>\n<p>Mo\u017cemy r\u00f3wnie\u017c ustawi\u0107 tytu\u0142 modalny, a nast\u0119pnie tekst w nast\u0119puj\u0105cy spos\u00f3b;<\/p>\n<pre><code>swal(\"Here's the title!\", \"...and here's the text!\");<\/code><\/pre>\n<p>Je\u015bli chcesz pokaza\u0107 wyskakuj\u0105ce okienko na podstawie charakteru operacji, przeka\u017c trzeci argument. Trzecim argumentem mo\u017ce by\u0107 \u201esukces&#8221;, \u201eostrze\u017cenie&#8221;, \u201eb\u0142\u0105d&#8221;, \u201einformacje&#8221;.<\/p>\n<pre><code>swal(\"Good job!\", \"You clicked the button!\", \"success\"); \/\/success, warning, error, info<\/code><\/pre>\n<p>Wypr\u00f3buj wszystkie warto\u015bci trzeciego argumentu, a dla ka\u017cdego z nich otrzymasz inny interfejs u\u017cytkownika.<\/p>\n<h4>Przyk\u0142ad pola potwierdzenia Box<\/h4>\n<p>Aby skorzysta\u0107 z pola potwierdzenia SweetAlert, u\u017cyj poni\u017cszego kodu:<\/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>Czasami musimy wys\u0142a\u0107 \u017c\u0105dania AJAX za pomoc\u0105 okna dialogowego potwierdzenia. W takim przypadku wysy\u0142amy \u017c\u0105danie AJAX po klikni\u0119ciu przycisku potwierdzenia, a nast\u0119pnie obs\u0142ugujemy odpowied\u017a w nast\u0119puj\u0105cy spos\u00f3b.<\/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>Przyk\u0142ad pola podpowiedzi<\/h4>\n<p>Okno dialogowe z monitem jest bardzo rzadko u\u017cywane na stronie internetowej. Je\u015bli jednak kto\u015b chce go u\u017cywa\u0107 ze SwetAlert to u\u017cyj poni\u017cszego kodu.<\/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>To s\u0105 podstawy biblioteki SweetAlert. Wi\u0119cej informacji znajdziesz w <a href=\"https:\/\/sweetalert.js.org\/docs\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentacji<\/a> SweetAlert .<\/p>\n<h4>Powi\u0105zane artyku\u0142y<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/wdroz-witryne-statyczna-w-hostingu-firebase-za-darmo\/\" title=\"Wdr\u00f3\u017c witryn\u0119 statyczn\u0105 w Hostingu Firebase za darmo\">Wdr\u00f3\u017c witryn\u0119 statyczn\u0105 w Hostingu Firebase za darmo<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/zweryfikuj-google-recaptcha-za-pomoca-javascript\/\" title=\"Zweryfikuj Google reCAPTCHA za pomoc\u0105 JavaScript\">Zweryfikuj Google reCAPTCHA za pomoc\u0105 JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/walidacja-formularza-html-za-pomoca-pietruszki\/\" title=\"Walidacja formularza HTML za pomoc\u0105 pietruszki\">Walidacja formularza HTML za pomoc\u0105 pietruszki<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <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 to pi\u0119kny zamiennik okien dialogowych JavaScript. Okna dialogowe utworzone za pomoc\u0105 SweetAlert zapewniaj\u0105 lepsze wra\u017cenia u\u017cytkownika ni\u017c<\/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":[249],"tags":[847],"class_list":["post-29233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-8","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/29233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=29233"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/29233\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/21636"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=29233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=29233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=29233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}