Guide d'utilisation du plug-in d'alerte jQuery alertify_jquery

1.Fonction de plug-in d'alerte

Implémente principalement la fonction d'invite, qui est utilisée pour remplacer l'alerte, la confirmation, l'invite en js et afficher une boîte d'invite conviviale

2. Comment utiliser alertify

1. Fichiers utilisés
Utilisez principalement trois fichiers et deux CSS (alertify.core.css, alertify.default.css) pour définir le style de la boîte d'invite. Un js (alertify.min.js ou alertify.js), utilisé pour implémenter la fonction de la boîte d'invite.

2. Implémenter le code de la boîte d'invite
Alertify est très simple à utiliser. Les principales étapes sont : initialisation (initialiser alertify) -> liaison (événement de liaison)

Comme la mise en œuvre de boîtes d'invite simples, de boîtes de confirmation et de boîtes d'invite

var
$ = function (id) {
  return document.getElementById(id);
},
//初始化操作
reset = function () {
  alertify.set({
    labels : {
      ok   : "确认",
      cancel : "取消"
    },
    delay : 5000,
    buttonReverse : false,
    buttonFocus  : "ok"
  });
};
//绑定
$("alert").onclick = function () {
   reset();
   alertify.alert("提示框");
   return false;
};
//绑定
$("confirm").onclick = function () {
   reset();
   alertify.confirm("确认框", function (e) {
     if (e) {
       alertify.success("点击确认");
     } else {
       alertify.error("点击取消");
     }
   });
   return false;
};
//绑定
$("prompt").onclick = function () {
  reset();
  alertify.prompt("提示输入框", function (e, str) {
    if (e) {
      alertify.success("点击确认，输入内容为: " + str);
    } else {
      alertify.error("点击取消");
    }
  }, "默认值");
  return false;
};

Afficher les résultats (zone d'invite de saisie) :

4.alertify modifier le style
Il modifie principalement deux fichiers CSS (alertify.core.css, alertify.default.css), qui peuvent également être écrasés. Si vous ajoutez

à la page

.alertify{
  width:350px;
  margin-left: -205px;
  border:2px solid #4ba9e6;
  background:#f3faff;
  border-radius:0;
}

Afficher le résultat après modification :

alerter les instructions d'utilisation

alertify est un plug-in développé par html5 css3, il supporte donc parfaitement les navigateurs html5 css3. Pendant le processus de test, l'effet d'affichage d'alertify est parfait dans les navigateurs Chrome et Firefox, mais dans IE8, l'effet d'affichage est différent, comme les coins arrondis, les ombres, les effets spéciaux animés, etc.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.