姐妹直播河南網(wǎng)站建設優(yōu)化技術(shù)
一、前言
本來項目使用的是OCX方式做簽字的,因為項目需要轉(zhuǎn)到國產(chǎn)化,不在支持OCX方式,需要使用前端進行簽字操作
注:有啥問題看看文檔,或者換著思路來,本文僅供參考!
二、使用組件
獲取jSignature
方法一:jSignature官網(wǎng)
方法二:BootCDN 這里面的各種組件庫挺全面
三、相關代碼
<!DOCTYPE html>
<html lang="zh">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="content-type" content="no-cache"/><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/><meta name="apple-mobile-web-app-capable" content="yes"><link href="../libs/layui/css/layui.css" rel="stylesheet">
</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 class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-btn-container" style="margin-top: 12px;text-align: center;"><button type="button" class="layui-btn layui-btn-lg" lay-active="sign">簽字</button></div></div><div class="layui-body"><div class="layui-container"><div align="center"><img src="../images/evaluate_bg.png"></div></div></div>
</div><div class="layui-row" id="signDiv" style="display: none;"><div id="signatureparent"><div id="signature" style="border: 2px dotted lightgrey;"></div></div><div class="layui-btn-container" style="text-align: right;margin-top: 15px;"><button type="button" class="layui-btn layui-bg-orange layui-btn-lg" onclick="toReset()">重寫</button><button type="button" class="layui-btn layui-bg-blue layui-btn-lg" onclick="getData()">提交</button><button type="button" class="layui-btn layui-btn-danger layui-btn-lg" onclick="toDestroy();">關閉</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 type="text/javascript">var signature;layui.use(function () {var util = layui.util, $ = layui.$;// 觸發(fā)事件util.on('lay-active', {'sign': function () {// 在此處輸入 layer 的任意代碼layer.open({type: 1, // page 層類型area: ['800px', '430px'],title: '<h3>請簽名:</h3>',shade: 0.6, // 遮罩透明度// shadeClose: true, // 點擊遮罩區(qū)域,關閉彈層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>
四、效果展示