博客

jQWidgets jqxRibbon showAt()方法

showAt()方法是 jQWidgets jqxRibbon组件提供的一个显示指定选项卡的方法。该方法会将tab标签页的内容展示出来，如果tab标签页被隐藏了，调用该方法会将其显示出来。该方法可用于在特定情况下，强制将某个标签页显示在当前可见区域内。

使用语法

$('#ribbonContainer').jqxRibbon('showAt', index, showContent);

参数说明

以下是参数列表：

• index – 必需，表示选项卡面板的索引值
• showContent – 可选，当设置为true时，选项卡标签和选项卡面板都将显示出来；当设置为false时，只显示选项卡标签

示例说明

下面的示例提供了两种不同的使用场景：

1. 将选项卡面板展示在顶部
2. 在鼠标悬浮在选项卡标签页上时，展示相应的选项卡面板

示例1

$('#ribbonContainer').jqxRibbon({
    width: '100%',
    height: 150,
    theme: 'office',
    selectedItem: 2,
    animationType: 'none',
    initContent: function () {
        // 添加选项卡标签页
        var newTab = $('<div>标签页1</div>');
        var newTab1 = $('<div>标签页2</div>');
        $('#ribbonContainer').jqxRibbon('addFirst', newTab);
        $('#ribbonContainer').jqxRibbon('addAt', 1, newTab1);

        // 添加选项卡面板
        var newPanel = $('<div>选项卡面板1</div>');
        var newPanel1 = $('<div>选项卡面板2</div>');
        $('#ribbonContainer').jqxRibbon('setContentAt', 0, newPanel);
        $('#ribbonContainer').jqxRibbon('setContentAt', 1, newPanel1);

        // 点击按钮调用showAt方法，将选项卡面板1展示在顶部
        $('#showTabPanel1').click(function () {
            $('#ribbonContainer').jqxRibbon('showAt', 0, true);
        });

        // 点击按钮调用showAt方法，将选项卡面板2展示在顶部
        $('#showTabPanel2').click(function () {
            $('#ribbonContainer').jqxRibbon('showAt', 1, true);
        });
    }
});

上述代码创建了一个包含两个选项卡的jqxRibbon组件。 当用户单击按钮时，可以展示其中一个选项卡面板。

示例2

$('#ribbonContainer').jqxRibbon({
    width: '100%',
    height: 150,
    theme: 'office',
    selectedItem: 2,
    animationType: 'none',
    initContent: function () {
        // 添加选项卡标签页
        var newTab = $('<div><span>标签页1</span></div>');
        var newTab1 = $('<div><span>标签页2</span></div>');
        $('#ribbonContainer').jqxRibbon('addFirst', newTab);
        $('#ribbonContainer').jqxRibbon('addAt', 1, newTab1);

        // 添加选项卡面板
        var newPanel = $('<div>选项卡面板1</div>');
        var newPanel1 = $('<div>选项卡面板2</div>');
        $('#ribbonContainer').jqxRibbon('setContentAt', 0, newPanel);
        $('#ribbonContainer').jqxRibbon('setContentAt', 1, newPanel1);

        // 当鼠标悬浮在选项卡标签页上时，展示相应的选项卡面板
        $('.jqx-ribbon-item').on('mouseenter', function () {
            var index = $(this).index();
            $('#ribbonContainer').jqxRibbon('showAt', index, true);
        });

        // 当鼠标从选项卡标签页中移出时，隐藏当前选项卡面板
        $('.jqx-ribbon-item').on('mouseleave', function () {
            $('#ribbonContainer').jqxRibbon('hideAt', true);
        });
    }
});

上述代码中的示例展示了一个鼠标悬浮在选项卡标签页上时，展示相应的选项卡面板。同时，当鼠标从选项卡标签页中移出时，隐藏当前选项卡面板。