{"id":26133,"date":"2021-06-10T18:31:00","date_gmt":"2021-06-10T15:31:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26133"},"modified":"2021-10-17T18:21:42","modified_gmt":"2021-10-17T15:21:42","slug":"sweetalert-ilus-asendus-javascripti-dialoogiboksidele","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/sweetalert-ilus-asendus-javascripti-dialoogiboksidele\/","title":{"rendered":"SweetAlert – ilus asendus JavaScripti dialoogiboksidele"},"content":{"rendered":"

JavaScripti on manustatud k\u00f5ikidesse brauseritesse. JavaScript pakub dialoogiboksi (hoiatus, kinnitus, viip), mis on saadaval k\u00f5igis suuremates brauserites. Iga brauser kuvab neid dialoogiaknaid kasutajaliidese osas erinevalt.<\/p>\n

Rakenduse loomisel keskendume esmajoones kasutajakogemusele. Ja kuskil ei paku JavaScripti dialoogiboksid head kasutuskogemust. Selle p\u00f5hjuseks on asjaolu, et igas brauseris on nendel kastidel erinev kasutajaliides, mis kuidagi v\u00e4limuse ja olemuse j\u00e4rjepidevust rikub.<\/p>\n

Selles artiklis k\u00e4sitleme SweetAlertit,<\/a> mis on JavaScripti dialoogibokside ilus asendaja. Peale nende p\u00f5hiteadete pakub SweetAlert palju muud nagu edu | veateated, hoiatusmudelid, Ajaxi k\u00e4itlemine h\u00fcpikakendes jne<\/p>\n

Dialoogiboksid SweetAlert<\/h3>\n

SweetAlerti kasutamisel on meil t\u00e4ielik kontroll dialoogibokside teksti ja nuppude \u00fcle. Me v\u00f5ime muuta pealkirja teksti, nupu teksti vastavalt oma mugavusele.<\/p>\n

Allpool on m\u00f5ned n\u00e4ited SweetAlerti dialoogiboksidest.<\/p>\n

Hoiatuste dialoogiboks<\/strong><\/p>\n

\"SweetAlert<\/a><\/p>\n

Kinnitage dialoogiboks<\/strong><\/p>\n

\"SweetAlert<\/a><\/p>\n

Viiba dialoogiboks<\/strong><\/p>\n

\"SweetAlert<\/a><\/p>\n

Kuidas kasutada SweetAlertit<\/h3>\n

SweetAlerti kasutamine rakenduses on lihtne protsess. See n\u00f5uab meilt nende JS-faili lisamist ja meil on hea kasutada SweetAlerti teegi meetodeid.<\/p>\n

Hoiatuskasti n\u00e4ide<\/h4>\n
<script src=\"\/\/unpkg.com\/sweetalert\/dist\/sweetalert.min.js\"><\/script>\n<script>\nswal(\"Hello world!\");\n<\/script><\/code><\/pre>\n
SweetAlert’i kasutamise ajal peate swal<\/code>funktsiooni kasutama erinevat t\u00fc\u00fcpi dialoogibokside kutsumiseks. \u00dclaltoodud kood annab h\u00fcpikakna tekstiga "Tere maailm!".<\/p>\n
Samuti saame m\u00e4\u00e4rata modaalse pealkirja ja seej\u00e4rel teksti j\u00e4rgmiselt;<\/p>\n
swal(\"Here's the title!\", \"...and here's the text!\");<\/code><\/pre>\n
Kui soovite h\u00fcpiku kuvamist operatsiooni olemuse p\u00f5hjal, siis edastage kolmas argument. Kolmas argument v\u00f5ib olla "edu", "hoiatus", "viga", "teave".<\/p>\n
swal(\"Good job!\", \"You clicked the button!\", \"success\"); \/\/success, warning, error, info<\/code><\/pre>\n
Proovige k\u00f5iki kolmanda argumendi v\u00e4\u00e4rtusi ja saate iga\u00fcks neist erineva kasutajaliidese.<\/p>\n
Kinnita kasti n\u00e4ide<\/h4>\n
SweetAlerti kinnitamise kasti kasutamiseks kasutage allolevat koodi:<\/p>\n
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) => {\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
M\u00f5nikord peame saatma AJAX-i taotlused koos kinnitamise dialoogiboksiga. Sel juhul saadame p\u00e4rast kinnitamisnupule kl\u00f5psamist AJAX-p\u00e4ringu ja k\u00e4sitleme vastust j\u00e4rgmiselt.<\/p>\n
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) => {\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
Viipkasti n\u00e4ide<\/h4>\n
Kiirt dialoogiboksi kasutatakse veebisaidil v\u00e4ga harva. Kui keegi aga soovib seda kasutada koos SwetAlertiga, siis kasutage allolevat koodi.<\/p>\n
swal(\"Write something here:\", {\n\u00a0\u00a0\u00a0\u00a0content: \"input\",\n})\n.then((value) => {\n\u00a0\u00a0\u00a0\u00a0swal(`You typed: ${value}`);\n});<\/code><\/pre>\n
Need on SweetAlerti raamatukogu p\u00f5hit\u00f5ed. Lisateavet leiate SweetAlerti dokumentatsioonist<\/a>.<\/p>\n
seotud artiklid<\/h4>\n