jQuery Plugin - so richtig?

stayInside · 22.02.2009, 02:40

Hallo,

habe vorhin mein erstes jQuery Plugin erstellt. Und wollte mal fragen ob dies vom Aufbau her korrekt ist.

Hier mal der komplette Code, lässt sich ja so oder so rausfinden -.-

PHP-Code:

  jQuery.fn.siDialog =
{
    /**
     * Description
     * 
     * @var string
     */
    strRequestPath:     '/index.php?loadModule=',
    
    /**
     * Description
     * 
     * @var string
     */
    strHiddenElements:     'object',
    
    /**
     * Description
     * 
     * @var integer
     */
    intFadeIn:             100,
    
    /**
     * Description
     * 
     * @var integer
     */
    intFadeOut:         100,
    
    /**
     * Description
     * 
     * @var integer
     */
    intAnimateSpeed:    150,

    /**
     * Method: show
     * 
     * Description
     * 
     * @author Benjamin Funk <bfu@stayinside.de>
     * 
     * @check bfu <00.00.0000>
     * @check pma <00.00.0000>
     * 
     * @param string        strRequestModule
     * @param string        strUpdateModule
     * @param string        strUpdateElement
     * 
     * @return boolean|object
     */
    show: function(strDialogTitle, strRequestModule, strUpdateModule, strUpdateElement)
    {
        if ($("div#siDialogModal").length > 0 ||
            $("div#siDialogContainer").length > 0)
        {
            return (false);
        }
        
        var objThis = this;
        
        strDialogTitle     ? objThis.strDialogTitle = strDialogTitle
                        : objThis.strDialogTitle = null;
        
        strRequestModule     ? objThis.strRequestModule = strRequestModule
                            : objThis.strRequestModule = null;
                            
        strUpdateModule     ? objThis.strUpdateModule = strUpdateModule
                            : objThis.strUpdateModule = null;
                            
        strUpdateElement     ? objThis.strUpdateElement = strUpdateElement
                            : objThis.strUpdateElement = null;
    
        jQuery.ajax(
        {
            url: objThis.strRequestPath + 'JQueryDialogMdl&innerModule=' + objThis.strRequestModule + '&dialogTitle=' + objThis.strDialogTitle,
            
            success: function(transport)
            {            
                jQuery('body').prepend(transport);
                
                jQuery(objThis.strHiddenElements).each(function()
                {
                    jQuery(this).css(
                    {
                        visibility: 'hidden'
                    })
                });
                
                jQuery('div#siDialogModal').fadeIn(objThis.intFadeIn);
                
                jQuery().siDialog.__center('div#siDialogContainer', false);
                
                jQuery('div#siDialogContainer').fadeIn(objThis.intFadeIn);
            },
            
            complete: function()
            {
                $('div#siDialogModal').click(function()
                {
                    jQuery().siDialog.close(objThis.strUpdateModule, objThis.strUpdateElement);
                })
                
                $(window).resize(function()
                {
                    jQuery().siDialog.__center('div#siDialogContainer', true);
                });
            }
        });
        
        return (jQuery);
    },
    
    /**
     * Method: close
     * 
     * Description
     * 
     * @author Benjamin Funk <bfu@stayinside.de>
     * 
     * @check bfu <00.00.0000>
     * @check pma <00.00.0000>
     * 
     * @return object
     */
    close: function()
    {
        var objThis = this;
        
        jQuery(objThis.strHiddenElements).each(function()
        {
            jQuery(this).css(
            {
                visibility: 'visible'
            })
        });
        
        jQuery('div#siDialogContainer, div#siDialogModal').fadeOut(objThis.intFadeOut).queue(function()
        {
            jQuery(this).remove();
        });
        
        if (objThis.strUpdateModule != null &&
            objThis.strUpdateElement != null)
        {
            jQuery.ajax(
            {
                url: objThis.strRequestPath + objThis.strUpdateModule,
                
                success: function(transport)
                {
                    jQuery(objThis.strUpdateElement).html(transport);
                }
            });
        }
        
        return (jQuery);
    },
    
    /**
     * Method: __center
     * 
     * Description
     * 
     * @author Benjamin Funk <bfu@stayinside.de>
     * 
     * @check bfu <00.00.0000>
     * @check pma <00.00.0000>
     * 
     * @param string        strElement
     * @param boolean        blnAnimate
     * 
     * @return boolean|object
     */
    __center: function(strElement, blnAnimate)
    {
        var objThis = this;
        
        var objSize =
        {
            'windowHeight':     jQuery(window).height(),
            'windowWidth':        jQuery(window).width(),
            'elementHeight':     jQuery(strElement).height(),
            'elementWidth':     jQuery(strElement).width()
        }
        
        var objCSS =
        {
            'width':     objSize.elementWidth,
            'height':     objSize.elementHeight,
            'top':         objSize.windowHeight >= objSize.elementHeight     ? (objSize.windowHeight / 2) - (objSize.elementHeight / 2)
                                                                        : 0,
            
            'left':     objSize.windowWidth >= objSize.elementWidth ? (objSize.windowWidth / 2) - (objSize.elementWidth / 2)
                                                                    : 0
        }
        
        if (!blnAnimate)
        {
            jQuery(strElement).css(objCSS);
        }
        else
        {
            jQuery(strElement).animate(objCSS, objThis.intAnimateSpeed);
        }
        
        return (jQuery);
    }
};

agrajag · 22.02.2009, 11:15

Hallo stayInside,
es wäre ganz gut, wenn du mal zeigen würdest was genau das Ding machen soll

So beim Überfliegen sind mri ein paar Sachen aufgefallen, die ich anders machen würde:
Deine show-Methode hat 4 Parameter. Offensichtlich müssen aber nicht immer alle gesetzt sein (zumindest prüfst du ja später ob sie gesetzt sind....). In dem Fall würe ich dann nicht 4 Parameter verwenden sondern nur einen und dieser ist ein Hash mit den jeweiligen Optionen als Keys.
Das hier:

Code:

    strDialogTitle     ? objThis.strDialogTitle = strDialogTitle
                        : objThis.strDialogTitle = null;

finde ich etwas komisch, so verwendet man das eigentlich nicht, sondenr so:

Code:

objThis.strDialogTitle = (strDialogTitle) ? strDialogTitle : null;

und auch das ist unnötig, wenn du es wie oben vorgeschlagen machst. Dann kannst du den übergebenen Hash einfach mti $.extend() erweitern. ungefähr so:

Code:

show: function(options){
  options = $.extend({
    strDialogTitle: "defaultwert",
    strDialogModule: "defaultwert2"
}, options || {});

An ein paar Stellen verwendest du $() statt jQuery() das solltest du in Plugins immer vermeiden (da das Ding sonst nicht im noConflict()-Modus läuft.)

Schau dir einfach mal diese Anleitung an:
Plugins/Authoring - jQuery JavaScript Library da sind einige gute Tipps und Hinweise drin.

moveax1 · 22.02.2009, 11:41

ich hab selber noch keines geschrieben bin aber gestern über dieses Videotutorial gestolpert:

You Still Can’t Create a jQuery Plugin? - NETTUTS

stayInside · 22.02.2009, 14:46

Okay, ein paar Sachen konnte ich dank euren Tipps schonmal optimieren.

Also das Plugin macht folgendes:

Holt sich per AJAX ein Module inkl. dessen Template. Diess Dialogmodule beinhaltet dann ein weiteren Moduleloader. So kann ich z. B. mit

PHP-Code:

  $().siDialog.show('NewsletterMdl', 'NewsletterPanelMdl', '#newsletterContainer');

ein Dialog erstellen, welches das Formular zum Eintragen in den Newsletter beinhaltet.
Der 2te und 3te Parameter kommt beim schliessen zum Einsatz. Wird das Dialog geschlossen, wird das Module NewsletterPanelMdl geladen, und das Ergebniss davon wird per html() in #newsletterContainer geladen.

Das mit den options und 1 Parameter werde ich gleich mal ausprobieren. Mir ging es bei meiner Methode in erster Linie darum, das er die 4 Parameter ins Objekt speichert, damit, egal wie ich die Close Methode aufrufe, er noch weiss wie das Objekt aufgerufen worden ist.

agrajag · 22.02.2009, 15:10

Der Aufruf sieht nicht schön aus. Wenn du Funktionen unter jQuery.fn.* ablegst, dann kannst/solltest du diese so aufrufen:

Code:

$('newsletterContainer').siDialog(...);

Ansonsten kannst du die Funktionen auch direkt unter jQuery.* anlegen und sie so verwenden:
$.siDialog.show(...)

Das ist aber glaube ich auch nochmal in der von mir verlinkten Anleitung angesprochen...

Vielleicht schaut Manko10 ja noch in diesem Thread vorbei, ich glaube der ist was jQuery-Plugins angeht etwas fitter als ich

Manko10 · 23.02.2009, 12:34

Dem ist vorerst nicht mehr viel hinzuzufügen. Nur dies:
Du solltest auch nach schließenden geschweiften Klammern Semikola setzen:{ … }; ansonsten bekommst du Schwierigkeiten, wenn du den Code komprimierst.

Für den Aufruf wie agrajag ihn vorgeschlagen hat, musst du das so machen:

Code:

jQuery.fn.siDialog = function(context) {
}

fn ist übrigens ein Alias für prototype.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Kurze Einführung in Firefox Search Plugin Programmierung	PTC	Tutorials	5	10.02.2009 01:31
[Erledigt] Javascript-Code in einem document.write richtig durchführen + richtiges Po	BartTheDevil89	JavaScript, Ajax und mehr	15	29.11.2008 14:08
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35
Drag & Drop via JQuery & Ajax --> Geht nicht :(	Plague	JavaScript, Ajax und mehr	2	23.10.2008 12:19
PNG's werden im IE6 nicht richtig angezeigt!	litterauspirna	Off-Topic Diskussionen	6	15.09.2008 15:13
Thickbox Funktionalität in jQuery	Plague	JavaScript, Ajax und mehr	1	28.07.2008 23:58
[Erledigt] Modularisierung: Wie macht man es richtig?		PHP-Fortgeschrittene	1	12.03.2006 16:00
[Erledigt] Lieg ich da richtig?		Datenbanken	4	31.08.2005 13:21
[Erledigt] Probleme mit Miranda Plugin und MySQL		Datenbanken	0	24.08.2005 15:39
[Erledigt] VARIABLEN WERDEN NICHT RICHTIG VERARBEITET!!!! HILFE		PHP Tipps 2005-2	6	02.07.2005 18:32
SMARTY Thumbnail Plugin	duderino	Beitragsarchiv	1	21.04.2005 16:19
Variable wird nicht richtig übergeben		PHP Tipps 2005	17	16.01.2005 16:51
[Erledigt] imap_body RICHTIG ausgeben (mit allen Sonderzeichen usw.)		PHP-Fortgeschrittene	3	08.09.2004 02:33
[Erledigt] Perl richtig installiert oder falsch ? testen aber wie ?	c01001	Server, Hosting und Workstations	2	31.08.2004 22:37
Formular, welches prüft, ob eingegebene Antwort richtig....		PHP Tipps 2004	10	15.08.2004 22:18

22.02.2009, 02:40
stayInside Erfahrener Benutzer Registriert seit: 06.11.2008 Beiträge: 208	jQuery Plugin - so richtig? Hallo, habe vorhin mein erstes jQuery Plugin erstellt. Und wollte mal fragen ob dies vom Aufbau her korrekt ist. Hier mal der komplette Code, lässt sich ja so oder so rausfinden -.- PHP-Code: jQuery.fn.siDialog = { /** * Description * * @var string / strRequestPath: '/index.php?loadModule=', /* * Description * * @var string / strHiddenElements: 'object', /* * Description * * @var integer / intFadeIn: 100, /* * Description * * @var integer / intFadeOut: 100, /* * Description * * @var integer / intAnimateSpeed: 150, /* * Method: show * * Description * * @author Benjamin Funk <bfu@stayinside.de> * * @check bfu <00.00.0000> * @check pma <00.00.0000> * * @param string strRequestModule * @param string strUpdateModule * @param string strUpdateElement * * @return boolean\|object / show: function(strDialogTitle, strRequestModule, strUpdateModule, strUpdateElement) { if ($("div#siDialogModal").length > 0 \|\| $("div#siDialogContainer").length > 0) { return (false); } var objThis = this; strDialogTitle ? objThis.strDialogTitle = strDialogTitle : objThis.strDialogTitle = null; strRequestModule ? objThis.strRequestModule = strRequestModule : objThis.strRequestModule = null; strUpdateModule ? objThis.strUpdateModule = strUpdateModule : objThis.strUpdateModule = null; strUpdateElement ? objThis.strUpdateElement = strUpdateElement : objThis.strUpdateElement = null; jQuery.ajax( { url: objThis.strRequestPath + 'JQueryDialogMdl&innerModule=' + objThis.strRequestModule + '&dialogTitle=' + objThis.strDialogTitle, success: function(transport) { jQuery('body').prepend(transport); jQuery(objThis.strHiddenElements).each(function() { jQuery(this).css( { visibility: 'hidden' }) }); jQuery('div#siDialogModal').fadeIn(objThis.intFadeIn); jQuery().siDialog.__center('div#siDialogContainer', false); jQuery('div#siDialogContainer').fadeIn(objThis.intFadeIn); }, complete: function() { $('div#siDialogModal').click(function() { jQuery().siDialog.close(objThis.strUpdateModule, objThis.strUpdateElement); }) $(window).resize(function() { jQuery().siDialog.__center('div#siDialogContainer', true); }); } }); return (jQuery); }, /* * Method: close * * Description * * @author Benjamin Funk <bfu@stayinside.de> * * @check bfu <00.00.0000> * @check pma <00.00.0000> * * @return object / close: function() { var objThis = this; jQuery(objThis.strHiddenElements).each(function() { jQuery(this).css( { visibility: 'visible' }) }); jQuery('div#siDialogContainer, div#siDialogModal').fadeOut(objThis.intFadeOut).queue(function() { jQuery(this).remove(); }); if (objThis.strUpdateModule != null && objThis.strUpdateElement != null) { jQuery.ajax( { url: objThis.strRequestPath + objThis.strUpdateModule, success: function(transport) { jQuery(objThis.strUpdateElement).html(transport); } }); } return (jQuery); }, /* * Method: __center * * Description * * @author Benjamin Funk <bfu@stayinside.de> * * @check bfu <00.00.0000> * @check pma <00.00.0000> * * @param string strElement * @param boolean blnAnimate * * @return boolean\|object */ __center: function(strElement, blnAnimate) { var objThis = this; var objSize = { 'windowHeight': jQuery(window).height(), 'windowWidth': jQuery(window).width(), 'elementHeight': jQuery(strElement).height(), 'elementWidth': jQuery(strElement).width() } var objCSS = { 'width': objSize.elementWidth, 'height': objSize.elementHeight, 'top': objSize.windowHeight >= objSize.elementHeight ? (objSize.windowHeight / 2) - (objSize.elementHeight / 2) : 0, 'left': objSize.windowWidth >= objSize.elementWidth ? (objSize.windowWidth / 2) - (objSize.elementWidth / 2) : 0 } if (!blnAnimate) { jQuery(strElement).css(objCSS); } else { jQuery(strElement).animate(objCSS, objThis.intAnimateSpeed); } return (jQuery); } };


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

22.02.2009, 11:15
agrajag Moderator Registriert seit: 02.10.2006 Beiträge: 3.820 PHP-Kenntnisse: Fortgeschritten	Hallo stayInside, es wäre ganz gut, wenn du mal zeigen würdest was genau das Ding machen soll So beim Überfliegen sind mri ein paar Sachen aufgefallen, die ich anders machen würde: Deine show-Methode hat 4 Parameter. Offensichtlich müssen aber nicht immer alle gesetzt sein (zumindest prüfst du ja später ob sie gesetzt sind....). In dem Fall würe ich dann nicht 4 Parameter verwenden sondern nur einen und dieser ist ein Hash mit den jeweiligen Optionen als Keys. Das hier: Code: strDialogTitle ? objThis.strDialogTitle = strDialogTitle : objThis.strDialogTitle = null; finde ich etwas komisch, so verwendet man das eigentlich nicht, sondenr so: Code: objThis.strDialogTitle = (strDialogTitle) ? strDialogTitle : null; und auch das ist unnötig, wenn du es wie oben vorgeschlagen machst. Dann kannst du den übergebenen Hash einfach mti $.extend() erweitern. ungefähr so: Code: show: function(options){ options = $.extend({ strDialogTitle: "defaultwert", strDialogModule: "defaultwert2" }, options \|\| {}); An ein paar Stellen verwendest du $() statt jQuery() das solltest du in Plugins immer vermeiden (da das Ding sonst nicht im noConflict()-Modus läuft.) Schau dir einfach mal diese Anleitung an: Plugins/Authoring - jQuery JavaScript Library da sind einige gute Tipps und Hinweise drin. __________________ Today you...Tomorrow me.

22.02.2009, 11:41
moveax1 Erfahrener Benutzer Registriert seit: 27.09.2008 Beiträge: 316 PHP-Kenntnisse: Fortgeschritten	ich hab selber noch keines geschrieben bin aber gestern über dieses Videotutorial gestolpert: You Still Can’t Create a jQuery Plugin? - NETTUTS __________________ twitter.com/moveax1 \|\| http://modxcms.com/ \|\| http://ubuntuusers.de/ $live->free() OR die();

22.02.2009, 14:46
stayInside Erfahrener Benutzer Registriert seit: 06.11.2008 Beiträge: 208	Okay, ein paar Sachen konnte ich dank euren Tipps schonmal optimieren. Also das Plugin macht folgendes: Holt sich per AJAX ein Module inkl. dessen Template. Diess Dialogmodule beinhaltet dann ein weiteren Moduleloader. So kann ich z. B. mit PHP-Code: `$().siDialog.show('NewsletterMdl', 'NewsletterPanelMdl', '#newsletterContainer');` ein Dialog erstellen, welches das Formular zum Eintragen in den Newsletter beinhaltet. Der 2te und 3te Parameter kommt beim schliessen zum Einsatz. Wird das Dialog geschlossen, wird das Module NewsletterPanelMdl geladen, und das Ergebniss davon wird per html() in #newsletterContainer geladen. Das mit den options und 1 Parameter werde ich gleich mal ausprobieren. Mir ging es bei meiner Methode in erster Linie darum, das er die 4 Parameter ins Objekt speichert, damit, egal wie ich die Close Methode aufrufe, er noch weiss wie das Objekt aufgerufen worden ist.

22.02.2009, 15:10
agrajag Moderator Registriert seit: 02.10.2006 Beiträge: 3.820 PHP-Kenntnisse: Fortgeschritten	Der Aufruf sieht nicht schön aus. Wenn du Funktionen unter jQuery.fn.* ablegst, dann kannst/solltest du diese so aufrufen: Code: $('newsletterContainer').siDialog(...); Ansonsten kannst du die Funktionen auch direkt unter jQuery.* anlegen und sie so verwenden: $.siDialog.show(...) Das ist aber glaube ich auch nochmal in der von mir verlinkten Anleitung angesprochen... Vielleicht schaut Manko10 ja noch in diesem Thread vorbei, ich glaube der ist was jQuery-Plugins angeht etwas fitter als ich __________________ Today you...Tomorrow me.

23.02.2009, 12:34
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.425 PHP-Kenntnisse: Fortgeschritten	Dem ist vorerst nicht mehr viel hinzuzufügen. Nur dies: Du solltest auch nach schließenden geschweiften Klammern Semikola setzen:{ … }; ansonsten bekommst du Schwierigkeiten, wenn du den Code komprimierst. Für den Aufruf wie agrajag ihn vorgeschlagen hat, musst du das so machen: Code: jQuery.fn.siDialog = function(context) { } fn ist übrigens ein Alias für prototype. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”