[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

[gebp]

Też przyłączę się do prośby.
Może ktoś zaawansowany w AJAX'ie i jQuery napisał by porządnego tutoriala. Sam (tak jak poprzednik) próbowałem napisać plugina do wysyłania formularzy (pluginy które to obsługują "nie leżą" mi).
Co do tutoriala najbardziej interesowały by mnie sposoby przekazywania wyników ( return costam) funkcji wewnątrz plugina np do funkcji którą użytkownik sam napisz ( tzw. callback) i która będzie wykonywana po zakończeniu wszystkich funkcji wewnątrz pluginu.

[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

[mateo84]

Hejka,

Świetnie że się udało, ze swojej strony mogę polecić tutorial (wydaje się że prosty) pod adresem www.i-mateusz.com/news/jak-napisac-wlasny-plugin-jquery.html. Choć nie ma tam chyba informacji o wielu funkcjach - ale na początek będzie pewnie w sam raz - dla rozeznania tematu