[jQuery] Pisanie własnych pluginów do jQuery, Tooltip plugin Opcje

[vokiel]

Witam
Postanowiłem nauczyć się pisać własne pluginy do jQuery, na początek wymyśliłem tooltip. Jednak przystanąłem na pewnym problemie, szukam i szukam i nie mogę trafić na rozwiązanie.
Firebug zgłasza błąd: F is undefined jquery-1.3.2.min.js (wiersz 19)
Próbowałem już w różnej kolejności, ciągle jest coś nie tak. W necie są tutki jak pisać pluginy, tyle, że takie proste, z jedną funkcją.

[PHP] pobierz, plaintext 
<?php
<script type="text/javascript">
/**
 * Copyright (c) 2008 Vokiel vokiel.com
 * @name Vtip VokielToolTip
 * @author Vokiel
 * Licensed under the MIT:
 * <a href=\"http://www.opensource.org/licenses/mit-license.php\" target=\"_blank\">http://www.opensource.org/licenses/mit-license.php</a> 
 */
;(function($){
    /**
     * Vtip
      */
    $.fn.Vtip = function(options){
        /**
         * Ustawienia domyślne
         */
        var defaults = {
            moving: true,
            tipclass: 'jquery_tooltip_show_2',
            usetipclass: false,
            container: '.container',
            tipL: 10,
            tipT: 20,
            css: {
                'display': 'block',
                'position': 'absolute',
                'width': '250px',
                'border': '1px solid #09547B',
                'background-color': '#B6DBED',
                'color': '#000',
                'text-align': 'left',
                'padding': '5px',
                'font-weight': 'normal'
            }
        };
        
        // rozszerzenie domyslnych ustawien
        defaults = $.extend(true, {}, defaults, options);
        // iteracja po wszystkich pasujących elementach
        return this.each(function(e) {
            var $this = $(this);
            $this.livequery(function(){
                var span = $('<span />').attr('class',defaults.tipclass);
                if (defaults.usetipclass==false){span.css(defaults.css);}
                $this.after(span.html($this.attr('title')).hide()).attr('title', '');
            }).live('mouseover',ShowTooltip($this,e))
              .live('mouseout', HideTooltip($this))
              .live('mousemove',MoveTooltip($this,e));
        });
    
        /**
         * Pokazanie tooltipa
         */
         function ShowTooltip($this,e){
            var text = $this.next(defaults.tipclass);
            dim = DimentionsTooltip(e);
            text.css({top:dim['t'],left:dim['l'],opacity: 0.9}).fadeIn();
        }
        /**
         * Ukrycie tooltipa
         */
         function HideTooltip($this){
            var text = $this.next(defaults.tipclass);
            text.fadeOut('fast');
        }
        /**
         * Przesuwanie tooltipa wraz z ruchem myszki
         */
         function MoveTooltip($this,e){
            dim = DimentionsTooltip(e);
            $this.next(defaults.tipclass).css({top:dim['t'],left:dim['l']});
        }
        /**
         * Wyliczenie nowej pozycji tooltipa
         */
         function DimentionsTooltip(e){
            var wW = $(window).width();
            var topT = Math.ceil(e.pageY+defaults.tipT);
            var leftT = Math.ceil(e.pageX-$(defaults.container).offset().left+defaults.tipL);
            if (leftT+250>wW) leftT = (wW-250);
            dim = new Array();
            dim['l'] = leftT+ 'px'; dim['t'] = topT+ 'px'; 
            return dim;
        }
    };
})(jQuery);
 
$(document).ready(function(){
    $('.jquery_tooltip_2').Vtip();
});
</script>
<a class="jquery_tooltip_2" title="<table border='0'><tr><td class='gropup bb'> </td><td class='bb'><strong>login</strong></td></tr></table>">test</a>
<a class="jquery_tooltip_2" title="<table border='0'><tr><td class='gropup bb'> </td><td class='bb'><strong>login</strong></td></tr></table>">test</a>
?>
[PHP] pobierz, plaintext 

Już sam nie wiem jaki powinien być wzrór pluginu, spotkałem się z wieloma różnymi, np:

[PHP] pobierz, plaintext 
<?php
<script type="text/javascript">
;(function($){
    $.fn.Vtip = function(options){
        var defaults = {};
        defaults = $.extend(true, {}, defaults, options);
        return this.each(function(e) {
            var $this = $(this);
            // kod
        });
        // metody prywatne
        function ShowTooltip(){}
        function HideTooltip(){}
    };
    // metody publiczne
    $.fn.Vtip.prywatna = function() {};
})(jQuery);
/** Albo tak: */
(function($){ 
    $.fn.extend({ 
        Vtip: function() { 
            return $(); 
            // gdzie umieścić metody? tutaj
            prywatna: function(){}
        }
    }); 
})(jQuery);
/** Inny sposób */
(function($) {
    $.fn.Vtip = function(o) {
        return this.each(function() {});
    };
    $.extend(Vtip.prototype, {
        functionA : function() {},
        functionB : function() {}
    }
})(jQuery);
/** Jeszcze dwa */
(function($) {
    $.fn.Vtip = function(o) {
    return this.each(function() {
        // metoda prywatna
        var functionA = function () {}
    });
  };
})(jQuery);
 
(function($) {
    $.fn.Vtip = function(o) {
    return this.each(function() {});
  };
  $.fn.extend ({
    functionA : function () {}
  });
})(jQuery);
</script>
?>
[PHP] pobierz, plaintext 

Poza tym czasem jest średni na początku przed ;(function($) { czasem go nie ma.

I jeszcze jedno na konieć, jak mam przekazać parametr event? Czy po prostu przez function(e) a następnie wywołanie
DimentionsTooltip(e)?

Może jest ktoś bardziej doświadczony ode mnie w tym temacie i ma sprawdzony, działający sposób?

Pozdrawiam

[vokiel]

Ciężko było, 3 dni prób i błędów, sprawdzania wszystkich możliwości ale udało się:)
Największy problem miałem z przekazaniem $(this) do innych metod.
Głównym ficzrem jest to, że plugin działa z nowododanymi elementami DOM. Po załadowaniu treści ajaxem, dodaniu zwykłym js, plugin pokazuje Vtip'y dla nowych elementów:)
Oto i gotowy plugin Vtip:

[PHP] pobierz, plaintext 
<?php
<script type="text/javascript">
/**
 * Copyright (c) 2008 Vokiel vokiel.com
 * @name Vtip VokielTooltip
 * @author Vokiel Robert Mikołajuk
 * 
* Livequery plugin required: <a href=\"http://docs.jquery.com/Plugins/livequery\" target=\"_blank\">http://docs.jquery.com/Plugins/livequery</a>
 * 
 * Dual licensed under the MIT and GPL licenses:
 * <a href=\"http://www.opensource.org/licenses/mit-license.php\" target=\"_blank\">http://www.opensource.org/licenses/mit-license.php</a>
 * <a href=\"http://www.gnu.org/licenses/gpl.html\" target=\"_blank\">http://www.gnu.org/licenses/gpl.html</a>
 * 
 * Settings:
 *     moving: true,                        Tracking mouse move
 *  tipclass: 'jquery_tooltip_show',    Default class of tooltip
 *  usetipclass: true,                    If set true tipclass will be used to stylize the tip, else css properties will be set as style="" 
 *  container: '.container',            The container of elements, where tips are placed into, needet to enumerate position of Vtip
 *  tipL: 10,                            Left Vtip margin from cursor 
 *  tipT: 20,                            Top Vtip margin from cursor
 *  css:                                 Array of css properties to be set as Vtip style="" property
 *  
 * Usage:
 *  $(document).ready(function(){
 *      $('.jquery_tooltip_2').livequery(function(){
 *          $(this).Vtip();
 *      });
 *  });
 */
(function($) {
    $.extend({
        Vtip : new function(){
        /**
         * default settings
         */ 
        this.defaults = {
            moving: true,
            tipclass: 'jquery_tooltip_show',
            usetipclass: true,
            container: '.container',
            tipL: 10,
            tipT: 20,
            css: {
                'display': 'block',
                'position': 'absolute',
                'width': '250px',
                'border': '1px solid #09547B',
                'background-color': '#B6DBED',
                'color': '#000',
                'text-align': 'left',
                'padding': '5px',
                'font-weight': 'normal',
                'z-index': '100'
            }
        };
        this.construct = function(options){
            // extending default settings
            defaults = $.extend($.Vtip.defaults, $.Vtip.defaults, options);
            return this.each(function(e){
                $this = $(this);
                // creating span element 
                var span = $('<span />').attr('class',$.Vtip.defaults.tipclass);
                // setting to use style or class to customize element style
                if ($.Vtip.defaults.usetipclass==false){span.css($.Vtip.defaults.css);}
                // putting span into document, just after a 
                $this.after(span.html($this.attr('title')).hide()).attr('title', '');
                // setting events
                $this.bind('mouseover',function(e){ShowTooltip(e);})
                    .bind('mouseout' ,function(e){HideTooltip();})
                // adding tracking mouse move event
                if ($.Vtip.defaults.moving==true){
                    $this.bind('mousemove',function(e){MoveTooltip(e);});
                }
            });
        };
        /**
         * Showing Vtip
         */
        function ShowTooltip(e){
            dim = DimentionsTooltip(e);
            $this.next('.'+$.Vtip.defaults.tipclass).css({top:dim['t'],left:dim['l'],opacity: 0.9}).fadeIn();        
        };
        /**
         * Hidding Vtip
         */
        function HideTooltip(){
            $this.next('.'+$.Vtip.defaults.tipclass).fadeOut('fast');
        };
        /**
         * Moving Vtip with mouse move
         */
        function MoveTooltip(e){
            $this.next('.'+$.Vtip.defaults.tipclass).css({top:dim['t'],left:dim['l']});
        };
        /**
         * New Vtip position enumerate
         */
        function DimentionsTooltip(e){
            var wW = $(window).width();
            var topT = Math.ceil(e.pageY+$.Vtip.defaults.tipT);
            var leftT = Math.ceil(e.pageX-$($.Vtip.defaults.container).offset().left+$.Vtip.defaults.tipL);
            if (leftT+250>wW) leftT = (wW-250);
            dim = new Array();
            dim['l'] = leftT+ 'px'; dim['t'] = topT+ 'px';
            return dim;
        };
           return this;
        }
    });
    /**
     * Extending jQuery fn
     */
    $.fn.extend({
        Vtip: $.Vtip.construct
    });
})(jQuery);
 
/* Przykład użycia */
$(document).ready(function(){
    $('.jquery_tooltip_2').livequery(function(){
        $(this).Vtip();
    });
        
    $('#add_new').click(function(){
        $(this).after('<a class="jquery_tooltip_2" title="<div>test</div>"> test </a>');
    });
});
</script>
<a class="jquery_tooltip_2" title="<table border='0'><tr><td><strong>test 1</strong></td></tr></table>" >test1</a>
<a class="jquery_tooltip_2" title="<table border='0'><tr><td><strong>test 2</strong></td></tr></table>" >test2</a>
<a id="add_new">nowy test</a>
?>
[PHP] pobierz, plaintext 

Ten post edytował vokiel 11.05.2009, 12:48:51