0

jQueryとslimpickerを一緒に動作させたいのですが、どうすればよいですか？： http://jsfiddle.net
からのサンプル

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

2 に答える 2

2

簡単に動作させることができます。ここでの問題は、SlimPickerが古く、mootoolsコーデックスに準拠していないことです。つまり、。よりも$を使用しdocument.idます。

クラスの周りにクロージャーを作成することで修正できます：http：//jsfiddle.net/dimitar/ZRGAd/9/

コードでは次のようになります。

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

$()または、クラス内のすべての参照を検索して、次のように置き換えますdocument.id

于 2012-04-11T15:07:45.360 に答える
0

私が間違っていなければ。mootoolsとjQueryはどちらも$、主な機能の省略形を使用しています。したがって、衝突が発生します。

jQuerynoConflictを調べます。

また、jsFiddleからすべてのjQueryコードを削除しようとしましたが、それでも多くのエラーがスローされます。mootoolsはわかりませんが、エラーを修正してから、noConflictを使用してjQueryを追加してください。

于 2012-04-11T09:55:08.873 に答える