added new jQuery method to allow selectors for the component. added o…

…ptions to allow custom excludes
mahpour · Jan 14, 2013 · c6607e1 · c6607e1
1 parent 87af38e
commit c6607e1
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 0 deletions.
diff --git a/jquery.input-clear.js b/jquery.input-clear.js
@@ -0,0 +1,76 @@
+/**
+jQuery input clear button
+Dual licensed under the MIT or GPL Version 2 licenses.
+
+Copyright (c) 2013 Ehsan Mahpour
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+(function ($) {
+    "use strict";
+    $.fn.inputClear = function(options) {
+	var settings = $.extend({
+         'exclude':'.no-clear',
+        },options);
+    	return this.each(function() {
+	        // add private event handler to avoid conflict
+                $(this).not(settings.exclude)
+                .unbind("clear-focus")
+                .bind("clear-focus", (
+                    function () {
+                        if ($(this).data("clear-button")) return;
+                        var x = $("<a class='clear-text' style='cursor:pointer;color:#888;'><i class='icon-remove'></i></a>");
+                        $(x).data("text-box", this);
+                        $(x).mouseover(function () { $(this).addClass("over"); }).mouseleave(function () { $(this).removeClass("over"); });
+                        $(this).data("clear-button", x);
+                        $(x).css({ "position": "absolute", "left": ($(this).position().right), "top": $(this).position().top, "margin": "3px 0px 0px -20px" });
+                        $(this).after(x);
+                    //$(this));
+                    }))
+                .unbind("clear-blur").bind("clear-blur", (
+                    function (e){
+                        var x = $(this).data("clear-button");
+                        if (x) {
+                            if ($(x).hasClass("over")) {
+                                $(x).removeClass("over");
+                                $(x).hide().remove();
+                                $(this).val("");
+                                $(this).removeData("clear-button");
+                                var txt = this;
+                                e.stopPropagation();
+                                e.stopImmediatePropagation();
+                                setTimeout($.proxy(function () { $(this).trigger("focus"); }, txt), 50);
+                                return false;
+                            }
+                        }
+                        if (x && !$(x).hasClass("over")) {
+                            $(this).removeData("clear-button");
+                            $(x).remove();
+                        }
+                    }));
+	        // add private event to the focus/unfocus events as branches
+                $(this).on("focus", function () {
+                    $(this).trigger("clear-focus");
+                }).on("blur", function () {
+                    $(this).trigger("clear-blur");
+                });
+            });
+       };
+})(jQuery);
diff --git a/test-jquery.html b/test-jquery.html
@@ -0,0 +1,19 @@
+<html>
+<head>
+    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.css"
+        rel="stylesheet" />
+    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
+    <script src="jquery.input-clear.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        $(function () {
+            $("input").inputClear();
+        });
+    </script>
+</head>
+<body>
+    <p>
+        <input type="text" placeholder="has clear" /><br />
+        <input type="text" class="no-clear" placeholder="has no clear" />
+    </p>
+</body>
+</html>