博客

jQWidgets jqxRibbon scrollPosition属性

  • Post category:jquery

jQWidgets是一套基于jQuery的UI组件库，其中包含了一组标准的控件，包括按钮、下拉框、列表框等常用的界面元素，同时还有一些更加复杂的控件，比如jqxRibbon。

jqxRibbon是一个基于HTML5和CSS3的控件，它提供了一种完整的、可定制的用户界面，可以用于创建具有流行的功能和样式的菜单和工具栏，实现了微软Office中常见控件的UI样式。其中的scrollPosition属性就是用来控制滚动位置的。

scrollPosition属性定义和用法：

scrollPosition属性用于设置或获取jqxRibbon控件中的滚动位置。默认情况下，jqxRibbon控件不允许滚动，只有当控件上的菜单和选项卡数量超出容器宽度时才会启用滚动条。scrollPosition属性可以取0到控件总宽度与容器宽度之差的值，这个值对应了滚动条的位置。

  1. 获取scrollPosition属性值：

可以使用以下代码获取jqxRibbon控件的当前滚动位置：

var position = $("#jqxRibbon").jqxRibbon("scrollPosition");

上述代码中，通过jQuery选择器获取jqxRibbon控件，并使用jqxRibbon方法获取其scrollPosition属性值。

  1. 设置scrollPosition属性值：

可以使用以下代码设置jqxRibbon控件的滚动位置：

$("#jqxRibbon").jqxRibbon({ scrollPosition: 100 });

上述代码中，使用jqxRibbon方法设置scrollPosition属性值为100，这将会把滚动条移动到控件的100像素位置处。

示例1：

示例代码如下，该例子将创建一个带有三个选项卡的jqxRibbon控件，并动态添加两个菜单项，其中一个菜单项超出了控件的宽度，会启用滚动条，并使用scrollPosition属性将滚动条移动到指定位置：

<script type="text/javascript">
    $(document).ready(function () {
        // 创建jqxRibbon控件
        $("#jqxRibbon").jqxRibbon({
            width: 600,
            height: 100,
            position: 'top',
            selectionMode: 'click',
            scrollPosition: 200,
            theme: 'energyblue'
        });

        // 添加选项卡
        $("#jqxRibbon").jqxRibbon('addAt', 'Home', 0);
        $("#jqxRibbon").jqxRibbon('addAt', 'Insert', 1);
        $("#jqxRibbon").jqxRibbon('addAt', 'Format', 2);

        // 添加菜单项
        $("#jqxRibbon").jqxRibbon('addAt', 'Clipboard', 0, 'Home');
        $("#jqxRibbon").jqxRibbon('addAt', 'Font', 1, 'Home');

        // 添加超出控件宽度的菜单项
        var menuItems = [
            { text: 'New', icon: '../../../images/new.png' },
            { text: 'Open', icon: '../../../images/open.png' },
            { text: 'Save', icon: '../../../images/save.png' },
            { text: 'Save As', icon: '../../../images/saveas.png' }
        ];
        $("#jqxRibbon").jqxRibbon('addAt', 'File', 0, 'Home', true, menuItems);
    });
</script>

<div id="jqxRibbon"></div>

示例2：

以下示例代码中，使用scrollPosition属性将滚动条移动到控件末尾处：

<script type="text/javascript">
    $(document).ready(function () {
        // 创建jqxRibbon控件
        var ribbon = $("#jqxRibbon").jqxRibbon({
            width: 600,
            height: 100,
            position: 'top',
            selectionMode: 'click',
            theme: 'energyblue'
        });

        // 添加选项卡
        ribbon.jqxRibbon('addAt', 'Home', 0);
        ribbon.jqxRibbon('addAt', 'Insert', 1);
        ribbon.jqxRibbon('addAt', 'Format', 2);

        // 设置scrollPosition属性为最大值
        var maxScrollPosition = ribbon.jqxRibbon('scrollMaxPosition');
        ribbon.jqxRibbon({ scrollPosition: maxScrollPosition });
    });
</script>

<div id="jqxRibbon"></div>

以上示例中，使用scrollMaxPosition方法获取控件滚动条的最大值，然后将scrollPosition属性设置为最大值，这样就能将滚动条移动到最底部位置了。

Tags: