jQuery-Eingabeaufforderungs-Plug-in „Alertify Usage Guide_jquery'.

1.Plug-in-Funktion benachrichtigen

Implementiert hauptsächlich die Eingabeaufforderungsfunktion, die verwendet wird, um Warnungen, Bestätigungen und Eingabeaufforderungen in js zu ersetzen und ein benutzerfreundliches Eingabeaufforderungsfeld anzuzeigen

2. So verwenden Sie Alertify

1. Verwendete Dateien
Verwenden Sie hauptsächlich drei Dateien und zwei CSS (alertify.core.css, alarmify.default.css), um den Stil des Eingabeaufforderungsfelds festzulegen. Ein js (alertify.min.js oder alarmify.js), das zum Implementieren der Funktion des Eingabeaufforderungsfelds verwendet wird.

2. Implementieren Sie den Eingabeaufforderungscode
Alertify ist sehr einfach zu verwenden. Die Hauptschritte sind: Initialisierung (Alertify initialisieren) -> Bindung (Bindungsereignis)

Zum Beispiel die Implementierung einfacher Eingabeaufforderungsfelder, Bestätigungsfelder und Eingabeaufforderungsfelder

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;
};

Ergebnisse anzeigen (Eingabefeld):

4.Änderungsstil benachrichtigen
Es ändert hauptsächlich zwei CSS-Dateien (alertify.core.css, alarmify.default.css), die auch überschrieben werden können. Wenn Sie

zur Seite hinzufügen

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

Zeigen Sie das Ergebnis nach der Änderung an:

Gebrauchshinweise beachten

alertify ist ein von HTML5 CSS3 entwickeltes Plug-In und unterstützt daher perfekt HTML5 CSS3-Browser. Während des Testvorgangs ist der Anzeigeeffekt von Alertify in den Browsern Chrome und Firefox perfekt, in IE8 ist der Anzeigeeffekt jedoch anders, z. B. werden abgerundete Ecken, Schatten, animierte Spezialeffekte usw. nicht angezeigt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.