SlimPicker不适用于jQuery插件 [英] SlimPicker doesn't work with jQuery plugin
本文介绍了SlimPicker不适用于jQuery插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望jQuery和slimpicker一起工作，我该怎么做？：
来自http://jsfiddle.net的样本
< html>
< head>
< link rel =stylesheethref =http://www.styledisplay.com/scripts/slimpicker/pagestyle.cssmedia =screen，projection/>
< link rel =stylesheethref =http://www.styledisplay.com/scripts/slimpicker/slimpicker.cssmedia =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（我在jQuery函数里面！
}）;
}）;
< / script>
< / head>
< body>
< div class =container>
< h1> SlimPicker< / h1>
< div class =intro>
< p>在IFrame中工作的日期选取器。还允许进行键盘导航。< / p>
< / div>
< p>
< label for =new_day>预设日历< / label>
< input id =new_dayname =new_daytype =textclass =slimpickerautocomplete =offvalue =/>
< / p>
< p>
< label for =birthday>带选项的日历< / label>
dayChars：3，
dayNames：
days.Month：[31,28,31,30,31,30,31 ，31,30,31,30,31]，
格式：'yyyy-mm-dd'，
monthNames：['Januar'，'Februar'，'M& auml; rz'，' 4月'，'Mai'，'Juni'，'Juli'，'August'，'9月'，'Oktober'，'November'，'Dezember']，
startDay：1，
yearOrder： 'desc'，
yearRange：90，
yearStart：2007
}value =1980-03-13/>
< / p>
< p>
此按钮使用< strong> jquery-1.7.2.min.js插件< / strong>
< input type =buttonid =buttonvalue =Click mestyle ={text-align：center}/>
< br />
要激活日历，请从代码< 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>
解决方案
您可以轻松地使用它。这里的问题在于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
I want jQuery and slimpicker work together, what should I do?:
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>
解决方案
you can get it to work easily. The problem here is that SlimPicker is old and does not adhere to mootools codex - i.e. it still uses $ in preference to document.id.
you can fix it by creating a closure around the class: http://jsfiddle.net/dimitar/ZRGAd/9/
in code it's like:
(function($) {
var SlimPicker = this.SlimPicker = new Class({
method: function() {
console.log($ == jQuery); // false
}
});
}(document.id));
console.log($ == jQuery); // true
or, search and replace all $() references in the class with document.id
这篇关于SlimPicker不适用于jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
