Plugin umschreiben

[Ratloser]

Hallo zusammen,

damit meine Seite auch geteilt werden kann, habe ich ein jQuery Plugin dafür gesucht und gefunden (http://voidtricks.com/flati-social-share-plugin-jquery/).

  
(function(e){e.fn.flati=function(t){var n={skin:"rasgulla",triggerPosition:"left",containerBg:"#a2a2a2",containerBorder:"#dee2e2",iconBg:"#dee2e2",iconHover:"#ffffff",hoverEffect:"jump"};var r=e.extend({},n,t);var i= window.location.href; var j= window.location.host+""+window.location.pathname; if(r.hoverEffect=="jump"){var s="overflow: hidden;"}else{var s="overflow: visible;"}return this.each(function(){e(this).prepend('<div id="sTrigger" style="'+r.triggerPosition+': 0; "><img src="skins/'+r.skin+'/trigger.png"></div><div id="sClose" style="display:none; '+r.triggerPosition+': 0;"><img src="skins/'+r.skin+'/close.png"></div><div id="shareContainer" style="background:'+r.containerBg+"; "+s+" border-bottom: 10px solid "+r.containerBorder+';"></div>');e("#shareContainer").html('<a href="http://facebook.com/sharer.php?u='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/facebook.png" style="background:'+r.iconBg+';"></a><a href="http://plus.google.com/share?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/google.png" style="background:'+r.iconBg+';"></a><a href="http://twitter.com/share?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/twitter.png" style="background:'+r.iconBg+';"></a><a href="http://www.pinterest.com/pin/create/button/?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/pinterest.png" style="background:'+r.iconBg+';"></a><a href="http://www.linkedin.com/shareArticle?mini=true&url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/linkedin.png" style="background:'+r.iconBg+';"></a><a href="http://stumbleupon.com/submit?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/stumbleupon.png" style="background:'+r.iconBg+';"></a><a href="http://tumblr.com/share/link?url='+j+'" target="_BLANK"><img src="skins/'+r.skin+'/tumblr.png" style="background:'+r.iconBg+';"></a><a href="http://reddit.com/submit?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/reddit.png" style="background:'+r.iconBg+';"></a><a href="http://www.digg.com/submit?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/digg.png" style="background:'+r.iconBg+';"></a>');e("#sTrigger").click(function(){e("#shareContainer").slideDown(300);e(this).fadeOut(200);e("#sClose").fadeIn(200)});e("#sClose").click(function(){e("#shareContainer").slideUp(300);e(this).fadeOut(200);e("#sTrigger").fadeIn(200)});e("#shareContainer img").each(function(){e(this).hover(function(){e(this).css("background",r.iconHover);if(r.hoverEffect=="jump"){e(this).animate({top:"-20px"},100)}});e(this).mouseout(function(){e(this).css("background",r.iconBg);if(r.hoverEffect=="jump"){e(this).animate({top:"0px"},100)}})})})}})(jQuery)

Der Aufruf:

    $(document).ready(function () {  
        $("body").flati({  
                skin: "round",  
                containerBg: "#C3C3C3",  
                containerBorder: "rgba(000,000,000,0)",  
                iconBg: "#FFFFFF",  
                iconHover: "#FFFFFF",  
                triggerPosition: "left"  
        });  
    });

Nach dem Einbauen und Anpassen fand ich das Design so gelungen, dass ich gerne die Sprachauswahl in der selben Weise hätte. Zweimal mit verschiedenen Optionen kann man die Funktion jedoch nicht aufrufen, sodass ich versucht habe, den Code umzuschreiben und aus der flati Funktion eine angepasste language Funktion zu machen. Dabei soll lediglich der Trigger auf die rechte Seite gestellt und ein anderer Skin (mit anderen Links) eingestellt werden. Alles kein Problem: Einen neuen Skin habe ich erstellt und die Links kann ich ohne Problem im Code ändern.

Das Problem: Ein einfaches Umbenennen von e.fn.flati=function zu e.fn.language=function und der folgende Aufruf funktioniert nicht:

  
    $(document).ready(function () {  
    $("body").language({  
                skin: "language",  
                containerBg: "#C3C3C3",  
                containerBorder: "rgba(000,000,000,0)",  
                iconBg: "#FFFFFF",  
                iconHover: "#FFFFFF",  
                triggerPosition: "right"  
        });  
    });  

Wurden vielleicht globale Variablen benutzt, die sich dann überschneiden oder warum funktioniert das nicht?

Ich wäre sehr dankbar für schnelle und hilfreiche Antworten und habt bitte ein Nachsehen mit mir, da ich wirklich ein Anfänger in dem Bereich bin. :)

MfG
der hoffentlich bald nicht mehr ratlose Ratlose

PS: Der CSS-Code sollte dafür eigentlich nicht von Belang sein, aber falls gewünscht, werde ich ihn noch hinzufügen.

[molily]

Hallo,

http://voidtricks.com/flati-social-share-plugin-jquery/

Das ist nicht so toll, weil es den Quellcode nur in minifizierter Form gibt.

Jage ihn erst einmal durch den http://jsbeautifier.org, um vernünftig damit arbeiten zu können.

Zweimal mit verschiedenen Optionen kann man die Funktion jedoch nicht aufrufen

Dann musst du das Plugin entweder stark abändern oder dir ein anderes suchen.

sodass ich versucht habe, den Code umzuschreiben und aus der flati Funktion eine angepasste language Funktion zu machen.

Wie sieht der geänderte Code aus? Du musst wahrscheinlich nicht nur den Namen, sondern auch die Implementierung ändern.

Das Problem: Ein einfaches Umbenennen von e.fn.flati=function zu e.fn.language=function … funktioniert nicht

Der Name ist auch nicht das Problem, sondern das, was der Code im Plugin macht. Er ist anscheinend nicht flexibel geschrieben. Das Problem lässt sich nicht dadurch beheben, eine zweite jQuery-Prototyp-Eigenschaft auf *dieselbe* unveränderte Plugin-Funktion zeigen zu lassen.

Wurden vielleicht globale Variablen benutzt, die sich dann überschneiden oder warum funktioniert das nicht?

Alles mögliche in diesem Plugin ist hartkodiert und nicht flexibel, vor allem ID-Selektoren.

Ich wäre sehr dankbar für schnelle und hilfreiche Antworten und habt bitte ein Nachsehen mit mir, da ich wirklich ein Anfänger in dem Bereich bin. :)

Dann solltest du dir besser ein anderes Plugin suchen, falls du es nicht komplett neu schreiben willst/kannst.

Mathias

[Ratloser]

Hallo,

danke erstmal für deine schnelle Antwort. Kann man denn nicht theoretisch die gleiche Funktion nochmal mit anderem Namen haben und mit anderen Optionen aufrufen und so umgehen, dass man die Funktion nicht zweimal mit verschiedenen Optionen aufrufen kann?
Ich dachte, dass die Inhalte der beiden Funktionen sich dann jeweils nichts anhaben können, es sei denn, die Variablen sind global.
Die ID-Selektoren wollte ich dann einfach durch class-Selektoren bei beiden Funktionen ersetzen.

MfG

Ratloser

[molily]

Guten Abend!

Kann man denn nicht theoretisch die gleiche Funktion nochmal mit anderem Namen haben und mit anderen Optionen aufrufen und so umgehen, dass man die Funktion nicht zweimal mit verschiedenen Optionen aufrufen kann?

Es spricht eigentlich nichts dagegen, *eine* Funktion *mehrfach* mit unterschiedlichen Parametern aufzurufen. Das ist meistens der Sinn von wiederverwendbaren Funktionen.

Wenn du sowieso die Umsetzung ändern musst, sodass sie auf mehrere Optionen reagiert, dann kann das auch unter demselben Namen passieren. Wenn du die Funktion hinreichend flexibel schreibst, sodass alle sich ändernden Parameter in den Options übergeben werden, dann braucht es auch nur eine Funktion.

Ich dachte, dass die Inhalte der beiden Funktionen sich dann jeweils nichts anhaben können, es sei denn, die Variablen sind global.

Das ist richtig, die Variablen sind lokal. Aber sie greifen auf ein und dasselbe DOM zu, also auf dieselben Elemente, wenn sie nicht flexibel genug sind. Das ist hier der Fall für das besagte Plugin. Auszug:

$(this).prepend('<div id="sTrigger" …');  
$("#shareContainer").html('…');  
$("#sTrigger").click(function () {  
  $("#shareContainer").slideDown(300);  
  $(this).fadeOut(200);  
  $("#sClose").fadeIn(200)  
});

Hier wird also mit dokumentweit eindeutigen IDs gearbeitet.

Die ID-Selektoren wollte ich dann einfach durch class-Selektoren bei beiden Funktionen ersetzen.

Das ist schon ein guter Schritt!

Wichtig ist auch, dass sie im Kontext eines gewissen Elements arbeiten. Also nach Elementen mit einer bestimmten Klasse im Kontext des jeweiligen Elements suchen, auf das das Plugin angewendet wird.

Dazu ist die jQuery-Methode find hilfreich: http://api.jquery.com/find/

ausgangsElement.find('.eineKlasse')

(ausgangsElement ist hier ein jQuery-Objekt)

Es gibt verschiedene Tutorials, die diese Grundlagen für jQuery-Plugins beschreiben:
https://www.google.de/search?hl=de&q=writing+jquery+plugins

Abstraktes Beispiel:

<div id="a"><div class="foo"></div></div>  
<div id="c"><div class="foo"></div></div>  
<div id="c"><div class="foofoo"></div></div>

$.fn.meinPlugin = function(options) {  
  options = $.extend({ selector: 'foo' }, options);  
  this.each(function(index, element) {  
    $(element).find(options.selector).text(options.text);  
  });  
};  
  
$('#a').meinPlugin({ text: 'AAA' });  
$('#b').meinPlugin({ text: 'BBB' });  
$('#c').meinPlugin({ text: 'CCC', selector: 'foofoo' });

Hier kann ich das Plugin wiederverwenden und alle Parameter, die sich ändern können, in den Options übergeben.

Das Plugin macht nicht viel, es sucht ein Nachfahrenelement mit einer gewissen Klasse (standardmäßig »foo«) heraus und füllt es mit Inhalt. Aber so sind letztlich alle guten Plugins aufgebaut (hier natürlich sehr vereinfacht).

Mathias

[Gunnar Bittersmann]

@@Ratloser:

nuqneH

Nach dem Einbauen und Anpassen fand ich das Design so gelungen, dass ich gerne die Sprachauswahl in der selben Weise hätte.

An automatische Sprachauswahl hast du gedacht?

Qapla'