总述

这是学习JQuery插件制作的一次有意义的实践

声明

参考自 妙味课堂 的原生js，我的工作只不过是做成了JQuery插件。

对象级别的插件开发

(function ($) {
    $.fn.extend({
        pluginName:function(opt,callback){

        }
    });
})(jQuery);

and

(function ($) {
    $.fn.pluginName=function(){

    }
})(jQuery);

上面定义了一个jquery函数，形参是$，然后把实参jquery传进去，立即调用执行。好处：在写jquery插件时，也可使用$这个别名，而不会与prototype引起冲突。

先看一个五脏俱全的小例子

插件代码

/*+++++++++++++++++声明 Start++++++++++++++
 *|                                       |
 *|   以下代码来自 ITEYE 的 gaojiewyh     |
 *|                                       |
 *+++++++++++++++++声明 End++++++++++++++++
 */
(function ($) {
    $.fn.hilight=function(options){
        debug(this);
        var opts=$.extend({},$.fn.hilight.defaults,options);
        return this.each(function(){
            var $this=$(this);
            $this.css({
                backgroundColor:opts.background,
                color:opts.foreground
            });
            var markup=$this.html();
            markup=$.fn.hilight.format(markup);
            $this.html(markup);
        });
    };
    //适当暴露一些函数
    $.fn.hilight.format=function(txt){
        return '<strong>'+txt+'</strong>';
    }
    //暴露默认设置
    $.fn.hilight.defaults={
        foreground:'red',
        background:'yellow'
    };
    //保持私有函数的私有性
    function debug($obj){
        if(window.console && window.console.log){
            window.console.log('hilight selection count:'+$obj.size());
        }
    }
})(jQuery);

应用

1.采用默认设置

$(".test").hilight();

2.自定义设置一

$.fn.hilight.defaults.background='green';
$(".test").hilight();

3.自定义设置二

$(".test").hilight({
    foreground:'black',
    background:'gray'
});

3D旋转球插件制作

提供“转速”和“旋转半径”的自定义

所需文档结构

<div id="threeDTags">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <!-- ... n个 ... -->
</div>

所需类库及样式表

• jquery.min.js
• jquery.threeDTags.js
• threeDTags.css

ps:threeDTags.css并不存在，因为是个人应用，没有把相应的css独立出来

#threeDTags{
    position: relative;
    width: 270px;
    height: 270px;
}

#threeDTags a {
    position:absolute; 
    top:0px; 
    left:0px; 
}

相对来说，这几句是比较重要的，想要什么效果，自己扩展。

应用

应用通以上三种用法，这里只写一种。

$('threeDTags').threeDTags({
    radius:60,//半径
    tspeed:8//转速
});

FAQ

如何获取鼠标相对于某个元素的位置?

document.getElementById('threeDTags').onmouseover=function (ev)
{
    var oEvent=window.event || ev;
    var mouseX,mouseY;

    mouseX=oEvent.clientX-($(this).offset().left-$(window).scrollLeft()+this.offsetWidth/2);
    mouseY=oEvent.clientY-($(this).offset().top-$(window).scrollTop()+this.offsetHeight/2);

    alert(mouseX+" vs "+mouseY);
};

为了打破各家浏览器的浮动差异，以及 document.getElementById('threeDTags').offsetLeft 相对于父元素(如果父元素 position；relative)，而不是相对于整个文档的偏移，于是用了jquery类库。

jquery中 .offset() 为匹配的元素集合中获取第一个元素的当前坐标，相对于文档（document）。

结语

第一次写插件，代码相对混乱，但是会不断优化的。