[原创]jQuery SimpleTip Plugin1.0

RichieLiu — Sun, 10 Jan 2010 12:48:12 +0000

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

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

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

插件使用：

$(document).ready(function(){//jq的页面载入事件
    $("#tip2").tip({ //获取目标元素
    width: 100,//自定义宽度 也可以不设定此项
    text: "宽度：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 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(""+opts.text+"");//提示对象的内容
        _tip.append($("").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] [下载源码]
转载请注明来源：）

您可能还关注的？

Firefox非主流开发扩展推荐

RichieLiu — Tue, 15 Dec 2009 02:05:22 +0000

Firebug已经家喻户晓，不必多说。下面推荐的是些村酒野蔬，虽没什么名气，但其味醇厚甜美，食之飘香再难忘情。

HTML Validator

http://users.skynet.be/mgueury/mozilla/

很喜欢这个扩展的Tidy算法模式，可以检查出HTML页面中绝大部分嵌套和书写错误，并且针对每个错误都有详细的说明和推荐写法。当然，很多时候，我们不大可能去纠正所有错误和警告。一个常用的小技巧是：将可以容忍的错误添加到Hidden列表中。这样，只要看看右下角的状态信息，就知道页面中是否还有错误了。

Launchy

https://addons.mozilla.org/en-US/firefox/addon/81

这个扩展相见恨晚，一见就再也离不开了。如上图所示，能很方便的让我们在不同浏览器中加载测试页面，还可以配置编辑器。注意的是：默认情况下，Launchy会自动探测浏览器和编辑器，我的习惯是将自动探测关闭，按照选项里的说明，在chrome目录下通过launchy.xml手动指定菜单项。这是我的配置文件：Firefoxprofilechromelaunchy.xml. ~~目前IETester只能打开，不知道怎么传送参数过去，还希望知道的指点一下。~~（IETester 0.3已经支持Command line arguments）

Fiddler Switch

https://addons.mozilla.org/en-US/firefox/addon/9373

在前端开发界，有这么一个说法：Firefox + Firebug + Fiddler，称之为 3F，拯救了前端的工作。Fiddler是个伟大的工具，默认在IE上工作得挺好，但在Firefox上需要设置代理，有点麻烦，Fiddler Switch就是Taobao UED空帷达人为了解决此问题而开发的。如果你还没用过Fiddler，推荐阅读下这篇文章：如何直接调试线上页面的JavaScript和CSS。

Johnny Cache

https://addons.mozilla.org/en-US/firefox/addon/3817

是否厌倦了 Ctrl + F5? 是否有时忘了切换 Web Developer Toolbar 禁用的Cache，而导致上网很慢？Johnny Cache让你一次配置，永久解决烦恼。我很喜欢这种谦虚却非常实用的扩展。

Firefox DNS Flusher

https://addons.mozilla.org/en-US/firefox/addon/7408

这也是一款非常谦虚但绝对实用的扩展。开发测试时，经常要修改hosts文件。但默认情况下，Firefox会缓存DNS，修改hosts文件后，有时得重启Firefox才能生效，这是很让人恼火的。装了这个扩展，就再也不用等待漫长的重启了。同时，还拥有了一个附加功能：直接查看域名的ip.

MeasureIt

https://addons.mozilla.org/en-US/firefox/addon/539

根据mockup制作精确的demo是前端工程师们的日常工作，通常的做法是在Photoshop或其它图像处理软件中测量，但来回切换窗口是有点影响效率的。MeasureIt能让你直接在页面中的测量，方便快捷。

我的Firefox上，除了Firebug, 开发用的扩展就上面这些了。除了MeasureIt用的频率不是很多，其它扩展几乎天天都用。感谢这些扩展，让我有更多的时间好好生活。
转自http://lifesinger.org/blog/2009/01/firefox-non-mainstream-addons/

您可能还关注的？