Maison > interface Web > js tutoriel > Le plug-in jquery SweetAlert implémente les compétences d'invite réactive box_javascript

Le plug-in jquery SweetAlert implémente les compétences d'invite réactive box_javascript

WBOY
Libérer: 2016-05-16 15:44:33
original
1452 Les gens l'ont consulté

Le plug-in de couche contextuelle jquery prend en charge les invites de message, les invites d'erreur, les invites de boîte de confirmation, etc. L'expérience interactive est très bonne. Tout le monde utilise WeChat Pay, Alipay, etc. pour compléter l'expérience utilisateur. Ce plug-in doit prendre en charge au moins IE9. La méthode d'utilisation est également très simple et grossière, ce qui est conforme à la méthode d'utilisation populaire du plug-in jquery.

Laissez-moi d'abord vous montrer l'effet :

Aperçu en ligne Téléchargement du code source

Le code est le suivant :

<h1>Sweet Alert</h1>
<h2>A beautiful replacement for JavaScript's "Alert"</h2>
<button class="download">Download</button>
<h3>So... What does it do&#63;</h3>
<p>Here's a comparison of a standard error message. The first one uses the built-in <strong>alert</strong>-function, while the second is using <strong>sweetAlert</strong>.</p>
<div class="showcase normal">
<h4>Normal alert</h4>
<button>Show error message</button>
<h5>Code:</h5>
<pre class="brush:php;toolbar:false"><span class="attr">alert</span>(<span class="str">"Oops... Something went wrong!"</span>);
 

Sweet Alert

Code:
<span class="attr">sweetAlert</span>(<span class="str">"Oops..."</span>, <span class="str">"Something went wrong!"</span>, <span class="str">"error"</span>);

Pretty cool huh? SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!

More examples

In these examples, we're using the shorthand function swal to call sweetAlert.

  • A basic message

    <span class="attr">swal</span>(<span class="str">"Here's a message!"</span>)
  • A title with a text under

    <span class="attr">swal</span>(<span class="str">"Here's a message!"</span>, <span class="str">"It's pretty, isn't it&#63;"</span>)
  • A success message!

    <span class="attr">swal</span>(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)
  • A warning message, with a function attached to the "Confirm"-button...

    Copier après la connexion

Ce qui précède est une explication détaillée de la façon dont le plug-in jquery SweetAlert implémente une boîte de dialogue réactive via le code. J'espère que cela vous sera utile.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal