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

所属分类:输入-拖和放,密码,触摸,验证

 11261  75  查看评论 (3)
jquery模拟安卓系统的图案锁插件 ie兼容9

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

使用方法

引入核心文件

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

创建html

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

写入JS调用插件

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

参数

OptionAllowed ValueDefaultDescription
matrix数组 ,如[3,3]  刚为3*3 矩阵[3,3]定义一个数组矩阵
margin数字20两点间的矩离
radius数字25圆点的圆角
patternVisibletrue,falsetrue是否画完后才显示线条
lineOnMovetrue,falsetrue是否是两点间到达目标点才显示画线

回调函数onDraw:

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

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

映射:

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;
    }
});

方法:

option(key,[value])

获取或设置矩阵的模式

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

reset()

刷新矩阵

lock.reset();

error()

显示输入的错识信息

lock.error();

getPattern()

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

lock.getPattern();

相关插件-拖和放,密码,触摸,验证

Sortable – 简单灵活的 JavaScript 拖放排序插件

Sortable 简单灵活的 JavaScript 拖放排序插件
  拖和放
 14534  81

jQuery 360度全景图插件 PANORAMA VIEWER

PANORAMA VIEWER将帮助您把全景照片嵌入在网站上。使用鼠标拖拽方试查看效果。
  拖和放
 22287  17

jquery仿windows系统选中图标效果

jquery仿windows系统选中图标效果,兼容ie6. (jQuery插件库原创插件未经允许不得转载。)
  拖和放
 7824  17

jQuery拖拽拖放插件DAD

DAD 是一款基于 jQuery 的拖拽拖放插件,它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等,同时你也可以稍加改造,做成类似垃圾篓、购物车等效果。
  拖和放
 14718  153

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    张小鱼 0
    2015/7/8 9:54:22
    @sdsfsdfsfsdfg https://github.com/s-yadav/patternCaptcha 回复
    张小鱼 0
    2015/7/8 9:54:13
    https://github.com/s-yadav/patternCaptcha 回复
    sdsfsdfsfsdfg 0
    2015/7/8 9:50:38
    服务器端的找不到相关资料啊 回复
取消回复