Ankündigung

Einklappen
Keine Ankündigung bisher.

jQuery Plugin - so richtig?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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(strDialogTitlestrRequestModulestrUpdateModulestrUpdateElement)
        {
            if ($(
    "div#siDialogModal").length ||
                $(
    "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(
            {
                
    urlobjThis.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.strUpdateModuleobjThis.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(
                {
                    
    urlobjThis.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(strElementblnAnimate)
        {
            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(objCSSobjThis.intAnimateSpeed);
            }
            
            return (
    jQuery);
        }
    }; 

  • #2
    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.
    [URL="https://www.quizshow.io/"]Create your own quiz show.[/URL]

    Kommentar


    • #3
      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();

      Kommentar


      • #4
        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.

        Kommentar


        • #5
          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
          [URL="https://www.quizshow.io/"]Create your own quiz show.[/URL]

          Kommentar


          • #6
            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: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

            Kommentar

            Lädt...
            X