您可以参考开发者手册中第96页`UI fragments`章节的内容,Fragment 是一段 UI 代码段,用来在 UI template 中插入、删除和修改组件。其适用于在基于内置模板的基础上进行少量的 UI 自定义。代码实现时,您有两种方式可以参考:
(1)您可以仿照开发者手册中第97页中的代码示例,新建一个自定义的appearance变量,在其default fragments配置中完成自定义UI的编辑,然后在初始化实例对象pdfui时,赋值给appearance参数;
(2)您也可以参考SDK中内置的示例代码`examples/UIExtension/fragment_usage/`,直接在初始化实例对象pdfui的fragments参数中进行编辑,在template中写入自定义按钮的图标、文字等,config中写入自定义按钮的触发事件;
无论您采用上述两种方式中的哪一种,都请仔细阅读`Fragment 配置参数描述`章节的内容。
例如,想要在默认工具栏中的“属性”按钮后边插入用户自定义的一组或指定个数的组件,可以参考以下代码片段:
<script src=
"../../../lib/preload-jr-worker.js"
></script>
<script>
var
readyWorker = preloadJrWorker({
workerPath:
'../../../lib/'
,
enginePath:
'../lib/jr-engine/gsdk'
,
fontPath:
'../external/brotli'
,
licenseSN: licenseSN,
licenseKey: licenseKey
})
</script>
<script src=
"../../../lib/UIExtension.full.js"
></script>
<script>
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'
});
</script>