H5-自定义界面
# 自定义界面-H5
### 步骤
1. 配置参数，隐藏好签默认的 UI。
2. 绘制自己的UI、按钮
3. 给自己的按钮添加点击事件，调用相对应的好签API
### 目前H5端可以自定义UI的模块
- mobile：签字界面底部toolbar，隐藏参数`renderBottomTools`
- mobile：圈批控制UI，隐藏参数`isCustomStroke`
- pc：签字界面顶部toolbar，左侧签名/文本模板，右侧缩略图/验签，隐藏参数`renderViews`
- pc：圈批控制UI，隐藏参数`isCustomStroke`
### 例：移动端自定义底部toolbar
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
<title>好签</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./ws.sdko.m.css" rel="stylesheet" />
<script src="/ws.sdko.m.js"></script>
<script>
$(document).ready(() => {
const ctx = new WSContext('#ctx', {
token: 'xxx',
fileIds: 'xxx',
userId: 'xxx',
userName: 'xxx',
baseURL: 'xxx',
// 修改上面的参数值
renderBottomTools: false // 设置此参数为 false，好签默认底部toolbar将不会显示。
})
// 给自定义的UI、按钮添加点击事件，调用相对应的 JSAPI
$('#toolbar-sign').click(() => {
ctx.insertSignTemp() // 显示签名模板弹窗
})
$('#toolbar-text').click(() => {
ctx.insertIText() // 显示插入文本模态窗
})
$('#toolbar-img').click(() => {
ctx.insertImage() // 插入图片
})
$('#toolbar-save').click(() => {
ctx.save() // 文件保存
})
})
</script>
</head>
<body>
<!-- 好签的签字界面 -->
<div id="ctx" style="width: 100%; height: calc(100% - 50px)"></div>
<!-- 自定义 toolbar UI -->
<div id="toolbar" style="height: 50px">
<button id="toolbar-sign">签名</button>
<button id="toolbar-text">文本</button>
<button id="toolbar-img">图片</button>
<button id="toolbar-save">保存</button>
</div>
<!-- end -->
</body>
<style>
html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
#toolbar { display: flex; justify-content: space-around; align-items: center; background: black; }
#toolbar > button { border: 0; background: transparent; color: #ffffff; font-size: 18px; }
</style>
</html>
```