注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

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

输入 fishcity 2548浏览

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

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

参数

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

映射:

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

转载请注明:jQ酷 » jquery模拟安卓系统的图案锁插件patternLock

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。