jQWidgets jqxScrollView changePage()方法

以下是关于 jQWidgets jqxScrollView 组件中 changePage() 方法的详细攻略。

jQWidgets jqxScrollView changePage() 方法

jQWidgets jqxScrollView 组件的 changePage() 方法用于滚动视图滚动到指定的页面。

语法

$('#scrollView').jqxScrollView('changePage', index);

参数

  • index:Number 类型,表示要滚动到的页面的索引。索引从 0 开始。

示例

以下两个示例演示如何使用 changePage() 方法。

示例 1

$('#page1Button').click(function () {
    $('#scrollView').jqxScrollView('changePage', 0);
});

$('#page2Button').click(function () {
    $('#scrollView').jqxScrollView('changePage', 1);
});

在示例 1 中,我们创建了两个按钮,分别用于滚动视图到第一页和第二页。当用户单击按钮时,changePage() 方法将被用,将滚动视图滚动到指定的页面。

示例 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQxScrollView Change Page Method</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxscrollview.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#scrollView').jqxScrollView({
                width: 300,
                height: 200,
                showButtons: true,
                slideShow: true,
                theme: 'energyblue'
            });

            $('#page1Button').click(function () {
                $('#scrollView').jqxScrollView('changePage', 0);
            });

            $('#page2Button').click(function () {
                $('#scrollView').jqxScrollView('changePage', 1);
            });
        });
    </script>
</head>
<body>
    <div id="scrollView">
        <div><img src="https://jqwidgets.com/public/jqwidgets/styles/images/slider1.jpg" /></div>
        <div><img src="https://jqwidgets.com/public/jqwidgets/styles/images/slider2.jpg" /></div>
        <div><img src="https://jqwidgets.com/public/jqwidgets/styles/images/slider3.jpg" /></div>
        <div><img src="https://jqwidgets.com/public/jqwidgets/styles/images/slider4.jpg" /></div>
    </div>
    <button id="page1Button">Page 1</button>
    <button id="page2Button">Page 2</button>
</body>
</html>

在示例 2 中,我们创建了一个滚动视图和两个按钮,分别用于滚动视图到第一页和第二页。当用户单击按钮时,changePage() 方法将被调用,将滚动视图滚动到指定的页面。

注意事项

  • changePage() 方法用于将滚动视图滚动到指定的页面。
  • changePage() 方法通过 jqxScrollView 方法调用。
  • changePage() 方法可以与 jqxScrollView 方法一起使用。

总之,changePage() 方法用于将滚动视图滚动到指定的页面。以上两个示例演示了如使用 changePage() 方法。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQWidgets jqxScrollView changePage()方法 - Python技术站

(0)
上一篇 2023年5月12日
下一篇 2023年5月12日

相关文章

  • jQWidgets jqxComboBox updateAt() 方法

    以下是关于“jQWidgets jqxComboBox updateAt() 方法”的完整攻略,包含两个示例说明: 简介 jqxComboBox 控件提供了 updateAt() 方法,该方法用于更新下拉列表中指定索引位置的选项的文本和值。通过使用 updateAt() 方法,可以在代码中动态更新下拉列表中指定索引位置的项。 详细攻略 以下是 jqxComb…

    jquery 2023年5月11日
    00
  • jQWidgets jqxDataTable render()方法

    以下是关于“jQWidgets jqxDataTable render()方法”的完整攻略,包含两个示例说明: 简介 jqxDataTable 控件的 render() 方法用于重新渲染控件。该方法没有参数。 整攻 以下是 jqxDataTable 控件 render()的完整攻略: 调用 render() 方法 在 jqxDataTable 控件中,可以使…

    jquery 2023年5月11日
    00
  • jquery中获取id值方法小结

    当我们需要在 jQuery 中获取页面元素的 id 值时,可以使用 jQuery 的选择器来实现。jQuery 选择器的 Syntax 与 CSS 选择器一样,并且支持锚点、类、伪类等选择器。 获取 id 值的方法 在 jQuery 中使用 # 符号作为 id 选择器来获取页面元素的 id 值。 $("#elementId") 此处 el…

    jquery 2023年5月28日
    00
  • jQuery Mobile Popup beforeposition事件

    “jQuery Mobile Popup beforeposition事件”是指在弹出窗口显示之前触发的事件。在这个事件中,我们可以对弹窗进行一些自定义操作,例如修改弹窗的内容、位置、大小等。以下是详细的攻略。 1. 理解beforeposition事件 beforeposition事件是jQuery Mobile中弹窗控件(popup widget)的一个…

    jquery 2023年5月12日
    00
  • jQuery UI sortable widget延迟选项

    以下是关于 jQuery UI Sortable Widget delay 选项的详细攻略: jQuery UI Sortable Widget delay 选项 delay 选项用于设置拖拽前的延时间,以毫秒为单位。默认值为 0,表示没有延迟。 语法 $( ".selector" ).sortable({ delay: 500 // 延…

    jquery 2023年5月11日
    00
  • jQuery DrawSVG 插件

    jQuery DrawSVG 插件是一款基于 jQuery 的可视化插件,能够帮助开发人员在网页上绘制 SVG 动画。本文将为您详细介绍如何使用该插件进行 SVG 动画的制作,过程中将提供两个示例说明。 第一步:引入插件 使用 jQuery DrawSVG 插件需要在网页中引入 jQuery 库和插件的 JS 文件,示例代码如下: <!– 引入 jQ…

    jquery 2023年5月12日
    00
  • jQWidgets jqxTreeGrid showColumn()方法

    以下是关于 jQWidgets jqxTreeGrid 组件中 showColumn() 方法的详细攻略。 jQWidgets jqxTreeGrid showColumn() 方法 jQWidgets jqxTreeGrid 的 showColumn() 方法用于显示指定列。可以使用该方法隐藏的列。 语法 $(‘#treegrid’).jqxTreeGri…

    jquery 2023年5月12日
    00
  • jQuery标签替换函数replaceWith()的使用例子

    jQuery标签替换函数replaceWith()是一个常用的jQuery DOM操作函数,用于替换选中元素或其子元素的HTML内容。下面我来给大家详细讲解一下该函数的使用攻略,以及两个使用例子。 replaceWith()函数的语法 $(selector).replaceWith(content) 参数说明: selector代表需要被替换的被选元素,可以…

    jquery 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部