银川做网站服务,制作单位网站,推荐成都网站建设,网页ui设计的排版一、前言
本来项目使用的是OCX方式做签字的#xff0c;因为项目需要转到国产化#xff0c;不在支持OCX方式#xff0c;需要使用前端进行签字操作 注#xff1a;有啥问题看看文档#xff0c;或者换着思路来#xff0c;本文仅供参考#xff01;
二、使用组件
获取jSign…一、前言
本来项目使用的是OCX方式做签字的因为项目需要转到国产化不在支持OCX方式需要使用前端进行签字操作 注有啥问题看看文档或者换着思路来本文仅供参考
二、使用组件
获取jSignature 方法一jSignature官网 方法二BootCDN 这里面的各种组件库挺全面
三、相关代码
!DOCTYPE html
html langzh
headmeta http-equivcontent-type contenttext/html; charsetutf-8/meta http-equivX-UA-Compatible contentIEedge,chrome1meta http-equivcontent-type contentno-cache/meta nameviewportcontentwidthdevice-width,initial-scale1.0,maximum-scale1.0,minimum-scale1.0,user-scalableno/meta nameapple-mobile-web-app-capable contentyeslink href../libs/layui/css/layui.css relstylesheet
/head
style.layui-layout-admin .layui-header {background-color: #fff;}.layui-layout-admin .layui-body {position: inherit;}.layui-container {margin-top: 64px;}.layui-container img {width: 800px;}
/style
body
div classlayui-layout layui-layout-admindiv classlayui-headerdiv classlayui-btn-container stylemargin-top: 12px;text-align: center;button typebutton classlayui-btn layui-btn-lg lay-activesign签字/button/div/divdiv classlayui-bodydiv classlayui-containerdiv aligncenterimg src../images/evaluate_bg.png/div/div/div
/divdiv classlayui-row idsignDiv styledisplay: none;div idsignatureparentdiv idsignature styleborder: 2px dotted lightgrey;/div/divdiv classlayui-btn-container styletext-align: right;margin-top: 15px;button typebutton classlayui-btn layui-bg-orange layui-btn-lg onclicktoReset()重写/buttonbutton typebutton classlayui-btn layui-bg-blue layui-btn-lg onclickgetData()提交/buttonbutton typebutton classlayui-btn layui-btn-danger layui-btn-lg onclicktoDestroy();关闭/button/div
/div
script src../jquery/jquery-1.8.3.js/script
script src../libs/jSignature/jSignature.js/script
script src../libs/layui/layui.js/script
script typetext/javascriptvar signature;layui.use(function () {var util layui.util, $ layui.$;// 触发事件util.on(lay-active, {sign: function () {// 在此处输入 layer 的任意代码layer.open({type: 1, // page 层类型area: [800px, 430px],title: h3请签名/h3,shade: 0.6, // 遮罩透明度// shadeClose: true, // 点击遮罩区域关闭弹层closeBtn: 0,anim: 6, // 0-6 的动画形式-1 不开启content: $(#signDiv),success: function () {signature $(#signature).jSignature({height: 300px,width: 100%});//初始化控件}});}});});function toReset() {signature.jSignature(reset);}function getData() {var data signature.jSignature(getData, image);var isModified signature.jSignature(isModified);if (!isModified) {layer.msg(请先完成签字在提交);return false;}// 可以添加保存签字图片的逻辑如生成下载链接或上传到服务器}function toDestroy() {signature.jSignature(destroy);layer.closeAll();}
/script
/body
/html
四、效果展示
