jQWidgets jqxScrollView 完整参考

jQWidgets jqxScrollView 是一个用于创建滚动视图的JavaScript控件。它可以帮助你快速创建复杂的滚动视图，其中包含多种不同的子控件和布局选项。

该控件提供丰富的API和事件选项，使程序员能够轻松地自定义控件的外观和行为。下面是一些基本的使用示例和参考信息，以帮助你开始使用该控件。

使用示例

基本用法

以下是创建一个基本的水平滚动视图的示例代码：

$("#scrollview").jqxScrollView({
    width: "500px",
    height: "300px",
    showButtons: true,
    buttonsPosition: "inside",
    scrollMode: "horizontal",
    easingDuration: 500,
    moveThreshold: 10,
    slideShow: true,
    slideDuration: 3000
});

该代码在ID为“scrollview”的HTML元素上创建了一个水平滚动视图，包括按钮、内部按钮位置、滚动模式、移动阈值、幻灯片等选项。

自定义选项

以下示例演示如何使用一些自定义选项来创建一个垂直滚动视图：

$("#scrollview").jqxScrollView({
    width: "500px",
    height: "300px",
    buttonsOffset: [10, 10],
    showArrows: true,
    arrowsPosition: "outside",
    scrollMode: "vertical",
    easing: "easeInOutQuint",
    easingDuration: 1500,
    bounceEnabled: false,
    moveThreshold: 20,
    slideShow: false,
    slideDuration: 5000
});

该代码在ID为“scrollview”的HTML元素上创建了一个垂直滚动视图，包括按钮偏移、箭头位置设定、滚动模式、动画选项等自定义选项。

参考信息

以下是该控件的主要API和事件。

API

jqxScrollView(option)

创建滚动视图

$("#scrollview").jqxScrollView({
    width: "500px",
    height: "300px",
    showButtons: true
});

destroy()

摧毁滚动视图

$("#scrollview").jqxScrollView('destroy');

disable()

禁用滚动视图

$("#scrollview").jqxScrollView('disable');

enable()

启用滚动视图

$("#scrollview").jqxScrollView('enable');

getContent()

获取滚动视图内容

var content = $("#scrollview").jqxScrollView('getContent');

scrollTo(element)

滚动到指定元素

$("#scrollview").jqxScrollView('scrollTo', $('#myElement'));

scrollLeft(position)

向左滚动

$("#scrollview").jqxScrollView('scrollLeft', 100);

scrollRight(position)

向右滚动

$("#scrollview").jqxScrollView('scrollRight', 100);

scrollTop(position)

向上滚动

$("#scrollview").jqxScrollView('scrollTop', 50);

scrollBottom(position)

向下滚动

$("#scrollview").jqxScrollView('scrollBottom', 50);

事件

scrollStart

开始滚动时触发

$("#scrollview").on('scrollStart', function (event) {
    console.log('scrolling started.');
});

scrollEnd

滚动结束时触发

$("#scrollview").on('scrollEnd', function (event) {
    console.log('scrolling ended.');
});

swipeLeft

向左滑动时触发

$("#scrollview").on('swipeLeft', function (event) {
    console.log('swiped left.');
});

swipeRight

向右滑动时触发

$("#scrollview").on('swipeRight', function (event) {
    console.log('swiped right.');
});

swipeUp

向上滑动时触发

$("#scrollview").on('swipeUp', function (event) {
    console.log('swiped up.');
});

swipeDown

向下滑动时触发

$("#scrollview").on('swipeDown', function (event) {
    console.log('swiped down.');
});

样式

以下是该控件支持的CSS类列表：

• jqx-scrollview
• jqx-scrollview-wrap
• jqx-scrollview-buttons
• jqx-scrollview-left-button
• jqx-scrollview-right-button
• jqx-scrollview-up-button
• jqx-scrollview-down-button
• jqx-scrollview-left-arrow
• jqx-scrollview-right-arrow
• jqx-scrollview-up-arrow
• jqx-scrollview-down-arrow