{"id":25589,"date":"2021-06-10T18:18:00","date_gmt":"2021-06-10T15:18:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25589"},"modified":"2021-10-17T20:20:16","modified_gmt":"2021-10-17T17:20:16","slug":"sweetalert-kaunis-korvike-javascript-valintaikkunoille","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/sweetalert-kaunis-korvike-javascript-valintaikkunoille\/","title":{"rendered":"SweetAlert &#8211; Kaunis korvike JavaScript-valintaikkunoille"},"content":{"rendered":"<p>JavaScript on upotettu kaikkiin selaimiin. JavaScript tarjoaa valintaikkunoita (h\u00e4lytys, vahvistus, kehote), jotka ovat k\u00e4ytett\u00e4viss\u00e4 kaikissa t\u00e4rkeimmiss\u00e4 selaimissa. Kukin selain n\u00e4ytt\u00e4\u00e4 n\u00e4m\u00e4 valintaikkunat eri tavalla k\u00e4ytt\u00f6liittym\u00e4n suhteen.<\/p>\n<p>Sovellusta rakentaessamme ensisijaisesti k\u00e4ytt\u00e4j\u00e4kokemus. Ja jossain JavaScript-valintaikkunat eiv\u00e4t tarjoa hyv\u00e4\u00e4 k\u00e4ytt\u00f6kokemusta. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 jokaisella selaimella n\u00e4ill\u00e4 ruuduilla on erilainen k\u00e4ytt\u00f6liittym\u00e4, joka jotenkin rikkoo ulkoasun ja tuntuman yhdenmukaisuutta.<\/p>\n<p>T\u00e4ss\u00e4 artikkelissa keskustelemme <a href=\"https:\/\/sweetalert.js.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SweetAlertista,<\/a> joka on kaunis korvaava JavaScript-valintaikkuna. N\u00e4iden perush\u00e4lytysten lis\u00e4ksi SweetAlert tarjoaa paljon enemm\u00e4n kuin onnistumisvirheilmoitukset, varoitusmallit, Ajaxin k\u00e4sittely ponnahdusikkunoissa jne.<\/p>\n<h3>SweetAlert-valintaikkunat<\/h3>\n<p>Kun k\u00e4yt\u00e4mme SweetAlertia, meill\u00e4 on t\u00e4ysi hallinta valintaikkunoiden tekstin ja painikkeiden kanssa. Voimme muuttaa otsikkoteksti\u00e4, painikkeen teksti\u00e4 mukavuutemme mukaisesti.<\/p>\n<p>Alla on esimerkkej\u00e4 SweetAlert-valintaikkunoista.<\/p>\n<p><strong>H\u00e4lytysvalintaikkuna<\/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 - Kaunis korvike JavaScript-valintaikkunoille\" ><\/a><\/p>\n<p><strong>Vahvista valintaikkuna<\/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 - Kaunis korvike JavaScript-valintaikkunoille\" ><\/a><\/p>\n<p><strong>Kehote -valintaikkuna<\/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 - Kaunis korvike JavaScript-valintaikkunoille\" ><\/a><\/p>\n<h3>Kuinka k\u00e4ytt\u00e4\u00e4 SweetAlertia<\/h3>\n<p>SweetAlertin k\u00e4ytt\u00f6 sovelluksessa on yksinkertainen prosessi. Se vaatii meit\u00e4 sis\u00e4llytt\u00e4m\u00e4\u00e4n heid\u00e4n JS-tiedostonsa, ja olemme hyvi\u00e4 k\u00e4ytt\u00e4m\u00e4\u00e4n SweetAlert-kirjaston menetelmi\u00e4.<\/p>\n<h4>Esimerkki h\u00e4lytyslaatikosta<\/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>Kun k\u00e4yt\u00e4t SweetAlert-sovellusta, sinun on k\u00e4ytett\u00e4v\u00e4 <code>swal<\/code>toimintoa kutsumaan erityyppisi\u00e4 valintaikkunoita. Yll\u00e4 oleva koodi antaa ponnahdusikkunan tekstill\u00e4 &#8217;Hei maailma!&#8217;.<\/p>\n<p>Voimme my\u00f6s asettaa modaalisen otsikon ja sitten tekstin seuraavasti;<\/p>\n<pre><code>swal(\"Here's the title!\", \"...and here's the text!\");<\/code><\/pre>\n<p>Jos haluat n\u00e4ytt\u00e4\u00e4 ponnahdusikkunan toiminnan luonteen perusteella, v\u00e4lit\u00e4 kolmas argumentti. Kolmas argumentti voi olla &quot;menestys&quot;, &quot;varoitus&quot;, &quot;virhe&quot;, &quot;info&quot;.<\/p>\n<pre><code>swal(\"Good job!\", \"You clicked the button!\", \"success\"); \/\/success, warning, error, info<\/code><\/pre>\n<p>Kokeile kaikkia kolmannen argumentin arvoja ja saat eri k\u00e4ytt\u00f6liittym\u00e4n kullekin niist\u00e4.<\/p>\n<h4>Vahvista laatikkoesimerkki<\/h4>\n<p>K\u00e4yt\u00e4 SweetAlert-vahvistusruutua k\u00e4ytt\u00e4m\u00e4ll\u00e4 alla olevaa koodia:<\/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>Joskus meid\u00e4n on l\u00e4hetett\u00e4v\u00e4 AJAX-pyynn\u00f6t vahvistusvalintaikkunan kanssa. Siin\u00e4 tapauksessa l\u00e4het\u00e4mme AJAX-pyynn\u00f6n napsauttamalla vahvistuspainiketta ja k\u00e4sittelemme vastausta seuraavasti.<\/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>Esimerkki kehotteesta<\/h4>\n<p>Nopeaa valintaikkunaa k\u00e4ytet\u00e4\u00e4n verkkosivustolla hyvin harvoin. Jos joku kuitenkin haluaa k\u00e4ytt\u00e4\u00e4 sit\u00e4 SwetAlertin kanssa, k\u00e4yt\u00e4 alla olevaa koodia.<\/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>N\u00e4m\u00e4 ovat perustietoja SweetAlert-kirjastosta. Voit tutustua lis\u00e4\u00e4 SweetAlert- <a href=\"https:\/\/sweetalert.js.org\/docs\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentaatioon<\/a>.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/ota-staattinen-verkkosivusto-firebase-hosting-palveluun-ilmaiseksi\/\" title=\"Ota staattinen verkkosivusto Firebase Hosting -palveluun ilmaiseksi\">Ota staattinen verkkosivusto Firebase Hosting -palveluun ilmaiseksi<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/vahvista-google-recaptcha-javascriptin-avulla\/\" title=\"Vahvista Google reCAPTCHA JavaScriptin avulla\">Vahvista Google reCAPTCHA JavaScriptin avulla<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/html-muodon-vahvistus-persiljaa-kayttaen\/\" title=\"HTML-lomakkeen vahvistus persiljalla\">HTML-lomakkeen vahvistus persiljalla<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <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 on kaunis korvike JavaScript-valintaikkunoille. SweetAlertin avulla luodut valintaikkunat lis\u00e4\u00e4v\u00e4t parempaa k\u00e4ytt\u00f6kokemusta kuin<\/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":[247],"tags":[843],"class_list":["post-25589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=25589"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25589\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21636"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=25589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=25589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=25589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}