博客

jQWidgets jqxRibbon selectAt()方法

  • Post category:jquery

介绍

jQWidgets是一组跨浏览器的jQuery插件，提供多种UI元素并且可以用于Web应用程序的开发。其中一个UI组件是jqxRibbon，它是一个类似于Microsoft Office的导航栏控件，用于创建选项卡和面板。jqxRibbon提供了selectAt()方法，以便将标签页设置为活动状态或选择。

用法

selectAt()方法是jqxRibbon控件特有的方法，用于将标签页设置为活动状态，并显示对应的内容。该方法的语法如下：

selectAt(index:int):void;

其中，参数index是需要设置为活动标签页的索引。索引从0开始，对应于jqxRibbon控件的标签

  • 列表的顺序。调用该函数后，将只显示标签页内容区域和页眉。

    示例1

    下面的示例演示如何使用selectAt()方法将jqxRibbon控件的标签页选项卡更改为活动状态：

    $("#jqxRibbon").jqxRibbon({
    width: '100%',
    height: 200,
    position: 'top',

    themes: 'ui-redmond',
    selectionMode: 'click',

    _initialized: function () {
        this.selectAt(2);
    },
    mode: 'default',

    items: [
        { text: 'Home' },
        { text: 'Edit' },
        { text: 'View' },
        { text: 'Insert' }
    ]
});

    在上述示例中，使用selectAt(2)将标签页“View”设置为活动状态。

    示例2

    下面的示例演示如何在应用程序中编程控制jxqRibbon控件的活动标签页：

    <button onclick="SelectView()">Select View Tab</button>
<button onclick="SelectInsert()">Select Insert Tab</button>

function SelectView()
{
    $("#jqxRibbon").jqxRibbon('selectAt', 2);
}

function SelectInsert()
{
    $("#jqxRibbon").jqxRibbon('selectAt', 3);
}

$("#jqxRibbon").jqxRibbon({
    width: '100%',
    height: 200,
    position: 'top',

    themes: 'ui-redmond',
    selectionMode: 'click',

    mode: 'default',

    items: [
        { text: 'Home' },
        { text: 'Edit' },
        { text: 'View' },
        { text: 'Insert' }
    ]
});

    在上述示例中，创建了两个按钮来选中不同的标签页。调用selectAt()方法并传递标签页的索引来更改活动标签页。

    总结

    此处介绍了jQWidgets jqxRibbon selectAt()方法的用法，其中包括参数、示例说明及应用场景。该方法可以灵活控制jxqRibbon控件的标签页选项卡，并实现动态展示。

    • Tags: