examples

jackocnr · Jan 13, 2014 · 2a67476 · 2a67476
1 parent d3fd2a0
commit 2a67476
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 2 deletions.
diff --git a/examples/default-country-ip.html b/examples/default-country-ip.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>International Telephone Input</title>
+    <link rel="stylesheet" href="../build/css/intlTelInput.css">
+    <link rel="stylesheet" href="../build/css/demo.css">
+  </head>
+
+  <body>
+    <h1>Example: defaultCountry</h1>
+    <p>Use IP address lookup to set the defaultCountry to the user's country</p>
+
+    <h2>Code</h2>
+    <pre>$.get("http://ipinfo.io", function(response) {
+  $("input").intlTelInput({
+    defaultCountry: response.country.toLowerCase()
+  });
+}, "jsonp");</pre>
+
+    <h2>Result</h2>
+    <input type="tel" placeholder="e.g. +1 702 123 4567">
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="../build/js/intlTelInput.js"></script>
+    <script>
+      $.get("http://ipinfo.io", function(response) {
+        $("input").intlTelInput({
+          defaultCountry: response.country.toLowerCase()
+        });
+      }, "jsonp");
+    </script>
+  </body>
+</html>
diff --git a/examples/modify-country-data.html b/examples/modify-country-data.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>International Telephone Input</title>
+    <link rel="stylesheet" href="../build/css/intlTelInput.css">
+    <link rel="stylesheet" href="../build/css/demo.css">
+  </head>
+
+  <body>
+    <h1>Example: getCountryData()</h1>
+    <p>Use static getCountryData() to update the data to only show localised country names</p>
+
+    <h2>Code</h2>
+    <pre>var countryData = $.fn.intlTelInput.getCountryData();
+$.each(countryData.countries, function(i, country) {
+  country.name = country.name.replace(/.+\((.+)\)/,"$1");
+});
+("input").intlTelInput();</pre>
+
+    <h2>Result</h2>
+    <input type="tel" placeholder="e.g. +1 702 123 4567">
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="../build/js/intlTelInput.js"></script>
+    <script>
+      var countryData = $.fn.intlTelInput.getCountryData();
+      $.each(countryData.countries, function(i, country) {
+        country.name = country.name.replace(/.+\((.+)\)/,"$1");
+      });
+      $("input").intlTelInput();
+    </script>
+  </body>
+</html>
diff --git a/examples/only-countries-europe.html b/examples/only-countries-europe.html
@@ -8,8 +8,9 @@
   </head>
 
   <body>
-    <h1>Example: onlyCountries set to array of European country codes</h1>
-
+    <h1>Example: onlyCountries</h1>
+    <p>Set onlyCountries array to just European country codes</p>
+
     <h2>Code</h2>
     <pre>$("input").intlTelInput({
   onlyCountries: ["al", "ad", "at", "by", "be", "ba", "bg", "hr", "cz", "dk", "ee", "fo",