Pages

Tuesday, February 15, 2011

jQuery Plugin - textbox

<script>
/**
 * This plugin can be implemented for textfield, password and
 * textarea tag element
 *
 * @name    : textbox
 * @author  : irfan.ub@gmail.com
 * @version : 1.0
 * @date    : February 15, 2011
 */

(function($){

    $.fn.textbox = function(){

        $(this).addClass('input-text');
        $(this).mouseover(function(){
            $(this).addClass('input-text-hover');
        });
        $(this).mouseout(function(){
            $(this).removeClass('input-text-hover');
        });
        $(this).focusin(function(){
            $(this).addClass('input-text-focus');
        });
        $(this).focusout(function(){
             $(this).removeClass('input-text-focus');
        });

        return this;
    };
})(jQuery);

</script>

<style>
.input-text { border: 1px solid #aaa; -moz-border-radius: 4px;
              padding: 2px; }
.input-text-hover { -moz-box-shadow: 0 0 2px gold; 
                    border: 1px solid #ccc;}
.input-text-focus { -moz-box-shadow: 0 0 2px lime; }
</style>

No comments:

Post a Comment