/* wsPlaceholder 1.0 for jQuery 1.3+ - simple unobtrusive and very flexible tabbing solution * * @author fedos */ var wsPlaceholders = function(options) { this.defaults = { //CSS-selectors of target elements in DOM for unobtrusive attaching fieldSelector: 'input.placeholder', //CSS classes for indicate active and inactive tabs and contents of tabs filledFieldClass: 'filled', emptyFieldClass: 'empty', requiredFieldClass: 'required', emptyrequiredFieldClass: 'emptyrequired', //This function should return placeholder text for each element: getPlaceholder: function(field) { return field.title; } } this.initialize = function() { var scope = this; var fields = $(this.fieldSelector); if (fields.length) { fields.closest('form').each(function() { $(this).bind('submit reset', function() { scope.deinitialize(this); }); }) fields.each(function() { $(this).focus(function() { if (this.value == scope.getPlaceholder(this)) { $(this).removeClass(scope.emptyFieldClass); $(this).removeClass(scope.emptyrequiredFieldClass); $(this).addClass(scope.filledFieldClass); this.value = ''; } }) $(this).blur(function() { if (!this.value) { this.value = scope.getPlaceholder(this); $(this).removeClass(scope.filledFieldClass); $(this).addClass(scope.emptyFieldClass); if ($(this).hasClass(scope.requiredFieldClass)) $(this).addClass(scope.emptyrequiredFieldClass) } }) $(this).removeClass(scope.filledFieldClass).removeClass(scope.emptyFieldClass).removeClass(scope.emptyrequiredFieldClass); if (!this.value || this.value == scope.getPlaceholder(this)) { $(this).addClass(scope.emptyFieldClass); if ($(this).hasClass(scope.requiredFieldClass)) $(this).addClass(scope.emptyrequiredFieldClass) } if (!this.value) this.value = scope.getPlaceholder(this); else $(this).addClass(scope.filledFieldClass); }); } else { try { console.log("wsPlaceholders: Can't find any element for selector \"" + this.fieldSelector + '"'); } catch (e) { } delete scope, this; } } this.deinitialize = function(form) { var scope = this; $(form).find(this.fieldSelector).each(function() { if (this.value == scope.getPlaceholder(this)) { $(this).removeClass(scope.emptyFieldClass); $(this).removeClass(scope.filledFieldClass); this.value = ''; } }); } $.extend(this, this.defaults, options); this.initialize(); }; /*$(function() { new wsPlaceholders(); })*/