SlimPicker funktioniert nicht mit jQuery-Plugin

Ich möchte jQuery und slimpicker arbeiten zusammen, was soll ich tun ?:
Sample from http://jsfiddle.net SlimPicker funktioniert nicht mit jQuery-Plugin

<html> 
<head> 
    <link rel="stylesheet" href="http://www.styledisplay.com/scripts/slimpicker/pagestyle.css" media="screen, projection" /> 
    <link rel="stylesheet" href="http://www.styledisplay.com/scripts/slimpicker/slimpicker.css" media="screen, projection" /> 
    <script src="http://www.styledisplay.com/scripts/slimpicker/mootools-1.2.4-core-yc.js"></script> 
    <script src="http://www.styledisplay.com/scripts/slimpicker/mootools-1.2.4.4-more-yc.js"></script> 
    <script src="http://www.styledisplay.com/scripts/slimpicker/slimpicker.js"></script> 

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#button").click(function() { 
       alert("I'm inside jQuery function!"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="container"> 
    <h1>SlimPicker</h1> 
    <div class="intro"> 
     <p>Date Picker that works in IFrames. Also allows for keyboard navigation.</p> 
    </div> 
    <p> 
     <label for="new_day">default calendar</label> 
     <input id="new_day" name="new_day" type="text" class="slimpicker" autocomplete="off" value="" /> 
    </p> 
    <p> 
     <label for="birthday">calendar with options</label> 
     <input id="birthday" name="birthday" type="text" class="slimpicker" autocomplete="off" alt="{ 
      dayChars:3, 
      dayNames:['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'], 
      daysInMonth:[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], 
      format:'yyyy-mm-dd', 
      monthNames:['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'], 
      startDay:1, 
      yearOrder:'desc', 
      yearRange:90, 
      yearStart:2007 
     }" value="1980-03-13" /> 
    </p> 
    <p> 
     This button uses <strong>jquery-1.7.2.min.js plugin</strong> 
     <input type="button" id="button" value="Click me" style="{text-align:center}"/> 
     <br /> 
     To activate calendar, remove this reference from the code <br /> 
      <strong>http://code.jquery.com/jquery-1.7.2.min.js</strong> 

    </p> 
</div> 
<script> 
    $$('input.slimpicker').each(function(el){ 
     var picker = new SlimPicker(el); 
    }); 
</script> 
</body> 
</html>

Quelle

2012-04-11 fiberOptics

können Sie es leicht zur Arbeit bekommen. Das Problem hierbei ist, dass SlimPicker alt ist und sich nicht an den Code von mootools hält - d. H. Es verwendet immer noch $ anstelle von document.id.

Sie können das Problem beheben, indem ein Verschluss um die Klasse zu erstellen: http://jsfiddle.net/dimitar/ZRGAd/9/

in Code ist es wie:

(function($) { 
var SlimPicker = this.SlimPicker = new Class({ 
    method: function() { 
     console.log($ == jQuery); // false 
    } 
}); 
}(document.id)); 
console.log($ == jQuery); // true

oder, Suchen und Ersetzen alle $() Referenzen in der Klasse mit document.id

Quelle

2012-04-11 15:07:45

Erstaunlich! Vielen Dank! – fiberOptics

Wenn ich mich nicht irre. Beide Mootools und jQuery verwendet $ für Kurzschrift für ihre Hauptfunktionen. Daher bekommst du eine Kollision.

Ich würde in jQuery noConflict aussehen.

Auch ich habe versucht, alle jQuery-Code von Ihrem jsFiddle entfernen und es wirft immer noch eine Menge Fehler. Ich kenne mootools nicht, aber versuche, den Fehler zu beheben, dann füge jQuery mit noConflict hinzu.

Quelle

2012-04-11 09:55:08 fredrik

I habe das noConflict benutzt, aber ich kann es nicht funktionieren lassen. – fiberOptics

Kann ich ohne das ganze jQuery-Zeug arbeiten? – fredrik

Ja. Wenn ich versuche, jQuery Plug-in zu entfernen, funktioniert Slimpicker ordnungsgemäß. – fiberOptics

SlimPicker funktioniert nicht mit jQuery-Plugin

Antwort

Verwandte Themen