博客

jQWidgets是一个基于jQuery的UI组件库，其中包含了很多实用的UI组件，例如日历组件jqxScheduler。jqxScheduler提供了scrollLeft方法，可以用于改变水平滚动条的位置。下面是对scrollLeft方法的详细讲解。

方法语法

scrollLeft(scroll: Number)

参数说明

方法描述

改变水平滚动条的位置。

示例一

以下是一个示例，可以在水平滚动条滚动时记录下当前的位置并输出到控制台：

$('#scheduler').jqxScheduler({
    ready: function() {
        $('#scheduler_scrollbarh').on('scroll', function() {
            console.log('scrollLeft: ' + $('#scheduler_scrollbarh').scrollLeft());
        });
    }
});

在这个示例中，我们首先创建了一个jqxScheduler实例，然后在ready事件中，将水平滚动条的滚动事件绑定了一个回调函数。在回调函数中，使用了$('#scheduler_scrollbarh').scrollLeft()方法获取了当前滚动条的位置，并将其打印输出到了控制台。

示例二

以下示例可在水平滚动条滚动时，每当滚动一次，则将组件内每个日程的开始时间增加1个hour：

$('#scheduler').jqxScheduler({
    ready: function() {
        $('#scheduler_scrollbarh').on('scroll', function() {
            var scrollLeft = $('#scheduler_scrollbarh').scrollLeft();
            var scheduler = $('#scheduler').jqxScheduler('getInstance');
            var appointments = scheduler.getAppointments();
            scheduler.beginUpdate();
            $.each(appointments, function(index, appointment) {
                scheduler.setAppointmentProperty(appointment.id, 'from', new Date(appointment.from.getTime() + scrollLeft * 60 * 60 * 1000));
            });
            scheduler.endUpdate();
        });
    }
});

在这个示例中，我们首先创建了一个jqxScheduler实例，然后在ready事件中，将水平滚动条的滚动事件绑定了一个回调函数。在回调函数中，我们首先获取了滚动条的位置，然后使用$('#scheduler').jqxScheduler('getInstance');获取了组件的实例对象。

接着，使用scheduler.getAppointments()方法获取了组件内所有日程的信息，然后使用scheduler.setAppointmentProperty()方法将每个日程的开始时间增加了一个小时。

最后，需要使用scheduler.beginUpdate()和scheduler.endUpdate()方法来防止重绘UI时的闪烁问题。

这就是使用jqxScheduler中scrollLeft方法的示例。通过这个方法，我们可以很方便地改变水平滚动条的位置，实现对大型日程表的滚动和展示。