jquery插件开发

index.html

    
    
    
    
    


    鼠标移过来

             改变背景颜色         显示         隐藏     

    // 初始化插件     $(".common_text").myToolTip({"background-color":"black"});     $(".btn-changecolor").click(function(){         $(".common_text").myToolTip({"background-color":"#F00"});     });     $(".btn-showtips").click(function(){         $(".common_text").myToolTip("show");     });     $(".btn-hidetips").click(function(){         $(".common_text").myToolTip("hide");     });

jquery.mytips.js

/*
 * 一个基于jQuery插件开发最佳实践方法写的简单插件
 */
(function($){
    $.fn.myToolTip = function(options) {
        // 插件默认配置项
        var defaults = {
            'direction': 'top',
            'background-color': 'black'
        };
        var opts = $.extend({}, defaults, options);
        var methods = {
            // 插件初始化方法
            init: function(options) {
                var $el = $(this);
                var $tip = $el.data("myTip");
                if($tip){
                    // 当插件已存在则重置样式
                    $tip.css({
                        "backgroundColor":opts["background-color"]
                    }).find(".triangle").css({
                        "borderColor":opts["background-color"]+" transparent transparent transparent"
                    });
                    return $tip;
                };
                var pos = $.extend({}, $el.offset(), {
                    width: this.offsetWidth,
                    height: this.offsetHeight
                });
                // 插件初始化
                $tip = $(''+$el.attr("title")+'

').appendTo(document.body);                 // 迁移原来的title至data-title                 $el.attr("data-title",$el.attr("title")).removeAttr("title");                 $tip.css({                     "left":(pos.left + pos.width/2 - $tip.width()/2)+"px",                     "top":(pos.top - pos.height/2 - $tip.height())+"px",                     "backgroundColor":opts["background-color"]                 }).find(".triangle").css({                     "borderColor":opts["background-color"]+" transparent transparent transparent"                 });                 // 绑定元素的hover事件                 $el.hover(function(){                     $tip.show();                 },function(){                     $tip.hide();                 });                 $el.data("myTip",$tip);                 return $el;             },             show: function() {                 var $el = $(this);                 var $tip = $el.data("myTip");                 $tip.show();             },             hide: function() {                 var $el = $(this);                 var $tip = $el.data("myTip");                 $tip.hide();             },         };         return this.each(function(index) {             // this keyword is DOM Element             var $this = $(this);             if (methods[options]) {                 return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));             } else if (typeof options === 'object' || !options) {                 return methods.init.apply(this, arguments);             } else {                 $.error('Method ' + method + ' does not exist on jQuery.myPlugin');             }         });     } })(jQuery);