jQuery und andere Bibliotheken gemeinsam verwenden

Kategorie: Javascript
Publikationsdatum: 08.08.2011
Hin und wieder ist es nötig, jQuery und andere Bibliotheken (Prototype, MooTools, YUI, ...) gemeinsam zu nutzen. Leider kann dies zu schweren Fehlern führen.

Im Standardmodus verwendet jQuery nämlich $ als Kürzel für jQuery. Mittels jQuery.noConflict() kann man dies aber überschreiben. Somit wird $ wieder der Original-Bibliothek, in unserem Fall dem Prototype, zugeordnet.
HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Testseite</title>
  6.  
  7. <script type="text/javascript" language="javascript" src="prototype.js"></script>
  8. <script type="text/javascript" language="javascript" src="jquery.js"></script>
  9. <script type="text/javascript" language="javascript">
  10. jQuery.noConflict();
  11.  
  12. //jQuery mittels jQuery(...) nutzen
  13. jQuery(document).ready(function(){
  14. jQuery("div").hide();
  15. });
  16.  
  17. //Prototype mittels $(...) nutzen
  18. $('someid').hide();
  19. </script>
  20. </head>
  21.  
  22. <body></body>
  23. </html>
Falls man einen Shortcut für jQuery behalten möchte, es trotzdem aber keine Konflikte mit anderen Bibliotheken geben soll, ist die unten folgende Variante möglich. Der Shortcut muss nicht $j heißen. Man kann verwenden, was man möchte (jq, $j, js, test, ...).
HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Testseite</title>
  6.  
  7. <script type="text/javascript" language="javascript" src="prototype.js"></script>
  8. <script type="text/javascript" language="javascript" src="jquery.js"></script>
  9. <script type="text/javascript" language="javascript">
  10. var $j = jQuery.noConflict();
  11.  
  12. //jQuery mittels $j(...) nutzen
  13. $j(document).ready(function(){
  14. $j("div").hide();
  15. });
  16.  
  17. //Prototype mittels $(...) nutzen
  18. $('someid').hide();
  19. </script>
  20. </head>
  21.  
  22. <body></body>
  23. </html>
Möchte man keine Alternative zum jQuery-Name, sprich man möchte $ nutzen und trotzdem nicht über Probleme mit anderen Bibliotheken nachdenken, dann gibt es noch eine Lösungsansatz. Meistens ist dies die ideale Lösung. Man muss nur wenig Code tauschen, um die Zusammenarbeit der Bibliotheken zu gewährleisten. Man kann dafür aber keine anderen Methoden (von anderen Bibliotheken) in dieser "abgeschlossenen" Funktion nutzen.
HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Testseite</title>
  6.  
  7. <script type="text/javascript" language="javascript" src="prototype.js"></script>
  8. <script type="text/javascript" language="javascript" src="jquery.js"></script>
  9. <script type="text/javascript" language="javascript">
  10. jQuery.noConflict();
  11.  
  12. //jeden Code in eine "document ready area" verpacken und "$" uebergeben
  13. jQuery(document).ready(function($){
  14. //jQuery mittels $j(...) nutzen
  15. $("div").hide();
  16. });
  17.  
  18. //Prototype mittels $(...) nutzen
  19. $('someid').hide();
  20. </script>
  21. </head>
  22.  
  23. <body></body>
  24. </html>
Wenn man jQuery vor allen anderen Bibliotheken einbindet und jQuery anstatt $ nutzt, kann man auf das Überschreiben der $-Funktion mittels jQuery.noConflict() verzichten.
HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Testseite</title>
  6.  
  7. <script type="text/javascript" language="javascript" src="jquery.js"></script>
  8. <script type="text/javascript" language="javascript" src="prototype.js"></script>
  9. <script type="text/javascript" language="javascript">
  10. //jQuery mittels jQuery(...) nutzen
  11. jQuery(document).ready(function(){
  12. jQuery("div").hide();
  13. });
  14.  
  15. //Prototype mittels $(...) nutzen
  16. $('someid').hide();
  17. </script>
  18. </head>
  19.  
  20. <body></body>
  21. </html>
Stichwörter: jQuery, andere Bibliotheken gemeinsam
 
 
NACH OBEN