zoukankan      html  css  js  c++  java
  • placeHolder 兼容所有浏览器

    //placeHolder 插件
    (function($){
    
        $.fn.placeHolder=function(options){
            if(typeof options == "string"){
                return $.fn.placeHolder.methods[options](this);
            }
            options = options || {};
    
            return this.each(function(){
                var setting = $.data(this, "placeholder");
                if(setting){
                    setting = $.extend(setting, options);    
                }else{
                    var opts = $.extend({}, $.fn.placeHolder.defaults, options),
                        self = this;
                    opts = {options : opts, label : $('<label>')}
                    $.data(this, "placeHolder", opts);
    
                    setTimeout(function(){
                        create(self, opts);
                    })
                }
            })
        };
    
        if ('placeholder' in document.createElement('INPUT')){
            $.fn.placeHolder = function(){}
        }
    
        function create(target,opts){
    
            var _self = $(target),
                _placeholder = _self.attr('placeholder'),
                _label = opts.label,
                _div = $('<div>'),
                _className = opts.options.className;
    
            if(typeof _placeholder === 'undefined'){
                return
            }
    
            _label.addClass(_className).
                html(_placeholder).
                appendTo(_div).
                click(function () {
                    _self.get(0).focus();
                });
            _label.get(0).oncontextmenu = function(event){
                _self.get(0).focus();
            };
            _div.css({position:"relative"}).insertAfter(_self);
            bindPlaceHolder( target );
            if(_self.val().length > 0){
                _self.placeHolder('hide');
            }
        };
    
        function toggleHolder(){
            var self = this;
            setTimeout(function(){
                var type = self.value == '' ? 'show' : 'hide';
                $(self).placeHolder( type );
            },0)
        }
    
    
        function bindPlaceHolder( target ){
            $(target).on('keyup blur cut paste change', toggleHolder)
        }
    
        $.fn.placeHolder.methods = {
            show:function(jq){
                return jq.each(function(){
                    $(this).data("placeHolder").label.show();
                });
            },
            hide:function(jq){
                return jq.each(function(){
                    $(this).data("placeHolder").label.hide();
                });
            }
        };
    
        $.fn.placeHolder.defaults  = {className:'placeholder'};
    
    })(jQuery);
  • 相关阅读:
    常用的Dos命令
    关于CSS3
    数据渲染
    jQuery中的AJAX
    AJAX
    面向对象3
    克隆对象、对象继承
    面向对象2
    面向对象1
    面向对象
  • 原文地址:https://www.cnblogs.com/bjmumu/p/3408646.html
Copyright © 2011-2022 走看看