跳到内容
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 福昕首页
  • 开发中心
  • SDK文档资料
申请试用
  • 企业自动化
    • Compressor
  • 福昕CloudAPI
  • 福昕PDF SDK 软件开发工具包
    • 福昕PDF SDK(ActiveX)
    • 福昕PDF SDK(桌面/服务器)
    • 福昕PDF SDK(Plug-in)
    • 福昕 PDF SDK(安卓)
    • 福昕PDF SDK(iOS)
    • 福昕PDF SDK(Web)
  • 福昕管理控制台
    • 公有云
    • 私有云
    • 通用情况
  • 福昕阅读器
    • RMS插件
  • 福昕高级编辑器
    • AI助手
    • Mac版本
      • 常规问题
    • windows版本
      • ECM集成
      • 互联PDF
      • 企业管理指南
      • 保护
      • 内容编辑
      • 创建PDF
      • 压缩
      • 图章
      • 安装与卸载
      • 常见问题
      • 打印
      • 注释/评论
      • 福昕插件
      • 翻译助手
      • 翻译助手教程
      • 试用与激活
      • 转换
      • 页面管理
    • 教育用户
      • 论文查重
      • 论文畅
    • 网页版
      • 电子签章
    • 订阅
    • 资源
  • 福昕高级编辑器Linux版本
  • 福船图纸管理系统
  • 福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)
  • 标签:

如何监听侧边栏中不同面板的扩展或收缩事件?

  • 福昕知识库
  • 2024-11-08

1. 获取相关组件的名称

您可以在浏览器中右键点击该组件,选择 “审查”;然后在对应的 <a>标签中找到 component-name 属性的值。对于容器组件,比如target: 'hometab-group-hand',您可以在浏览器中右键点击其中一个子组件,选择 “审查”;然后在相关的<div>标签中找到 component-name 属性的值。

侧边栏相关的组件名称汇总如下:

组件名称描述
sidebar整体侧边栏的外层容器
sidebar-bookmark-v2书签面板
sidebar-thumbnail-panel页面缩略图面板
comment-list-sidebar-panel注释列表面板
sidebar-layers图层面板
sidebar-attachmentPDF附件面板
sidebar-field表单域面板

2. 获取相关组件对象,并在其回调函数中进行事件监听

  • 如果只想要监听整体侧边栏的扩展或收缩事件,只需拿到sidebar组件对象,通过其提供的expand 和collapse事件回调即可满足业务功能的插入。示例代码如下:
pdfui.getComponentByName("sidebar").then(com => {
    com.on('expand', () => {
        console.log("sidebar激活,侧边栏扩展。")
    })
    com.on('collapse', () => {
        console.log("sidebar停用,侧边栏收缩。")
    })
});
  • 如果需要对侧边栏中的具体某个或某几个面板的扩展/收缩事件进行监听,则需拿到对应的组件对象,然后再通过其提供的expand 和collapse事件回调即可满足业务功能的插入。示例代码如下:
pdfui.getComponentByName("sidebar-bookmark-v2").then(com => {
    com.on('active', () => {
        console.log("书签列表panel激活,侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("书签列表panel停用,侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-thumbnail-panel").then(com => {
    com.on('active', () => {
        console.log("页面缩略图panel激活,侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("页面缩略图panel停用,侧边栏收缩。")
    })
});
pdfui.getComponentByName("comment-list-sidebar-panel").then(com => {
    com.on('active', () => {
        console.log("注释列表panel激活,侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("注释列表panel停用,侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-layers").then(com => {
    com.on('active', () => {
        console.log("图层panel激活,侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("图层panel停用,侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-attachment").then(com => {
    com.on('active', () => {
        console.log("附件panel激活,侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("附件panel停用,侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-field").then(com => {
    com.on('active', () => {
        console.log("表单列表panel激活,侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("表单列表panel停用,侧边栏收缩。")
    })
});
pdfui.getComponentByName('diy-sidebar-panel').then(com => {
    com.on('active', () => {
            console.log("自定义侧边栏panel激活,侧边栏扩展。")
        })
        com.on('deactive', () => {
            console.log("自定义侧边栏panel停用,侧边栏收缩。")
        })
})
 更多内容可查阅开发者手册中:“组件”-“基础组件”-“Sidebar组件”章节的内容。

相关内容

PDF打印时,如何在每张纸上放置多页?

扫描件如何转为可编辑的Word?

如何批量OCR文档?

PDF文档中如何添加下划线?

如何在PDF中添加超链接?

如何使用PDF把彩色图片转为灰度图?

安装报“无法安装Foxit PDF Editor Printer Driver 内核模式打印驱动程序……”

outlook邮件使用福昕转换的pdf打开提示为文件包

如何关闭受保护视图

使用OCR文本识别提示下载对应语言识别插件

推荐内容

PDF打印时,如何在每张纸上放置多页?

扫描件如何转为可编辑的Word?

如何批量OCR文档?

PDF文档中如何添加下划线?

如何在PDF中添加超链接?

如何使用PDF把彩色图片转为灰度图?

安装报“无法安装Foxit PDF Editor Printer Driver 内核模式打印驱动程序……”

outlook邮件使用福昕转换的pdf打开提示为文件包

如何关闭受保护视图

使用OCR文本识别提示下载对应语言识别插件

产品
  • 应用行业
  • 白皮书
开发支持
  • 开发中心
  • SDK文档资料

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

©2025 福建福昕软件开发股份有限公司 版权所有

隐私策略