jquery插件开发

最新推荐文章于 2025-09-06 08:01:57 发布

y_y_y3313

最新推荐文章于 2025-09-06 08:01:57 发布

阅读量622

点赞数

CC 4.0 BY-SA版权

分类专栏：技术文章标签： javascript JavaScript Javascript javaScript jquery jQuery JQUERY Jquery JQuery jquery插件

本文链接：https://blog.youkuaiyun.com/y_y_y3313/article/details/8501961

技术专栏收录该内容

3 篇文章

订阅专栏

贴代码：

jQuery.fn.drag=function(){
	var moveAble=false;
	var that=$(this);
	var _top=0;
	var _left=0;
	$(document).bind("mousemove",function(e){
		if(moveAble){
		that.css({"left":e.pageX-_left,"top":e.pageY-_top});
		}
		});
	$(this).mousedown(function(e){
		_top=e.pageY-Number(that.css("top").replace("px",""));
		_left=e.pageX-Number(that.css("left").replace("px",""));
		moveAble=true;
		});
	$(document).mouseup(function(){
		moveAble=false;
		});
	};

代码有点乱，而且没优化过，不过今天主要是说一下插件开发，这些先不理。。。

jquery插件无非是在jquery命名空间上添加对每个jquery实例有效方法和属性

基本上都是套用这种模式：

/*向jquery里面添加drag方法*/
jQuery.fn.drag

于是我就可以使用了（这是一个简易的拖动元素的插件）

$(".XX").drag();

有些插件是可以带参数或者不带
例如（时间不足，网上找了一个）：

jQuery.fn.quberTip = function (options) {
    var defaults = {
        speed: 500,
        xOffset: 10,
        yOffset: 10
    };
    var options = $.extend(defaults, options);
    return this.each(function () {
        var $this = jQuery(this);
        if ($this.attr('title') != undefined) {
            //Pass the title to a variable and then remove it from DOM
            if ($this.attr('title') != '') {
                var tipTitle = ($this.attr('title'));
            } else {
                var tipTitle = 'Null';
            }
            //Remove title attribute
            $this.removeAttr('title');
            $(this).hover(function (e) {
                //            $(this).css('cursor', 'pointer');
                $("body").append("<div id='tooltip'>" + tipTitle + "</div>");
                $("#tooltip").css({ "position": "absolute",
                    "z-index": "9999",
                    "background": "#D3DDF5",
                    "padding": "5px",
                    "opacity": "1",
                    "border": "1px solid #A3C0E8",
                    "font-weight": "bold",
                    "font-size": "12px",
                    "display": "none",
					"max-width":"300px"
                });
                $("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
            .css("left", (e.pageX + defaults.yOffset) + "px")
            .fadeIn(options.speed);
            }, function () {
                //Remove the tooltip from the DOM
                $("#tooltip").remove();
            });
            $(this).mousemove(function (e) {
                $("#tooltip")
    .css("top", (e.pageY + defaults.xOffset) + "px")
    .css("left", (e.pageX + defaults.yOffset) + "px");
            });
        }
    });
};

里面多了这个：

 var defaults = {
        speed: 500,
        xOffset: 10,
        yOffset: 10
    };
    var options = $.extend(defaults, options);

defaults就是默认的参数，extened就是把实参覆盖到默认参数上面，来个和而唯一，于是当你用这个插件是可以

$(xx).quberTip();
$(xx).quberTip（ speed: 2000, xOffset: 100,）;/*或者*/
$(xx).quberTip（ speed: 2000, xOffset: 100,yOffset: 10）;/*或者*/