php.de

Zurück   php.de > Webentwicklung > JavaScript, Ajax und mehr

JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene

Antwort
 
LinkBack Themen-Optionen
Alt 22.02.2009, 02:40  
Erfahrener Benutzer
 
Registriert seit: 06.11.2008
Beiträge: 240
stayInside befindet sich auf einem aufstrebenden Ast
Standard 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);
    }
}; 
stayInside ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 22.02.2009, 11:15  
Moderator
 
Registriert seit: 02.10.2006
Beiträge: 3.836
PHP-Kenntnisse:
Fortgeschritten
agrajag sorgt für eine eindrucksvolle Atmosphäreagrajag sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
Create your own quiz show.
agrajag ist offline   Mit Zitat antworten
Alt 22.02.2009, 11:41  
Erfahrener Benutzer
 
Registriert seit: 27.09.2008
Beiträge: 316
PHP-Kenntnisse:
Fortgeschritten
moveax1 befindet sich auf einem aufstrebenden Ast
Standard

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();
moveax1 ist offline   Mit Zitat antworten
Alt 22.02.2009, 14:46  
Erfahrener Benutzer
 
Registriert seit: 06.11.2008
Beiträge: 240
stayInside befindet sich auf einem aufstrebenden Ast
Standard

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.
stayInside ist offline   Mit Zitat antworten
Alt 22.02.2009, 15:10  
Moderator
 
Registriert seit: 02.10.2006
Beiträge: 3.836
PHP-Kenntnisse:
Fortgeschritten
agrajag sorgt für eine eindrucksvolle Atmosphäreagrajag sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
Create your own quiz show.
agrajag ist offline   Mit Zitat antworten
Alt 23.02.2009, 12:34  
Supermoderator HD
 
Registriert seit: 16.03.2008
Beiträge: 9.214
PHP-Kenntnisse:
Fortgeschritten
Manko10 genießt hohes AnsehenManko10 genießt hohes AnsehenManko10 genießt hohes AnsehenManko10 genießt hohes AnsehenManko10 genießt hohes AnsehenManko10 genießt hohes AnsehenManko10 genießt hohes AnsehenManko10 genießt hohes AnsehenManko10 genießt hohes AnsehenManko10 genießt hohes AnsehenManko10 genießt hohes Ansehen
Standard

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: “Performing Push Backups – Part 1: rdiff-backup
Manko10 ist offline   Mit Zitat antworten
Antwort


Themen-Optionen


Ä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
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

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
jquery plugin erstellen, jquery plugin schreiben, jquery anleitung deutsch, jquery plugins erstellen, jquery.fn, jquery plugin tutorial deutsch, jquery anleitung, jquery plugins schreiben, jquery deutsche anleitung, jquery plugin aufbau, jquery plugin programmieren, jquery plugin erweitern, jquery kontaktformular, jquery plugin programmierung, jquery plugins programmieren, jquery plugins, jquery plugin selber schreiben, jquery plugin programming, jquery fn, jquery plugin variable

Alle Zeitangaben in WEZ +2. Es ist jetzt 02:31 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum