刘钢 – 我是UED

公司项目由于一些历史原因 所以采用Jquery的库
一直没有用jquery的插件机制写过代码,于是就趁热打铁研究了一下jq的插件机制
非常简单的一个效果 暂且命名为jQuery SimpleTip Plugin1.0吧
[查看DEMO] [下载源码]
插件功能很简单：见下图

就是一个鼠标提示的tip效果 可以自定义宽度

使用方法：
在需要使用该插件的页面插入如下依赖 具体路径请自行修改
分别是：JQuery1.32 本插件核心代码 和本插件的css样式

<script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="simpletip/jquery.tip-min.js" type="text/javascript"></script>
<link href="simpletip/SimpleTip.css" rel="stylesheet"/>

插件使用：

$(document).ready(function(){//jq的页面载入事件
    $("#tip2").tip({ //获取目标元素
    width: 100,//自定义宽度 也可以不设定此项
    text: "<span class='icon01'></span>宽度：100px 是自定义的"//提示内容 可以包含html代码
    });
})

核心代码分析：

(function($){//建立闭包
	var _tip;//创建提示对象
    $.fn.tip = function(options){//jq插件机制的核心函数$.fn
        var defaults = {	//默认参数
			width:300,
            text: "这里是提示文字"
        };
        var opts = $.extend(defaults, options);//参数合并 具体参见jq手册
        this.bind("mouseover", function(event){//给目标对象绑定事件
            showtip(event, opts);
        });
        this.bind("mouseout", function(event){
            _tip.hide();
        });
        this.css("cursor", "pointer");//目标对象的鼠标样式
    };
    function showtip(event, opts){//显示提示层方法
        target = $(event.target);//获取事件触发的对象
        if (!_tip) {//如果提示对象不存在
            _tip = $("<div/>");//创建一个div element
            _tip.addClass("tip").css("width", opts.width).appendTo($("body"));//根据参数设定宽度 插入到body中
            _tip.bind("mouseenter", function(event){//给提示对象绑定事件 这里使用mouseenter jq已经做了兼容
                $(this).show();
            });
            _tip.bind("mouseleave", function(event){//给提示对象绑定事件 这里使用mouseleave jq已经做了兼容
                $(this).hide();
            });
        }
        _tip.css("width", opts.width);//提示对象的宽度
        _tip.html("<div>"+opts.text+"</div>");//提示对象的内容
        _tip.append($("<iframe class='ie6iframe'></iframe>").css("width", _tip.width()).css("height", _tip.outerHeight(true)));
		//建立遮罩层
        _tip.css("position", "absolute").css("top",target.offset().top + target.height() - 3).css("left",target.offset().left);//提示对象定位
        _tip.show();
    };
    })(jQuery);

就到这里吧：）
[查看DEMO] [下载源码]
转载请注明来源：）