jSignature是一款jQuery写字板插件。jSignature基于HTML5 canvas，可以制作跨平台，支持移动手机的写字板效果。

使用方法

在页面中引入下面的文件。

<!-- required JS files -->
<script src="js/jquery.min.js"></script>
<script src="jSignature.js"></script>

<!-- optional plugins -->
<script src="plugins/jSignature.CompressorBase30.js"></script>
<script src="plugins/jSignature.CompressorSVG.js"></script>
<script src="plugins/jSignature.UndoButton.js"></script>
<script src="plugins/signhere/jSignature.SignHere.js"></script>

HTML结构

使用下面的HTML结构来创建一个写字板。

<div id="signatureparent">
<div id="signature"></div>
</div>

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jQuery写字板插件。

$("#signatureparent").jSignature({

// line color
color:"#f00",

// line width
lineWidth:5,

// width/height of signature pad
width:300,
height:200,

// background color
background-color:"#0f0"

});

方法API

// Resets the signature pad
$("#signatureContainer").jSignature('reset');

// Destroy the signature pad
$("#signatureContainer").jSignature('destroy');

// Returns a data object appropriate for the data format
$("#signatureContainer").jSignature('getData', FORMATNAME);

// Sets data
$("#signatureContainer").jSignature('setData', DATAOBJECT, FORMATNAME);

// Disables the signature pad
$("#signatureContainer").jSignature('disable');

// Re-enable the signature pad
$("#signatureContainer").jSignature('enable');

// Returns a boolean true if the jSignature was modified
$("#signatureContainer").jSignature('isModified');

// Returns the configurable settings
$("#signatureContainer").jSignature('getSettings');

// Updates certain settings
$("#signatureContainer").jSignature('updateSetting', SETTINGNAME, VALUE, Boolean);

GitHub地址：https://github.com/brinley/jSignature

在线预览 网盘下载