jQuery 基础教程（第3版） ---第八章习题答案

//第二题 1
(function($){
    $.fn.shadow=function(opts){
        
        var options = $.extend({},$.fn.shadow.defaults,opts);
        
        return this.each(function(){
            var $originalElement=$(this);
            for(var i=0;i<options.copies;i++){
                var offset = options.copyOffset(i);
                $originalElement
                .clone()
                .css({
                    position:'absolute',
                    left:$originalElement.offset().left+offset.x,
                    top:$originalElement.offset().top+offset.y,
                    margin:0,
                    zIndex:options.zIndex,
                    opacity:options.opacity
                })
                .appendTo('body');
            }
        });
        
    }    
        
        $.fn.shadow.defaults={
            copies:5,
            opacity:0.1,
            zIndex:-1,
            copyOffset:function(index){
                return {x:index,y:index};
            }
        };
})(jQuery);


//第二题 2
(function($){
    $.widget('ljq.tooltip',{
    
        options:{
            offsetX:10,
            offsetY:10,
            content:function(){
                return $(this).data('tooltip-text');
            }
        },
    
        _create:function(){
            this._tooltipDiv=$('<div></div>')
            .addClass('ljq-tooltip-text '+ 'ui-widget ui-state-highlight ui-corner-all')
            .hide().appendTo('body');    
            this.element
            .addClass('ljq-tooltip-trigger')
            .bind('mouseenter.ljq-tooltip',$.proxy(this._open,this))
            .bind('mouseleave.ljq-tooltip',$.proxy(this._close,this));
        },
        _open:function(){
            if(!this.options.disabled){
                var elementOffset = this.element.offset();
                this._tooltipDiv.css({
                    left:elementOffset.left+this.options.offsetX,
                    top:elementOffset.top+this.element.height()+this.options.offsetY
                }).text(this.options.content.call(this.element[0]))
                this._tooltipDiv.show();
                this._trigger('open');
                this.isOpen(true);
            }
            
        },
        _close:function(){
            this._tooltipDiv.hide();
            this._trigger('close');
            this.isOpen(false);
        },
        destroy:function(){
            this._tooltipDiv.remove();
            this.element
                .removeClass('ljq-tooltip-trigger')
                .unbind('.ljq-tooltip');
            $.Widget.prototype.destroy.apply(this,arguments);
        },
        open:function(){
            this._open();
        },
        close:function(){
            this._close();
        },
        isOpen:function(tag){
            if(tag){
                console.log("true");
                return true;
            }else{
                console.log("false");
                return false;
            }
        }
        
    });
})(jQuery);
 
//第三题
$(document).ready(function(){
    $('a').bind('tooltipopen',function(){
        console.log('open');
    });
});

//第四题  我的理解不知道对不对，参考一下就好了
var con;
(function($){
    $.widget('ljq.tooltip',{
    
        options:{
            offsetX:10,
            offsetY:10,
            content:function(){
            //alert(this);
                var urlstr = $(this).attr('href');
                $.ajax({
                    url:urlstr,
                    type:'get',
                    dataType:'html',
                    success:function(data){
                        con=data;
                    },error:function(){
                    }
                });
                return con;
            }
        },
    
        _create:function(){
            this._tooltipDiv=$('<div></div>')
            .addClass('ljq-tooltip-text '+ 'ui-widget ui-state-highlight ui-corner-all')
            .hide().appendTo('body');    
            this.element
            .addClass('ljq-tooltip-trigger')
            .bind('mouseenter.ljq-tooltip',$.proxy(this._open,this))
            .bind('mouseleave.ljq-tooltip',$.proxy(this._close,this));
        },
        _open:function(){
            if(!this.options.disabled){
                var elementOffset = this.element.offset();
                this._tooltipDiv.css({
                    left:elementOffset.left+this.options.offsetX,
                    top:elementOffset.top+this.element.height()+this.options.offsetY
                }).text(this.options.content.call(this))//这里表示，content函数内部的this指向的是括号内的参数
                this._tooltipDiv.show(); 
                this._trigger('open');
                this.isOpen(true);
            }
            
        },
        _close:function(){
            this._tooltipDiv.hide();
            this._trigger('close');
            this.isOpen(false);
        },
        destroy:function(){
            this._tooltipDiv.remove();
            this.element
                .removeClass('ljq-tooltip-trigger')
                .unbind('.ljq-tooltip');
            $.Widget.prototype.destroy.apply(this,arguments);
        },
        open:function(){
            this._open();
        },
        close:function(){
            this._close();
        },
        isOpen:function(tag){
            if(tag){
                console.log("true");
                return true;
            }else{
                console.log("false");
                return false;
            }
        }
        
    });
})(jQuery); 



//第五题  仅是打开时用到了effect
(function($){
    $.widget('ljq.tooltip',{
    
        options:{
            offsetX:10,
            offsetY:10,
            effect:'clip',
            content:function(){
                return $(this).data('tooltip-text');
            }
        },
    
        _create:function(){
            this._tooltipDiv=$('<div></div>')
            .addClass('ljq-tooltip-text '+ 'ui-widget ui-state-highlight ui-corner-all')
            .hide().appendTo('body');    
            this.element
            .addClass('ljq-tooltip-trigger')
            .bind('mouseenter.ljq-tooltip',$.proxy(this._open,this))
            .bind('mouseleave.ljq-tooltip',$.proxy(this._close,this));
        },
        _open:function(){
            if(!this.options.disabled){
                var elementOffset = this.element.offset();
                this._tooltipDiv.css({
                    left:elementOffset.left+this.options.offsetX,
                    top:elementOffset.top+this.element.height()+this.options.offsetY
                }).text(this.options.content.call(this.element[0]))
                this._tooltipDiv.effect(this.options.effect);//注意这里,打开时使用到了
                this._trigger('open');
                this.isOpen(true);
            }
            
        },
        _close:function(){
            this._tooltipDiv.hide();
            this._trigger('close');
            this.isOpen(false);
        },
        destroy:function(){
            this._tooltipDiv.remove();
            this.element
                .removeClass('ljq-tooltip-trigger')
                .unbind('.ljq-tooltip');
            $.Widget.prototype.destroy.apply(this,arguments);
        },
        open:function(){
            this._open();
        },
        close:function(){
            this._close();
        },
        isOpen:function(tag){
            if(tag){
                console.log("true");
                return true;
            }else{
                console.log("false");
                return false;
            }
        }
        
    });
})(jQuery);