jQuery一款写字板插件jSignature

jQuery一款写字板插件jSignature

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

使用方法
在页面中引入下面的文件。

1
2
3
4
5
6
7
8
9
<!-- 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结构来创建一个写字板。

1
2
3
<div id="signatureparent">
  <div id="signature"></div>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 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);

文件信息:

    1

    发表评论