calendar - 在 YUI 日历中,如何在下一个/上一个月执行回调?

  显示原文与译文双语对照的内容
0 0

我正在使用一个 YUI3 Calendar 插件,并且希望在月份更改时执行一个操作。 我想在 YUI Calendar 中单击下一个/上个月按钮时执行回调。 我要怎么才能做到?

我尝试使用 A.one(),但它似乎不工作。 以下是我当前的尝试:


<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
<div class="yui3-skin-sam">
 <div id="event-calendar"></div>
</div>
<script type="text/javascript">
 YUI().use('calendar', function (Y) {

 new Y.Calendar({
 contentBox:"#event-calendar",
 width: '230px',
 showPrevMonth: false,
 showNextMonth: false,
 date: new Date()
 }).render();

 A.one(".yui3-calendarnav-nextmonth").on('click', function (ev) {
//... execute code here
 });
 });
</script>

时间: 原作者:

0 0

你的代码似乎适用于我,所以我假定你的问题在于:


A.one(".yui3-calendarnav-nextmonth").on('click', function (ev) {

使用CSS类选择单个元素,但多个元素可能具有相同的类。 所以你可能选择了另一个具有相同类的Node 。 你可能可以通过更具体地使用CSS选择器来完成这里代码,如下所示:


A.one("#event-calendar. yui3-calendarnav-nextmonth").on('click', function (ev) {

现在你选择了一个带有 class="yui3-calendarnav-nextmonth"的元素和一个带有 id="event-calendar"的父元素。 这应该只为你的event-calendar 选择下个月按钮。

下面是在单击侦听器中使用警告的可以运行示例:


YUI().use('calendar', function (A) {

 new A.Calendar({
 contentBox:"#event-calendar"
 }).render();

 A.one("#event-calendar. yui3-calendarnav-prevmonth").on('click', function (ev) {
 alert('prevMonth');
 });

 A.one("#event-calendar. yui3-calendarnav-nextmonth").on('click', function (ev) {
 alert('nextMonth');
 });
});

<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
<div class="yui3-skin-sam">
 <div id="event-calendar"></div>
</div>

请参阅 YUI Calendar 插件。Node 插件和YUI.one() 插件API文档以获得更详细的。 此外,请检查mdn的信息: 选择器 文章,以了解有关CSS选择器的更多信息。

原作者:
...