jquery模拟安卓系统的图案锁插件

查看演示立即下载

插件描述：jquery模拟安卓系统的图案锁插件

patternLock是一款轻量级模拟安卓系统锁屏图的jquery插件，patternLock很容易配置应用到程序或网站中，通过配置参数可以实现不同风格、不同模式,完全可根据自己项目的需求来定制。同时patternLock还提供一些方法来安全地使用这个插件。

使用方法

引入核心文件

<link href="patternLock.css"  rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>
<script src="patternLock.js"></script>

创建html

1	`<div` `id="patternContainer"></div>`

写入JS调用插件

$(function(){
    var lock = new PatternLock("#patternContainer");
});

参数

Option	Allowed Value	Default	Description
matrix	数组，如[3,3] 刚为3*3 矩阵	[3,3]	定义一个数组矩阵
margin	数字	20	两点间的矩离
radius	数字	25	圆点的圆角
patternVisible	true,false	true	是否画完后才显示线条
lineOnMove	true,false	true	是否是两点间到达目标点才显示画线

回调函数onDraw:

在完成画图后会回调一个函数，并把矩阵内容作为参数

var lock = new PatternLock('#patternHolder',{
    onDraw:function(pattern){
        //do something with pattern
    }
});<br>

映射：

Mapper，映射只能在初始化时使用，且只支持两种方式，一个是对象，一个是函数。

//对象
var lock = new PatternLock('#patternHolder',{
    mapper: {1:3,2:1,3:4,4:2,5:9,6:7,7:8,8:5,9:6}
});
//函数
var lock = new PatternLock('#patternHolder',{
    mapper: function(idx){
        return (idx%9) + 1;
    }
});<br>

方法：

option(key,[value])

获取或设置矩阵的模式

//取值
lock.option('matrix');
//return [3,3];
   
//设定值
lock.option('matrix',[4,4]);

reset()

刷新矩阵

1	`lock.reset();`

error()

显示输入的错识信息

1	`lock.error();`

getPattern()

获取画图完成后的矩阵信息

1	`lock.getPattern();<br>`

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：模仿win8界面菜单特效
下一个特效： jquery hover事件导航条