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);
该jQuery写字板插件的github地址为:https://github.com/brinley/jSignature