我希望jQuery和slimpicker一起工作,我该怎么办?: Sample from 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ä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>
答案 0 :(得分:2)
你可以轻松地让它工作。这里的问题是SlimPicker是旧的并且不遵守mootools codex - 即它仍然优先使用$ 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
个引用
答案 1 :(得分:0)
如果我没弄错的话。 mootools和jQuery都使用$
作为主要功能的简写。因此你会发生碰撞。
我会查看jQuery noConflict。
此外,我尝试从jsFiddle中删除所有jQuery代码,但仍然会引发很多错误。不知道mootools,但尝试修复错误,然后使用noConflict添加jQuery。