{"id":29361,"date":"2021-06-10T18:27:00","date_gmt":"2021-06-10T15:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29361"},"modified":"2021-10-17T04:19:06","modified_gmt":"2021-10-17T01:19:06","slug":"sweetalert-en-vacker-ersattning-for-javascript-dialogrutor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/sweetalert-en-vacker-ersattning-for-javascript-dialogrutor\/","title":{"rendered":"SweetAlert – En vacker ers\u00e4ttning f\u00f6r JavaScript-dialogrutor"},"content":{"rendered":"

JavaScript \u00e4r inb\u00e4ddat i alla webbl\u00e4sare. JavaScript inneh\u00e5ller dialogrutor (varning, bekr\u00e4fta, fr\u00e5ga) som \u00e4r tillg\u00e4ngliga i alla st\u00f6rre webbl\u00e4sare. Varje webbl\u00e4sare visar dessa dialogrutor p\u00e5 olika s\u00e4tt n\u00e4r det g\u00e4ller anv\u00e4ndargr\u00e4nssnitt.<\/p>\n

N\u00e4r vi bygger en applikation \u00e4r v\u00e5rt prim\u00e4ra fokus p\u00e5 anv\u00e4ndarupplevelse. Och n\u00e5gonstans ger JavaScript-dialogrutorna inte en bra anv\u00e4ndarupplevelse. Detta beror p\u00e5 att i varje webbl\u00e4sare har dessa rutor olika anv\u00e4ndargr\u00e4nssnitt som p\u00e5 n\u00e5got s\u00e4tt bryter utseendet och k\u00e4nslan.<\/p>\n

I den h\u00e4r artikeln diskuterar vi SweetAlert<\/a> som \u00e4r en vacker ers\u00e4ttning f\u00f6r JavaScript-dialogrutor. Bortsett fr\u00e5n dessa grundl\u00e4ggande varningar, ger SweetAlert mycket mer framg\u00e5ng | felmeddelanden, varningsmodeller, Ajax-hantering i popup-f\u00f6nster etc.<\/p>\n

Dialogrutorna SweetAlert<\/h3>\n

N\u00e4r vi anv\u00e4nder SweetAlert kommer vi att ha full kontroll \u00f6ver text och knappar i dialogrutorna. Vi kan \u00e4ndra rubriktexten, knapptexten enligt v\u00e5r bekv\u00e4mlighet.<\/p>\n

Nedan f\u00f6ljer n\u00e5gra exempel p\u00e5 SweetAlert-dialogrutor.<\/p>\n

Dialogrutan Varning<\/strong><\/p>\n

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

Bekr\u00e4fta dialogrutan<\/strong><\/p>\n

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

Snabb dialogruta<\/strong><\/p>\n

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

Hur man anv\u00e4nder SweetAlert<\/h3>\n

Att anv\u00e4nda SweetAlert i applikationen \u00e4r en enkel process. Det kr\u00e4ver att vi inkluderar deras JS-fil och vi \u00e4r bra att anv\u00e4nda metoderna i SweetAlert-biblioteket.<\/p>\n

Exempel p\u00e5 varningsl\u00e5da<\/h4>\n
<script src=\"\/\/unpkg.com\/sweetalert\/dist\/sweetalert.min.js\"><\/script>\n<script>\nswal(\"Hello world!\");\n<\/script><\/code><\/pre>\n
N\u00e4r du anv\u00e4nder SweetAlert m\u00e5ste du anv\u00e4nda swal<\/code>funktionen f\u00f6r att anropa olika typer av dialogrutor. Ovanst\u00e5ende kod ger en popup med texten ’Hello world!’.<\/p>\n
Vi kan ocks\u00e5 st\u00e4lla in modaltiteln och sedan texten enligt f\u00f6ljande;<\/p>\n
swal(\"Here's the title!\", \"...and here's the text!\");<\/code><\/pre>\n
Om du vill visa en popup p\u00e5 grundval av operationens karakt\u00e4r, skicka sedan det tredje argumentet. Tredje argumentet kan vara ”framg\u00e5ng", ”varning”, ”fel”, ”info”.<\/p>\n
swal(\"Good job!\", \"You clicked the button!\", \"success\"); \/\/success, warning, error, info<\/code><\/pre>\n
F\u00f6rs\u00f6k med alla v\u00e4rden i det tredje argumentet s\u00e5 f\u00e5r du ett annat anv\u00e4ndargr\u00e4nssnitt f\u00f6r var och en av dem.<\/p>\n
Bekr\u00e4fta rutaexempel<\/h4>\n
F\u00f6r att anv\u00e4nda bekr\u00e4ftelsesrutan SweetAlert, anv\u00e4nd koden nedan:<\/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
Ibland beh\u00f6ver vi skicka AJAX-f\u00f6rfr\u00e5gningar med bekr\u00e4ftelsedialogrutan. I s\u00e5 fall skickar vi en AJAX-beg\u00e4ran efter att ha klickat p\u00e5 bekr\u00e4ftelseknappen och hanterar sedan svaret enligt f\u00f6ljande.<\/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
Prompt Box Exempel<\/h4>\n
En snabb dialogruta anv\u00e4nds mycket s\u00e4llan p\u00e5 webbplatsen. Men om n\u00e5gon vill anv\u00e4nda den med SwetAlert, anv\u00e4nd koden nedan.<\/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
Det h\u00e4r \u00e4r grunderna f\u00f6r SweetAlert-biblioteket. Du kan utforska mer i SweetAlert- dokumentationen<\/a>.<\/p>\n
relaterade artiklar<\/h4>\n