Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit 15806d029ba251ea377403413ace1b47d7d84e62 @uxder committed Feb 11, 2011
Showing with 276 additions and 0 deletions.
  1. +11 −0 .project
  2. +38 −0 .tmp_index.html.11236~
  3. +33 −0 .tmp_index.html.55770~
  4. +33 −0 .tmp_index.html.60639~
  5. +29 −0 README
  6. BIN clear.png
  7. +38 −0 index.html
  8. +81 −0 jquery.quickClear.js
  9. +13 −0 style.css
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+ <name>formClear</name>
+ <comment></comment>
+ <projects>
+ </projects>
+ <buildSpec>
+ </buildSpec>
+ <natures>
+ </natures>
+</projectDescription>
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Clear Input</title>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
+<script src="jquery.quickClear.js" type="text/javascript"></script>
+<link rel="stylesheet" type="text/css" href="style.css"/>
+<script type="text/javascript">
+$(function (){
+ $('input').quickClear();
+ $('textarea').quickClear();
+});
+</script>
+<link rel="stylesheet" type="text/css" href="style.css"/>
+</head>
+<body>
+<h1>Jquery QuickClear Plugin</h1>
+<h2>QuickClear is a simple jQuery plugin to help you quickly clear the values of an input field or text area.</h2>
+<p>Plugin displays a delete button on hover and focus of an input field and allows you to bypass the tedious
+task of pounding the delete or backspace button. I originally developed it to be used on interfaces that
+require time sensitive tasks such as call centers and financial apps.</p>
+
+<h3>Demo</h3>
+
+<form action="" method="get">
+ <input name="test" type="search" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <textarea name="test" cols="40" rows="10"></textarea>
+
+</form>
+
+</body>
+</html>
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Clear Input</title>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
+<script src="jquery.formclear.js" type="text/javascript"></script>
+<link rel="stylesheet" type="text/css" href="style.css"/>
+<script type="text/javascript">
+$(function (){
+ $('input').formclear();
+ $('textarea').formclear();
+});
+</script>
+<link rel="stylesheet" type="text/css" href="style.css"/>
+</head>
+<body>
+<h1>Form Clear Plugin</h1>
+
+<form action="" method="get">
+ <input name="test" type="search" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <textarea name="test" cols="40" rows="10"></textarea>
+
+</form>
+
+</body>
+</html>
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Clear Input</title>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
+<script src="jquery.formclear.js" type="text/javascript"></script>
+<link rel="stylesheet" type="text/css" href="style.css"/>
+<script type="text/javascript">
+$(function (){
+ $('input').formclear();
+ $('textarea').formclear();
+});
+</script>
+<link rel="stylesheet" type="text/css" href="style.css"/>
+</head>
+<body>
+<h1>Form Clear Plugin</h1>
+
+<form action="" method="get">
+ <input name="test" type="search" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <textarea name="test" cols="40" rows="10"></textarea>
+
+</form>
+
+</body>
+</html>
29 README
@@ -0,0 +1,29 @@
+==Jquery QuickClear Plugin
+
+QuickClear is a simple jQuery plugin to help you quickly clear the values of an input field or text area.
+
+Plugin displays a delete button on hover and focus of an input field and allows you to bypass the tedious
+task of pounding the delete or backspace button. I originally developed it to be used on interfaces that
+require time sensitive tasks such as call centers and financial apps.
+
+Copyright (c) 2010 Scott Murphy @hellocreation (http://scott-murphy.net)
+
+==Licensed under the MIT License
+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.
BIN clear.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Clear Input</title>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
+<script src="jquery.quickClear.js" type="text/javascript"></script>
+<link rel="stylesheet" type="text/css" href="style.css"/>
+<script type="text/javascript">
+$(function (){
+ $('input').quickClear();
+ $('textarea').quickClear();
+});
+</script>
+<link rel="stylesheet" type="text/css" href="style.css"/>
+</head>
+<body>
+<h1>Jquery QuickClear Plugin</h1>
+<h2>QuickClear is a simple jQuery plugin to help you quickly clear the values of an input field or text area.</h2>
+<p>Plugin displays a delete button on hover and focus of an input field and allows you to bypass the tedious
+task of pounding the delete or backspace button. I originally developed it to be used on interfaces that
+require time sensitive tasks such as call centers and financial apps.</p>
+
+<h3>Demo</h3>
+
+<form action="" method="get">
+ <input name="test" type="search" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <input name="test" type="text" /><br/>
+ <textarea name="test" cols="40" rows="10"></textarea>
+
+</form>
+
+</body>
+</html>
@@ -0,0 +1,81 @@
+/*!
+ * Copyright (c) 2010 Scott Murphy @hellocreation (http://scott-murphy.net)
+ *
+ * jQuery quickClear plugin
+ * Version 1.0 (Aug 2010)
+ * @requires jQuery v1.2.3 or later
+ *
+ * Licensed under the MIT License
+ */
+(function($){
+ $.fn.quickClear = function(options) {
+
+ var defaults = {
+ clearImg : "<img src=\"clear.png\" />",
+ container: "<span class=\"clearBtnContainer\"></span>",
+ padding : 5
+ };
+
+ var options = $.extend(defaults, options);
+
+ return this.each(function() {
+
+ var textField = $(this);
+ var clearButton = $(options.clearImg);
+ var container = $(options.container);
+ var clicked = false; //flag when button is pressed, prevent blur from firing.
+
+ init();
+
+ function init() {
+ createClearButton();
+ textField.bind({
+ focus: function() {
+ showClearButton();
+ },
+ focusout: function() {
+ if (clicked) {
+ return clicked = false;
+ } else {
+ removeClearButton();
+ };
+ },
+ });
+ clearButton.bind({
+ mousedown: function() {
+ clicked = true;
+ clearValue();
+ //setTimeOut to allow focus event to fire after the blur event
+ setTimeout(function() { textField.focus();}, 0);
+ },
+
+ });
+ textField.parent("span").bind({
+ mouseover: function() {
+ showClearButton();
+ },
+ mouseout: function() {
+ removeClearButton();
+ }
+ });
+ }
+
+ function createClearButton() {
+ textField.wrap(container).after(clearButton);
+ clearButton.hide().addClass('clearButton');
+
+ //adjust width of input field based on image size
+ var clearBtnWidth = clearButton.outerWidth();
+ textField.css('padding-right', clearBtnWidth + options.padding);
+ textField.width(textField.width() - clearBtnWidth - options.padding);
+ }
+
+ function showClearButton() { clearButton.show(); }
+ function removeClearButton() { clearButton.hide(); }
+ function clearValue() { textField.val(""); }
+
+ });
+ };
+
+ init();
+})(jQuery);
@@ -0,0 +1,13 @@
+.clearBtnContainer {
+ position:relative;
+ display:inline-block;
+}
+
+.clearButton {
+ position:absolute;
+ right: 5px;
+ top: 5px;
+ cursor:pointer;
+}
+
+

0 comments on commit 15806d0

Please sign in to comment.