TextboxList jQuery mit Prototype

Hi,

ich habe mich heute mit der genialen Bibliothek TextboxList von Guillermo Rauch beschäftigt.

Er bietet neben der ursprünglichen MooTools Version auch eine jQuery Portierung an.
Zum Glück. Denn das ermöglicht mir als Prototype-Jünger dieses brilliante Stück Code ebenfalls zu verwenden.

Es gibt zwar eine Prototype-Portierung, allerdings ist die schon bisschen eingestaubt.
Die Jungs von TheWebFellas haben vor ein paar Monaten mal alle in diversen Blogs rumfliegenden Patches gesammelt und eine aktualisierte Variante in ihrem github zur Verfügung gestellt. Aber wie sie selbst sagen, haben sie es nicht ausgiebig getestet.

Dank der sehr nützlichen noConflict() Methode von jQuery lassen sich aber Prototype und jQuery gleichzeitig nutzen, solange man ein paar Kleinigkeiten beachtet.

Hier also mein Weg, wie ich TextboxList zum Laufen gebracht habe.

Da ich jQuery sonst nicht verwende habe ich

jQuery.noConflict();

direkt ans Ende der jQuery.js Datei gepackt. Damit steht die $-Funktion von jQuery nicht mehr zur Verfügung. TextboxList ist für diesen Fall schon vorbereitet.

Allerdings muss die Datei GrowingInput.js noch ein wenig angepasst werden. Hierzu ein (sehr) kleiner Patch von mir.

Im kompletten sieht das dann in etwa so aus:

<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="GrowingInput.js" type="text/javascript" charset="utf-8"></script>			
<script src="TextboxList.js" type="text/javascript" charset="utf-8"></script>

<!-- 
Folgender Block wird nur benötigt, wenn man noConflict() nicht direkt wie ich
in die jQuery.js packt.
-->
<script type="text/javascript" charset="utf-8">		
    jQuery.noConflict();

    jQuery(function(){
        var t = new TextboxList('#form_tags_input');
        t.add('Tag 1').add('Tag 2').add('Tag 3');
    });
</script>

Das Endergebnis sieht dann in etwa so aus.
textboxlist

Bis jetzt läuft alles soweit. Aber evtl. melde ich mich ja wieder mit weiteren Workarounds ;)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.