Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added jquery labelizer plugin. first jquery plugin eva!!!

  • Loading branch information...
commit 144f34aa45aa38478b584fa8eaf6c640762c0f08 1 parent 005e145
@jnunemaker authored
Showing with 67 additions and 0 deletions.
  1. +67 −0 jquery.labelize.js
View
67 jquery.labelize.js
@@ -0,0 +1,67 @@
+/**
+ * Author: John Nunemaker http://addictedtonew.com http://orderedlist.com
+ *
+ * - Hides label and puts label text inside of form element.
+ * - If no label exists, defaults to the title attribute of the element.
+ * - On focus, removes the default text and the css class.
+ * - On blur, adds the default text and css class back if the user did not fill in the form element.
+ * - Adds a class to the form element that is removed when user puts information in. This allows
+ * styling of the label with a lighter color than when the user has "real" text in the form element.
+ *
+ * Usage:
+ * $('input').labelize(); // uses blank as the class so you could use style input.blank {color:#ccc;}
+ * or
+ * $('textarea').labelize({className:'foobar'}); // uses foobar as the class
+ */
+(function($) {
+ var self = null;
+
+ /**
+ * default options { className:'blank' }
+ */
+ $.fn.labelize = function(options) {
+ return this.each(function() {
+ new $.labelize(this, options);
+ });
+ };
+
+ $.labelize = function (e, options) {
+ this.el = $(e);
+ this.options = $.extend({className: 'blank'}, options);
+ var defaultText = this.el.attr('title');
+
+ $('label[for=' + this.el.attr('id') + ']').each(function(i) {
+ $(this).hide();
+ defaultText = this.innerHTML;
+ });
+
+ this.defaultText = defaultText;
+ this.init();
+ };
+
+ $.labelize.prototype = {
+ init: function() {
+ var self = this;
+ var val = $.trim(this.el.val());
+
+ if (val == this.defaultText || val == '') {
+ this.el.val(this.defaultText);
+ this.el.addClass(this.options.className);
+ }
+
+ this.el.focus(function(event) {
+ if (self.el.val() == self.defaultText) {
+ self.el.val('');
+ self.el.removeClass(self.options.className);
+ }
+ });
+
+ this.el.blur(function(event) {
+ if ($.trim(self.el.val()) == '') {
+ self.el.val(self.defaultText);
+ self.el.addClass(self.options.className);
+ }
+ });
+ }
+ }
+})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.