Added a 'simple' and a 'complex' standalone example

mailcheck · Mar 22, 2012 · f0a147d · f0a147d
1 parent 1fe7b42
commit f0a147d
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 0 deletions.
diff --git a/example/complex.html b/example/complex.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mailcheck Example</title>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="../src/jquery.mailcheck.min.js"></script>
+    <script>
+      $(function(){
+		    // The domains to check for
+        var domains = ["yahoo.com","google.com","hotmail.com","gmail.com","me.com","aol.com","mac.com","live.com","comcast.net","googlemail.com","msn.com","qq.com","163.com","hotmail.fr","yahoo.fr","yahoo.com.tw","hotmail.it","sbcglobal.net","hotmail.co.uk","yahoo.co.uk","yahoo.es"];
+
+        $('#email').blur(function() {
+          // Run the check
+          $('#email').mailcheck(domains, {
+            suggested: function(element, suggestion) {
+              // Offer up the suggestion
+              $('#did-you-mean a').html('Did you mean \<span>'+suggestion.full+'\</span>?');
+              // Then show it
+              $('#did-you-mean').slideDown();
+              // Bind the new full suggestion to fill in the form on clicking the suggestion
+              $('#did-you-mean a').on('click', function() {
+                $('#email').val(suggestion.full);
+              });
+            },
+            empty: function(element) {
+              // If no suggestion, hide the suggestion line
+              $('#did-you-mean').slideUp();
+            }
+          })
+        });
+      });
+    </script>
+    <style>
+      form {width:250px;margin:100px auto;}
+      label {display:block;}
+      .input input {width:200px;}
+      .submit {margin:10px 0;}
+      #did-you-mean {display:none;}
+      #did-you-mean a span {text-decoration:underline;}
+    </style>
+  </head>
+  <body>
+    <form method="post">
+      <div class="input">
+        <label for="email">Email Address</label>
+        <input type="text" name="email" id="email" />
+        <div id="did-you-mean"><a></a></div>
+      </div>
+      <div class="submit">
+        <input type="submit" value="submit" />
+      </div>
+    </form>
+  </body>
+</html>
diff --git a/example/simple.html b/example/simple.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mailcheck Example</title>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="../src/jquery.mailcheck.min.js"></script>
+    <script>
+      // The domains to check for
+      var domains = ["yahoo.com","google.com","hotmail.com","gmail.com","me.com","aol.com","mac.com","live.com","comcast.net","googlemail.com","msn.com","qq.com","163.com","hotmail.fr","yahoo.fr","yahoo.com.tw","hotmail.it","sbcglobal.net","hotmail.co.uk","yahoo.co.uk","yahoo.es"];
+      $(function(){
+        $('#email').blur(function() {
+          // Run the check
+          $('#email').mailcheck(domains, {
+            suggested: function(element, suggestion) {
+              alert('Did you mean to type "'+suggestion.full+'"?');
+            }
+          })
+        });
+      });
+    </script>
+    <style>
+      form {width:250px;margin:100px auto;}
+      label {display:block;}
+      .input input {width:200px;}
+      .submit {margin:10px 0;}
+    </style>
+  </head>
+  <body>
+    <form method="post">
+      <div class="input">
+        <label for="email">Email Address</label>
+        <input type="text" name="email" id="email" />
+      </div>
+      <div class="submit">
+        <input type="submit" value="submit" />
+      </div>
+    </form>
+  </body>
+</html>