如何在右侧边栏中增加一个自定义的Tab标签页，并可以动态控制其出现的时机？

福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)

标签:
PDFUI,Tab,事件监听,侧边栏,元素隐藏,动态控制,右侧边栏,布尔值,控件,控件类

如何在右侧边栏中增加一个自定义的Tab标签页，并可以动态控制其出现的时机？

福昕知识库
2025-12-30


```javascript
//用户自定义函数
function testFun() {
    alert("Button was Clicked !");
}
//@controller 指令用于将一个控件类附加到组件上。控件类必须在模块中注册。下述代码则展示了：创建一个名为“custom”的模块，并在该模块中注册了两个控件类，分别为MyController1 和 MyController2，后续在自定义UI时，可以在组件中使用@controller指令，并在其控件类的处理函数中集成更多业务功能。
UIExtension.PDFUI.module('custom', [])
    .controller('MyController1', {
        handle: function () {
            alert('diyBtn was clicked !');
        }
    })
    .controller('MyController2', {
        handle: function () {
            alert('The document will be closed !');
            pdfui.close();
        }
    });

//封装一个函数，用于在PDFUI的内置右侧边栏中插入一个新的选项卡面板，并为该面板中的一些元素添加事件监听器。
async function insertDIYRightSidebarTab() {
    // 获取名为'sidebar-right-tabs'的组件对象，这是一个容器组件，包含多个选项卡面板。
    const sidebarRightTabs = await pdfui.getComponentByName('sidebar-right-tabs');
    // 向右侧边栏的选项卡容器组件中插入一个新的选项卡面板，sidebar-tab-panel标签内包含的代码，可以根据业务需要进行自定义
    sidebarRightTabs.insert(`
        <sidebar-tab-panel name="diy-customer-panel" tab-title="自定义右侧边栏选项卡">
            <div style="color:red">
                <span>这个区域可以自定义设计</span><hr />
                <ribbon-button icon-class="fv__icon-toolbar-hand" name='diyBtn' text="复用了手型工具图标" @controller="custom:MyController1"></ribbon-button>
                <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                <download-file-button></download-file-button>
            </div>
            <hr />
            <xbutton name="closeDoc"  text="关闭文档" @controller="custom:MyController2"></xbutton>
            <button onclick="testFun()">原生用法</button>
        </sidebar-tab-panel>
        `);
}

//展开或折叠右侧边栏选项卡面板，并展示或隐藏指定选项卡。
//其中，第一个参数为组件的名称，如Line 27中的“name”；第二个参数为布尔值，true代表展开指定的Tab标签选项卡，false代表隐藏
async function expandOrCollapseSidebarRightTab(componentName, expandedStatus) {
    //获取指定组件名称的选项卡组件对象
    const selectedSidebarRightTab = await pdfui.getComponentByName(componentName);
    //获取右侧边栏组件对象
    const sidebarRight = await pdfui.getComponentByName('sidebar-right');
    //获取名为'sidebar-right-tabs'的组件对象，这是一个容器组件，包含多个选项卡面板。
    const sidebarRightTabs = await pdfui.getComponentByName('sidebar-right-tabs');
    //const selectedSidebarRightTab = await pdfui.getComponentByName("diy-customer-panel");
    
    if (expandedStatus) {
        selectedSidebarRightTab.active();//将指定的选项卡面板设置为激活状态，待展示
        sidebarRight.show();//展开右侧边栏
    } else {
        // sidebarRightTabs.closeTabFun("diy-customer-panel");
        sidebarRightTabs.closeTabFun(componentName);//关闭指定的选项卡面板
        // sidebarRightTabs.setOpenTabs([]);//清空所有标签页，可按需使用
        sidebarRight.hide();//隐藏右侧边栏
    }
}
//pdfui实例初始化完成之后，调用封装好的自定义函数，在PDFUI的内置右侧边栏中插入一个新的选项卡面板
pdfui.addUIEventListener(UIExtension.UIEvents.initializationCompleted, async function () {
    insertDIYRightSidebarTab();
})

//调用封装好的自定义函数，动态控制自定义Tab面板的出现
expandOrCollapseSidebarRightTab("diy-customer-panel", true);
//expandOrCollapseSidebarRightTab("diy-customer-panel", false);
```

如果不希望上述自定义的标签页被关闭，可以在页面的`<style>`样式中加入以下样式代码，将“关闭标签页”元素隐藏：
```css
.fv__ui-sidebar-right-tabs .fv__ui-sidebar-right-navlist .fv__ui-sidebar-nav-close {
    display: none;
}
```