跳到内容
  • 福昕首页
  • 开发中心
  • 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
      • 压缩
      • 图章
      • 安装与卸载
      • 常见问题
      • 打印
      • 注释/评论
      • 福昕插件
      • 翻译助手
      • 翻译助手教程
      • 试用与激活
      • 转换
      • 页面管理
    • 教育用户
      • 论文查重
      • 论文畅
      • 操作指南
    • 网页版
      • Foxit eSign
      • 电子签章
    • 订阅
    • 资源
  • 福昕高级编辑器Linux版本
  • 福船图纸管理系统
  • 福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)
  • 标签:
  • Fragment,template,自定义UI

如何在菜单栏指定位置插入自定义的功能菜单项?

  • 福昕知识库
  • 2025-01-02

您可以参考开发者手册中第96页UI fragments章节的内容。

Fragment 是一段 UI 代码段,用来在 UI template 中插入,删除,修改组件。其适用于在基于内置模板的基础上进行少量的 UI 自定义。代码实现时,您有两种方式可以参考:
1. 您可以参考开发者手册中第97页中的代码示例,新建一个自定义的appearance变量。在其default fragments配置中完成自定义UI的编辑,然后在初始化实例对象pdfui时,赋值给appearance参数;
2. 您也可以参考SDK中内置的示例代码examples/UIExtension/fragment_usage/,直接在初始化实例对象pdfui的fragments参数中进行编辑。
**提示:请仔细阅读Fragment配置参数描述章节的内容。

若您想要在默认工具栏中的“属性”按钮后边插入用户自定义的一组或指定个数的组件,可以参考如下代码片段:

var PDFUI = UIExtension.PDFUI;
var FRAGMENT_ACTION = UIExtension.UIConsts.FRAGMENT_ACTION;

var pdfui = new PDFUI({
    viewerOptions: {
        libPath: '../../../lib',
        jr: {
            readyWorker: readyWorker
        }
    },
    renderTo: '#pdf-ui',
    appearance: UIExtension.appearances.adaptive,
    fragments: [{
        target: 'file-property',
        template: `<group name="home-tab-group-custom">
              <dropdown icon-class="fv__icon-toolbar-stamp">
                <xbutton  name="zhangsan1">张三1</xbutton>,
              </dropdown>
              <ribbon-button icon-class="fv__icon-toolbar-hand" name="cus-button1" text="button1"></ribbon-button>
            </group>`,
        action: FRAGMENT_ACTION.AFTER,
        config: [{
            target: 'cus-button1',
            callback: function() {
                alert('button1 clicked!');
            }
        }, {
            target: 'zhangsan1',
            callback: function() {
                alert('zhangsan1');
            }
        }]
    }],
    addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?
        '../../../lib/uix-addons/allInOne.mobile.js' : '../../../lib/uix-addons/allInOne.js'
});

相关内容

RDK Android 如何设置单页上下滑动翻页?

PDF转Word时,如何仅处理指定页面?

PDF和OFD如何批量互转?

Bitmap 类如何与其他的图像类互转?

打印管理PrintManager怎么判断文档打印是否完成?

软件如何打开嵌入在office文档中Adobe PDF图标

福昕高级PDF编辑器专业版如何在文档中嵌入一个3D模型

福昕高级PDF编辑器专业版如何实现对图片和文档内容添加马赛克

福昕高级PDF编辑器如何显示注释内容图标

福昕高级PDF编辑器如何添加和调整快速访问工具栏功能

推荐内容

RDK Android 如何设置单页上下滑动翻页?

PDF转Word时,如何仅处理指定页面?

PDF和OFD如何批量互转?

Bitmap 类如何与其他的图像类互转?

打印管理PrintManager怎么判断文档打印是否完成?

软件如何打开嵌入在office文档中Adobe PDF图标

福昕高级PDF编辑器专业版如何在文档中嵌入一个3D模型

福昕高级PDF编辑器专业版如何实现对图片和文档内容添加马赛克

福昕高级PDF编辑器如何显示注释内容图标

福昕高级PDF编辑器如何添加和调整快速访问工具栏功能

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

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

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

隐私策略