jQuery写字板插件

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