• jQuery 视频教程

jQuery - Alertify.js

Alertify.js 是一个 jQuery 插件，用于以不同格式显示警报消息

一个简单的alertify示例如下所示 -

<!doctype html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8">
      <title>alertify.js - example page</title>
      <link rel = "stylesheet" href = "alertify.core.css" />
      <link rel = "stylesheet" href = "alertify.default.css" id = "toggleCSS" />
      <meta name = "viewport" content = "width = device-width">
		
      <style>
         .alertify-log-custom {
            background: blue;
         }
      </style>
   </head>
	
   <body>
      <h2>Dialogs</h2>
		
      <a href = "#" id = "alert">Alert Dialog</a><br>
      <a href = "#" id = "confirm">Confirm Dialog</a><br>
      <a href = "#" id = "prompt">Prompt Dialog</a><br>
      <a href = "#" id = "labels">Custom Labels</a><br>
      <a href = "#" id = "focus">Button Focus</a><br>
      <a href = "#" id = "order">Button Order</a>

      <h2>Ajax</h2>
      <a href = "#" id = "ajax">Ajax - Multiple Dialog</a>

      <h2>Logs</h2>
		
      <a href = "#" id = "notification">Standard Log</a><br>
      <a href = "#" id = "success">Success Log</a><br>
      <a href = "#" id = "error">Error Log</a><br>
      <a href = "#" id = "custom">Custom Log</a><br>
      <a href = "#" id = "delay">Hide in 10 seconds</a><br>
      <a href = "#" id = "forever">Persistent Log</a>

      <h2>Themes</h2>
      <a href = "#" id = "bootstrap">Bootstrap Theme</a>

      <script src = "https://code.jquery.com/jquery-1.9.1.js">
      </script>
      <script src = "alertify.min.js"></script>
		
      <script>
         function reset () {
            $("#toggleCSS").attr("href", "alertify.default.css");
				
            alertify.set({
               labels : {
                  ok     : "OK",
                  cancel : "Cancel"
               },
					delay : 5000,
               buttonReverse : false,
               buttonFocus   : "ok"
            });
         }
         $("#alert").on( 'click', function () {
            reset();
            alertify.alert("This is an alert dialog");
            return false;
         });
         $("#confirm").on( 'click', function () {
            reset();
				
            alertify.confirm("This is a confirm dialog", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            });
				
            return false;
         });
         $("#prompt").on( 'click', function () {
            reset();
				
            alertify.prompt("This is a prompt dialog", function (e, str) {
               if (e) {
                  alertify.success("You've clicked OK and typed: " + str);
               } else {
                  alertify.error("You've clicked Cancel");
               }
            }, "Default Value");
				
            return false;
         });
         $("#ajax").on("click", function () {
            reset();
				
            alertify.confirm("Confirm?", function (e) {
               if (e) {
                  alertify.alert("Successful AJAX after OK");
               } else {
                  alertify.alert("Successful AJAX after Cancel");
               }
            });
         });
         $("#notification").on( 'click', function () {
            reset();
            alertify.log("Standard log message");
            return false;
         });
         $("#success").on( 'click', function () {
            reset();
            alertify.success("Success log message");
            return false;
         });
         $("#error").on( 'click', function () {
            reset();
            alertify.error("Error log message");
            return false;
         });
         $("#delay").on( 'click', function () {
            reset();
            alertify.set({ delay: 10000 });
            alertify.log("Hiding in 10 seconds");
            return false;
         });
         $("#forever").on( 'click', function () {
            reset();
            alertify.log("Will stay until clicked", "", 0);
            return false;
         });
         $("#labels").on( 'click', function () {
            reset();
            alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
				
            alertify.confirm("Confirm dialog with custom button labels", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            });
				
            return false;
         });
         $("#focus").on( 'click', function () {
            reset();
            alertify.set({ buttonFocus: "cancel" });
				
            alertify.confirm("Confirm dialog with cancel button focused", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            });
				
            return false;
         });
         $("#order").on( 'click', function () {
            reset();
            alertify.set({ buttonReverse: true });
				
            alertify.confirm("Confirm dialog with reversed button order", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            });
				
            return false;
         });
         $("#custom").on( 'click', function () {
            reset();
            alertify.custom = alertify.extend("custom");
            alertify.custom("I'm a custom log message");
            return false;
         });
         $("#bootstrap").on( 'click', function () {
            reset();
            $("#toggleCSS").attr("href", ".alertify.bootstrap.css");
				
            alertify.prompt("Prompt dialog with bootstrap theme", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            }, "Default Value");
				
            return false;
         });
			
      </script>
   </body>
</html>

这应该产生以下结果 -

点击这里