Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Pisanie własnych pluginów do jQuery
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
vokiel
8.05.2009, 11:03:27
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 
  1. <?php
  2. <script type="text/javascript">
  3. /**
  4.  * Copyright (c) 2008 Vokiel vokiel.com
  5.  * @name Vtip VokielToolTip
  6.  * @author Vokiel
  7.  * Licensed under the MIT:
  8.  * <a href=\"http://www.opensource.org/licenses/mit-license.php\" target=\"_blank\">http://www.opensource.org/licenses/mit-license.php</a> 
  9.  */
  10. ;(function($){
  11.     /**
  12.      * Vtip
  13.       */
  14.     $.fn.Vtip = function(options){
  15.         /**
  16.          * Ustawienia domyślne
  17.          */
  18.         var defaults = {
  19.             moving: true,
  20.             tipclass: 'jquery_tooltip_show_2',
  21.             usetipclass: false,
  22.             container: '.container',
  23.             tipL: 10,
  24.             tipT: 20,
  25.             css: {
  26.                 'display': 'block',
  27.                 'position': 'absolute',
  28.                 'width': '250px',
  29.                 'border': '1px solid #09547B',
  30.                 'background-color': '#B6DBED',
  31.                 'color': '#000',
  32.                 'text-align': 'left',
  33.                 'padding': '5px',
  34.                 'font-weight': 'normal'
  35.             }
  36.         };
  37.         
  38.         // rozszerzenie domyslnych ustawien
  39.         defaults = $.extend(true, {}, defaults, options);
  40.         // iteracja po wszystkich pasujących elementach
  41.         return this.each(function(e) {
  42.             var $this = $(this);
  43.             $this.livequery(function(){
  44.                 var span = $('<span />').attr('class',defaults.tipclass);
  45.                 if (defaults.usetipclass==false){span.css(defaults.css);}
  46.                 $this.after(span.html($this.attr('title')).hide()).attr('title', '');
  47.             }).live('mouseover',ShowTooltip($this,e))
  48.               .live('mouseout', HideTooltip($this))
  49.               .live('mousemove',MoveTooltip($this,e));
  50.         });
  51.     
  52.         /**
  53.          * Pokazanie tooltipa
  54.          */
  55.          function ShowTooltip($this,e){
  56.             var text = $this.next(defaults.tipclass);
  57.             dim = DimentionsTooltip(e);
  58.             text.css({top:dim['t'],left:dim['l'],opacity: 0.9}).fadeIn();
  59.         }
  60.         /**
  61.          * Ukrycie tooltipa
  62.          */
  63.          function HideTooltip($this){
  64.             var text = $this.next(defaults.tipclass);
  65.             text.fadeOut('fast');
  66.         }
  67.         /**
  68.          * Przesuwanie tooltipa wraz z ruchem myszki
  69.          */
  70.          function MoveTooltip($this,e){
  71.             dim = DimentionsTooltip(e);
  72.             $this.next(defaults.tipclass).css({top:dim['t'],left:dim['l']});
  73.         }
  74.         /**
  75.          * Wyliczenie nowej pozycji tooltipa
  76.          */
  77.          function DimentionsTooltip(e){
  78.             var wW = $(window).width();
  79.             var topT = Math.ceil(e.pageY+defaults.tipT);
  80.             var leftT = Math.ceil(e.pageX-$(defaults.container).offset().left+defaults.tipL);
  81.             if (leftT+250>wW) leftT = (wW-250);
  82.             dim = new Array();
  83.             dim['l'] = leftT+ 'px'; dim['t'] = topT+ 'px'; 
  84.             return dim;
  85.         }
  86.     };
  87. })(jQuery);
  88.  
  89. $(document).ready(function(){
  90.     $('.jquery_tooltip_2').Vtip();
  91. });
  92. </script>
  93. <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>
  94. <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>
  95. ?>
[PHP] pobierz, plaintext


Już sam nie wiem jaki powinien być wzrór pluginu, spotkałem się z wieloma różnymi, np:
[PHP] pobierz, plaintext 
  1. <?php
  2. <script type="text/javascript">
  3. ;(function($){
  4.     $.fn.Vtip = function(options){
  5.         var defaults = {};
  6.         defaults = $.extend(true, {}, defaults, options);
  7.         return this.each(function(e) {
  8.             var $this = $(this);
  9.             // kod
  10.         });
  11.         // metody prywatne
  12.         function ShowTooltip(){}
  13.         function HideTooltip(){}
  14.     };
  15.     // metody publiczne
  16.     $.fn.Vtip.prywatna = function() {};
  17. })(jQuery);
  18. /** Albo tak: */
  19. (function($){ 
  20.     $.fn.extend({ 
  21.         Vtip: function() { 
  22.             return $(); 
  23.             // gdzie umieścić metody? tutaj
  24.             prywatna: function(){}
  25.         }
  26.     }); 
  27. })(jQuery);
  28. /** Inny sposób */
  29. (function($) {
  30.     $.fn.Vtip = function(o) {
  31.         return this.each(function() {});
  32.     };
  33.     $.extend(Vtip.prototype, {
  34.         functionA : function() {},
  35.         functionB : function() {}
  36.     }
  37. })(jQuery);
  38. /** Jeszcze dwa */
  39. (function($) {
  40.     $.fn.Vtip = function(o) {
  41.     return this.each(function() {
  42.         // metoda prywatna
  43.         var functionA = function () {}
  44.     });
  45.   };
  46. })(jQuery);
  47.  
  48. (function($) {
  49.     $.fn.Vtip = function(o) {
  50.     return this.each(function() {});
  51.   };
  52.   $.fn.extend ({
  53.     functionA : function () {}
  54.   });
  55. })(jQuery);
  56. </script>
  57. ?>
[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
8.05.2009, 12:41:25
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
11.05.2009, 12:42:39
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 
  1. <?php
  2. <script type="text/javascript">
  3. /**
  4.  * Copyright (c) 2008 Vokiel vokiel.com
  5.  * @name Vtip VokielTooltip
  6.  * @author Vokiel Robert Mikołajuk
  7.  * 
  8. * Livequery plugin required: <a href=\"http://docs.jquery.com/Plugins/livequery\" target=\"_blank\">http://docs.jquery.com/Plugins/livequery</a>
  9.  * 
  10.  * Dual licensed under the MIT and GPL licenses:
  11.  * <a href=\"http://www.opensource.org/licenses/mit-license.php\" target=\"_blank\">http://www.opensource.org/licenses/mit-license.php</a>
  12.  * <a href=\"http://www.gnu.org/licenses/gpl.html\" target=\"_blank\">http://www.gnu.org/licenses/gpl.html</a>
  13.  * 
  14.  * Settings:
  15.  *     moving: true,                        Tracking mouse move
  16.  *  tipclass: 'jquery_tooltip_show',    Default class of tooltip
  17.  *  usetipclass: true,                    If set true tipclass will be used to stylize the tip, else css properties will be set as style="" 
  18.  *  container: '.container',            The container of elements, where tips are placed into, needet to enumerate position of Vtip
  19.  *  tipL: 10,                            Left Vtip margin from cursor 
  20.  *  tipT: 20,                            Top Vtip margin from cursor
  21.  *  css:                                 Array of css properties to be set as Vtip style="" property
  22.  *  
  23.  * Usage:
  24.  *  $(document).ready(function(){
  25.  *      $('.jquery_tooltip_2').livequery(function(){
  26.  *          $(this).Vtip();
  27.  *      });
  28.  *  });
  29.  */
  30. (function($) {
  31.     $.extend({
  32.         Vtip : new function(){
  33.         /**
  34.          * default settings
  35.          */ 
  36.         this.defaults = {
  37.             moving: true,
  38.             tipclass: 'jquery_tooltip_show',
  39.             usetipclass: true,
  40.             container: '.container',
  41.             tipL: 10,
  42.             tipT: 20,
  43.             css: {
  44.                 'display': 'block',
  45.                 'position': 'absolute',
  46.                 'width': '250px',
  47.                 'border': '1px solid #09547B',
  48.                 'background-color': '#B6DBED',
  49.                 'color': '#000',
  50.                 'text-align': 'left',
  51.                 'padding': '5px',
  52.                 'font-weight': 'normal',
  53.                 'z-index': '100'
  54.             }
  55.         };
  56.         this.construct = function(options){
  57.             // extending default settings
  58.             defaults = $.extend($.Vtip.defaults, $.Vtip.defaults, options);
  59.             return this.each(function(e){
  60.                 $this = $(this);
  61.                 // creating span element 
  62.                 var span = $('<span />').attr('class',$.Vtip.defaults.tipclass);
  63.                 // setting to use style or class to customize element style
  64.                 if ($.Vtip.defaults.usetipclass==false){span.css($.Vtip.defaults.css);}
  65.                 // putting span into document, just after a 
  66.                 $this.after(span.html($this.attr('title')).hide()).attr('title', '');
  67.                 // setting events
  68.                 $this.bind('mouseover',function(e){ShowTooltip(e);})
  69.                     .bind('mouseout' ,function(e){HideTooltip();})
  70.                 // adding tracking mouse move event
  71.                 if ($.Vtip.defaults.moving==true){
  72.                     $this.bind('mousemove',function(e){MoveTooltip(e);});
  73.                 }
  74.             });
  75.         };
  76.         /**
  77.          * Showing Vtip
  78.          */
  79.         function ShowTooltip(e){
  80.             dim = DimentionsTooltip(e);
  81.             $this.next('.'+$.Vtip.defaults.tipclass).css({top:dim['t'],left:dim['l'],opacity: 0.9}).fadeIn();        
  82.         };
  83.         /**
  84.          * Hidding Vtip
  85.          */
  86.         function HideTooltip(){
  87.             $this.next('.'+$.Vtip.defaults.tipclass).fadeOut('fast');
  88.         };
  89.         /**
  90.          * Moving Vtip with mouse move
  91.          */
  92.         function MoveTooltip(e){
  93.             $this.next('.'+$.Vtip.defaults.tipclass).css({top:dim['t'],left:dim['l']});
  94.         };
  95.         /**
  96.          * New Vtip position enumerate
  97.          */
  98.         function DimentionsTooltip(e){
  99.             var wW = $(window).width();
  100.             var topT = Math.ceil(e.pageY+$.Vtip.defaults.tipT);
  101.             var leftT = Math.ceil(e.pageX-$($.Vtip.defaults.container).offset().left+$.Vtip.defaults.tipL);
  102.             if (leftT+250>wW) leftT = (wW-250);
  103.             dim = new Array();
  104.             dim['l'] = leftT+ 'px'; dim['t'] = topT+ 'px';
  105.             return dim;
  106.         };
  107.            return this;
  108.         }
  109.     });
  110.     /**
  111.      * Extending jQuery fn
  112.      */
  113.     $.fn.extend({
  114.         Vtip: $.Vtip.construct
  115.     });
  116. })(jQuery);
  117.  
  118. /* Przykład użycia */
  119. $(document).ready(function(){
  120.     $('.jquery_tooltip_2').livequery(function(){
  121.         $(this).Vtip();
  122.     });
  123.         
  124.     $('#add_new').click(function(){
  125.         $(this).after('<a class="jquery_tooltip_2" title="<div>test</div>"> test </a>');
  126.     });
  127. });
  128. </script>
  129. <a class="jquery_tooltip_2" title="<table border='0'><tr><td><strong>test 1</strong></td></tr></table>" >test1</a>
  130. <a class="jquery_tooltip_2" title="<table border='0'><tr><td><strong>test 2</strong></td></tr></table>" >test2</a>
  131. <a id="add_new">nowy test</a>
  132. ?>
[PHP] pobierz, plaintext
mateo84
17.10.2010, 12:46:22
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 smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.