add event binding page

olton · Jul 25, 2015 · fe0d957 · fe0d957
1 parent 76873e1
commit fe0d957
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@
 * add rotate dropdown-toggle marker
 * add onclick event and touch for tile plugin
 * upd touch support for slider
+* upd event binding model for widgets [Event binding](http://metroui.org.ua/events.html)
 
 ## 3.0.7
 * add padding for container on mobile devices

diff --git a/build/js/metro.js b/build/js/metro.js
@@ -4045,7 +4045,7 @@ $.widget("metro.dropdown", {
         $(document).on('click', function(e){
             $('[data-role=dropdown]').each(function(i, el){
                 if (!$(el).hasClass('keep-open') && $(el).css('display')==='block') {
-                    $(el).hide();
+                    that._close(el);
                 }
             });
         });

diff --git a/build/js/metro.min.js b/build/js/metro.min.js
diff --git a/docs/dataTables.html b/docs/dataTables.html
@@ -45,7 +45,7 @@ <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Dat
         </div>
 
         <div class="padding20 info">
-            This is third-party plugin. To use this plugin you must <a href="http://datatables.net/">download</a> it from the home page.
+            This is third-party plugin. To use this plugin you must <a href="http://datatables.net/datatables.html">download</a> it from the home page.
         </div>
 
         <br />

diff --git a/docs/events.html b/docs/events.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
+    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
+    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">
+
+    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
+    <title>Event binding :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>
+
+    <link href="css/metro.css" rel="stylesheet">
+    <link href="css/metro-icons.css" rel="stylesheet">
+    <link href="css/metro-responsive.css" rel="stylesheet">
+    <link href="css/metro-schemes.css" rel="stylesheet">
+
+    <link href="css/docs.css" rel="stylesheet">
+
+    <script src="js/jquery-2.1.3.min.js"></script>
+    <script src="js/metro.js"></script>
+    <script src="js/docs.js"></script>
+    <script src="js/prettify/run_prettify.js"></script>
+    <script src="js/ga.js"></script>
+    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+
+</head>
+<body>
+    <div class="container page-content">
+        <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Event binding</h1>
+
+        @@adsense
+
+        <div class="margin20 no-margin-left no-margin-right sub-header text-light">
+            Many widgets have any events. Metro UI CSS provides several ways to define events.
+        </div>
+
+        <div class="example" data-text="example">
+            <h5>Function name</h5>
+            <pre class="prettyprint linenums"><code>
+                &lt;form data-role="validator" data-on-submit="func_name"&gt;
+                    ...
+                &lt;/form&gt;
+
+                &lt;script&gt;
+                    function func_name(form){
+                        return false;
+                    }
+                &lt;/script&gt;
+            </code></pre>
+
+            <h5>Internal javascript</h5>
+            <pre class="prettyprint linenums"><code>
+                &lt;form data-role="validator" data-on-submit="return false"&gt;
+                    ...
+                &lt;/form&gt;
+            </code></pre>
+
+            <h5>Javascript</h5>
+            <pre class="prettyprint linenums"><code>
+                &lt;form id="form1"&gt;
+                    ...
+                &lt;/form&gt;
+
+                &lt;script&gt;
+                    $(function(){
+                        $("#form1").validator({
+                            onSubmit: function(form){
+                                return false;
+                            }
+                        });
+                    });
+                &lt;/script&gt;
+            </code></pre>
+        </div>
+
+    </div>
+
+    @@hit
+
+</body>
+</html>
diff --git a/docs/header.html b/docs/header.html
@@ -91,6 +91,8 @@
                     <li><a href="charms.html">Charms</a></li>
                     <li><a href="validator.html">Form Validator</a></li>
                     <li class="divider"></li>
+                    <li><a href="events.html">Events</a></li>
+                    <li class="divider"></li>
                     <li>
                         <a href="#" class="dropdown-toggle">Third-party</a>
                         <ul class="d-menu" data-role="dropdown" data-no-close="true">

diff --git a/docs/js/docs.js b/docs/js/docs.js
@@ -30,7 +30,6 @@ jQuery(document).ready(function($){
 
 
 if (window.location.hostname !== 'localhost') {
-    console.log(window.location.hostname);
 
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/docs/js/metro.js b/docs/js/metro.js
@@ -4045,7 +4045,7 @@ $.widget("metro.dropdown", {
         $(document).on('click', function(e){
             $('[data-role=dropdown]').each(function(i, el){
                 if (!$(el).hasClass('keep-open') && $(el).css('display')==='block') {
-                    $(el).hide();
+                    that._close(el);
                 }
             });
         });

diff --git a/js/widgets/dropdown.js b/js/widgets/dropdown.js
@@ -81,7 +81,7 @@ $.widget("metro.dropdown", {
         $(document).on('click', function(e){
             $('[data-role=dropdown]').each(function(i, el){
                 if (!$(el).hasClass('keep-open') && $(el).css('display')==='block') {
-                    $(el).hide();
+                    that._close(el);
                 }
             });
         });
-Original file line number
+Diff line change
@@ Expand Up @@
             </div>
             <div class="padding20 info">
-                This is third-party plugin. To use this plugin you must <a href="http://datatables.net/">download</a> it from the home page.
+                This is third-party plugin. To use this plugin you must <a href="http://datatables.net/datatables.html">download</a> it from the home page.
             </div>
             <br />
@@ Expand Down @@