{"id":26006,"date":"2021-06-10T18:48:00","date_gmt":"2021-06-10T15:48:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26006"},"modified":"2021-10-18T03:01:59","modified_gmt":"2021-10-18T00:01:59","slug":"sweetalert-un-bellissimo-sostituto-per-le-finestre-di-dialogo-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/sweetalert-un-bellissimo-sostituto-per-le-finestre-di-dialogo-javascript\/","title":{"rendered":"SweetAlert – Un bellissimo sostituto per le finestre di dialogo JavaScript"},"content":{"rendered":"

JavaScript \u00e8 incorporato in tutti i browser. JavaScript fornisce finestre di dialogo (avviso, conferma, richiesta) che sono disponibili in tutti i principali browser. Ogni browser mostra queste finestre di dialogo in modo diverso in termini di interfaccia utente.<\/p>\n

Durante la creazione di un’applicazione, il nostro obiettivo principale \u00e8 l’esperienza dell’utente. E da qualche parte, le finestre di dialogo di JavaScript non forniscono una buona esperienza utente. Questo perch\u00e9 su ogni browser queste caselle hanno un’interfaccia utente diversa che in qualche modo rompe la coerenza dell’aspetto.<\/p>\n

In questo articolo, discutiamo di SweetAlert<\/a> che \u00e8 un bellissimo sostituto delle finestre di dialogo JavaScript. Oltre a questi avvisi di base, SweetAlert offre molto di pi\u00f9 come messaggi di errore | successo, modelli di avviso, gestione di Ajax nei popup, ecc.<\/p>\n

Finestre di dialogo SweetAlert<\/h3>\n

Durante l’utilizzo di SweetAlert avremo il pieno controllo del testo e dei pulsanti delle finestre di dialogo. Possiamo cambiare il testo dell’intestazione, il testo del pulsante secondo la nostra convenienza.<\/p>\n

Di seguito sono riportati alcuni esempi di finestre di dialogo SweetAlert.<\/p>\n

Finestra di dialogo di avviso<\/strong><\/p>\n

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

Conferma finestra di dialogo<\/strong><\/p>\n

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

Finestra di dialogo Prompt<\/strong><\/p>\n

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

Come usare SweetAlert<\/h3>\n

L’utilizzo di SweetAlert nell’applicazione \u00e8 un processo semplice. Ci richiede di includere il loro file JS e siamo bravi a usare i metodi della libreria SweetAlert.<\/p>\n

Esempio di casella di avviso<\/h4>\n
<script src=\"\/\/unpkg.com\/sweetalert\/dist\/sweetalert.min.js\"><\/script>\n<script>\nswal(\"Hello world!\");\n<\/script><\/code><\/pre>\n
Durante l’utilizzo di SweetAlert, \u00e8 necessario utilizzare la swal<\/code>funzione per chiamare i diversi tipi di finestre di dialogo. Il codice sopra mostrer\u00e0 un popup con il testo ‘Hello world!’.<\/p>\n
Possiamo anche impostare il titolo modale e quindi il testo come segue;<\/p>\n
swal(\"Here's the title!\", \"...and here's the text!\");<\/code><\/pre>\n
Se vuoi mostrare un popup in base alla natura dell’operazione, passa il terzo argomento. Il terzo argomento pu\u00f2 essere "successo", "avviso", "errore", "informazioni".<\/p>\n
swal(\"Good job!\", \"You clicked the button!\", \"success\"); \/\/success, warning, error, info<\/code><\/pre>\n
Prova tutti i valori del terzo argomento e otterrai un’interfaccia utente diversa su ciascuno di essi.<\/p>\n
Conferma esempio casella<\/h4>\n
Per utilizzare la casella di conferma SweetAlert, utilizzare il codice seguente:<\/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
A volte, dobbiamo inviare richieste AJAX con la finestra di dialogo di conferma. In tal caso, inviamo una richiesta AJAX dopo aver fatto clic sul pulsante di conferma e quindi gestiamo la risposta come segue.<\/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
Esempio di casella di richiesta<\/h4>\n
Una finestra di dialogo di richiesta viene utilizzata molto raramente sul sito web. Tuttavia, se qualcuno vuole usarlo con SwetAlert, usa il codice qui sotto.<\/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
Queste sono le nozioni di base sulla libreria SweetAlert. Puoi esplorare di pi\u00f9 sulla documentazione di<\/a> SweetAlert .<\/p>\n
articoli Correlati<\/h4>\n