jQuery仿Android锁屏图案应用插件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery仿Android锁屏图案应用插件DEMO演示</title>
<link href="css/patternLock.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/patternLock.js"></script>
<style type="text/css">
#warp{width:600px; margin:auto;}
#warp div{margin-bottom:50px;}
</style>
</head>
<body>
<div id="warp">
<h1>图案锁实例</h1>
<p>1、基础初始化</p>
<div id="patternContainer"></div>
<p>2、两点间到达目标点才画线</p>
<div id="patternContainer1"></div>
<p>3、当图案连线完成后才显示连线</p>
<div id="patternContainer2"></div>
<p>4、改变两个点之间的距</p>
<div id="patternContainer3"></div>
<p>5、自定义距阵</p>
<div id="patternContainer4"></div>
<p>6、使用映射</p>
<div id="patternContainer5"></div>
<p>7、作为验证码使用，这个在服务端需用到 patternCaptha,有兴趣的朋友可以研究下，这里就不多说了。</p>
<div id="patternContainer6"></div>
</div>
</body>
</html>
<script>
$(function(){
var lock = new PatternLock("#patternContainer"); var lock1 = new PatternLock("#patternContainer1",{lineOnMove:false}); var lock2 = new PatternLock("#patternContainer2",{patternVisible:false}); var lock3 = new PatternLock("#patternContainer3",{radius:30,margin:20}); var lock4 = new PatternLock("#patternContainer4",{matrix:[4,4]}); var lock5 = new PatternLock("#patternContainer5",
{
mapper: function(idx){
return (idx%9) + 1;
}
}); }) </script>
CSS
/*
patternLock.js v 0.2.0
Author: Sudhanshu Yadav
Copyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
Demo on: ignitersworld.com/lab/patternLock.html
*/ .patt-holder{background:#3382c0;}
.patt-wrap{position:relative; cursor:pointer;}
.patt-wrap ul, .patt-wrap li{
list-style: none;
margin:;
padding:;
}
.patt-circ{
position:relative;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.patt-circ.hovered{
border:3px solid #009900;
} .patt-error .patt-circ.hovered{
border:3px solid #BA1B26;
} .patt-hidden .patt-circ.hovered{border:;} .patt-dots{
background: #FFF;
width: 10px;height: 10px;
border-radius:5px;
position:absolute;
top:50%;
left:50%;
margin-top:-5px;
margin-left:-5px;
}
.patt-lines{
border-radius:5px;
height:10px;
background:rgba(255,255,255,.7);
position:absolute;
transform-origin:5px 5px;
-ms-transform-origin:5px 5px; /* IE 9 */
-webkit-transform-origin:5px 5px;
} .patt-hidden .patt-lines{
display:none;
}
JS
/*
patternLock.js v 0.2.0
Author: Sudhanshu Yadav
Copyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
Demo on: ignitersworld.com/lab/patternLock.html
*/
(function ($, window, document, undefined) {
"use strict"; var isTouchSupported = !!('ontouchstart' in window),
touchStart = isTouchSupported ? "touchstart" : "mousedown",
touchEnd = isTouchSupported ? "touchend" : "mouseup",
touchMove = isTouchSupported ? "touchmove" : "mousemove",
nullFunc = function () {},
objectHolder = {}; //internal functions
function readyDom(iObj) {
var holder = iObj.holder,
option = iObj.option,
matrix = option.matrix,
margin = option.margin,
radius = option.radius,
html = ['<ul class="patt-wrap" style="padding:' + margin + 'px">'];
for (var i = 0, ln = matrix[0] * matrix[1]; i < ln; i++) {
html.push('<li class="patt-circ" style="margin:' + margin + 'px; width : ' + (radius * 2) + 'px; height : ' + (radius * 2) + 'px; -webkit-border-radius: ' + radius + 'px; -moz-border-radius: ' + radius + 'px; border-radius: ' + radius + 'px; "><div class="patt-dots"></div></li>');
}
html.push('</ul>');
holder.html(html.join('')).css({
'width': (matrix[1] * (radius * 2 + margin * 2) + margin * 2) + 'px',
'height': (matrix[0] * (radius * 2 + margin * 2) + margin * 2) + 'px'
}); //select pattern circle
iObj.pattCircle = iObj.holder.find('.patt-circ'); } //return height and angle for lines
function getLengthAngle(x1, x2, y1, y2) {
var xDiff = x2 - x1,
yDiff = y2 - y1; return {
length: Math.ceil(Math.sqrt(xDiff * xDiff + yDiff * yDiff)),
angle: Math.round((Math.atan2(yDiff, xDiff) * 180) / Math.PI)
};
} var startHandler = function (e, obj) {
e.preventDefault();
var iObj = objectHolder[obj.token]; //check if pattern is visible or not
if (!iObj.option.patternVisible) {
iObj.holder.addClass('patt-hidden');
} //assign events
$(this).on(touchMove + '.pattern-move', function (e) {
moveHandler.call(this, e, obj);
});
$(document).one(touchEnd, function () {
endHandler.call(this, e, obj);
});
//set pattern offset
var wrap = iObj.holder.find('.patt-wrap'),
offset = wrap.offset();
iObj.wrapTop = offset.top;
iObj.wrapLeft = offset.left; //reset pattern
obj.reset(); },
moveHandler = function (e, obj) {
e.preventDefault();
var x = e.pageX || e.originalEvent.touches[0].pageX,
y = e.pageY || e.originalEvent.touches[0].pageY,
iObj = objectHolder[obj.token],
li = iObj.pattCircle,
patternAry = iObj.patternAry,
lineOnMove = iObj.option.lineOnMove,
posObj = iObj.getIdxFromPoint(x, y),
idx = posObj.idx,
pattId = iObj.mapperFunc(idx) || idx; if (patternAry.length > 0) {
var laMove = getLengthAngle(iObj.lineX1, posObj.x, iObj.lineY1, posObj.y);
iObj.line.css({
'width': (laMove.length + 10) + 'px',
'transform': 'rotate(' + laMove.angle + 'deg)'
});
} if (idx) {
if (patternAry.indexOf(pattId) == -1) {
var elm = $(li[idx - 1]);
elm.addClass('hovered');
//push pattern on array
patternAry.push(pattId); //add start point for line
var margin = iObj.option.margin,
radius = iObj.option.radius,
newX = (posObj.i - 1) * (2 * margin + 2 * radius) + 2 * margin + radius,
newY = (posObj.j - 1) * (2 * margin + 2 * radius) + 2 * margin + radius; if (patternAry.length != 1) {
//to fix line
var lA = getLengthAngle(iObj.lineX1, newX, iObj.lineY1, newY);
iObj.line.css({
'width': (lA.length + 10) + 'px',
'transform': 'rotate(' + lA.angle + 'deg)'
}); if (!lineOnMove) iObj.line.show();
} //to create new line
var line = $('<div class="patt-lines" style="top:' + (newY - 5) + 'px; left:' + (newX - 5) + 'px"></div>');
iObj.line = line;
iObj.lineX1 = newX;
iObj.lineY1 = newY;
//add on dom
iObj.holder.append(line);
if (!lineOnMove) iObj.line.hide();
}
} },
endHandler = function (e, obj) {
e.preventDefault();
var iObj = objectHolder[obj.token],
pattern = iObj.patternAry.join(''); //remove hidden pattern class and remove event
iObj.holder.off('.pattern-move').removeClass('patt-hidden'); if (!pattern) return; iObj.option.onDraw(pattern); //to remove last line
iObj.line.remove(); if (iObj.rightPattern) {
if (pattern == iObj.rightPattern) {
iObj.onSuccess();
} else {
iObj.onError();
obj.error();
}
}
}; function InternalMethods() {} InternalMethods.prototype = {
constructor: InternalMethods,
getIdxFromPoint: function (x, y) {
var option = this.option,
matrix = option.matrix,
xi = x - this.wrapLeft,
yi = y - this.wrapTop,
idx = null,
margin = option.margin,
plotLn = option.radius * 2 + margin * 2,
qsntX = Math.ceil(xi / plotLn),
qsntY = Math.ceil(yi / plotLn),
remX = xi % plotLn,
remY = yi % plotLn; if (qsntX <= matrix[1] && qsntY <= matrix[0] && remX > margin * 2 && remY > margin * 2) {
idx = (qsntY - 1) * matrix[1] + qsntX;
}
return {
idx: idx,
i: qsntX,
j: qsntY,
x: xi,
y: yi
};
}
}; function PatternLock(selector, option) {
var self = this,
token = self.token = Math.random(),
iObj = objectHolder[token] = new InternalMethods(),
holder = iObj.holder = $(selector); //if holder is not present return
if (holder.length == 0) return; iObj.object = self;
option = iObj.option = $.extend({}, PatternLock.defaults, option);
readyDom(iObj); //add class on holder
holder.addClass('patt-holder'); //change offset property of holder if it does not have any property
if (holder.css('position') == "static") holder.css('position', 'relative'); //assign event
holder.on(touchStart, function (e) {
startHandler.call(this, e, self);
}); //handeling callback
iObj.option.onDraw = option.onDraw || nullFunc; //adding a mapper function
var mapper = option.mapper;
if (typeof mapper == "object") {
iObj.mapperFunc = function (idx) {
return mapper[idx];
};
} else if (typeof mapper == "function") {
iObj.mapperFunc = mapper;
} else {
iObj.mapperFunc = nullFunc;
} //to delete from option object
iObj.option.mapper = null;
} PatternLock.prototype = {
constructor: PatternLock,
option: function (key, val) {
var iObj = objectHolder[this.token],
option = iObj.option;
//for set methods
if (!val) {
return option[key];
}
//for setter
else {
option[key] = val;
if (key == "margin" || key == "matrix" || key == "radius") {
readyDom(iObj);
}
}
},
getPattern: function () {
return objectHolder[this.token].patternAry.join('');
},
reset: function () {
var iObj = objectHolder[this.token];
//to remove lines
iObj.pattCircle.removeClass('hovered');
iObj.holder.find('.patt-lines').remove(); //add/reset a array which capture pattern
iObj.patternAry = []; //remove error class if added
iObj.holder.removeClass('patt-error'); },
error: function () {
objectHolder[this.token].holder.addClass('patt-error');
},
checkForPattern: function (pattern, success, error) {
var iObj = objectHolder[this.token];
iObj.rightPattern = pattern;
iObj.onSuccess = success || nullFunc;
iObj.onError = error || nullFunc;
}
}; PatternLock.defaults = {
matrix: [3, 3],
margin: 20,
radius: 25,
patternVisible: true,
lineOnMove: true
}; window.PatternLock = PatternLock;
}(jQuery, window, document));
jQuery仿Android锁屏图案应用插件的更多相关文章
- jQuery仿Android锁屏图案应用
在线演示 本地下载
- Android 锁屏状态/锁屏密码等相关
Android 锁屏状态/锁屏密码等相关 开始是在设备管理器方面找方法,但一直不行,可能在公司系统组同事的帮助下,知道KeyguardManager这个类 /** * 当前系统锁屏是否有密码 * @p ...
- [Android] Android 锁屏实现与总结 （三）
上接: Android 锁屏实现与总结 (二) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 (二) [Andro ...
- [Android] Android 锁屏实现与总结 （二）
上接: [Android] Android 锁屏实现与总结 (一) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 ...
- [Android] Android 锁屏实现与总结 （一）
实现锁屏的方式有多种(锁屏应用.悬浮窗.普通Activity伪造锁屏等等).但国内比较主流并且被广泛应用的Activity伪造锁屏方式. 实例演示图片如下: 系列文章链接如下: [Android] A ...
- Java计算手机九宫格锁屏图案连接9个点的方案总数
(一)问题 九宫格图案解锁连接9个点共有多少种方案? (二)初步思考 可以把问题抽象为求满足一定条件的1-9的排列数(类似于“八皇后问题”),例如123456789和987654321都是合法的(按照 ...
- Android锁屏后数据改变的解决方案
如果一个界面设置成横屏,那么锁屏再开启之后,会重新执行一遍onCreate()方法.对于这个问题的解决方案如下: 只需要在Menifest文件的activity相应标签下添加这行代码即可: andro ...
- Android 锁屏软件MemoryDebris测试报告
目 录 项目基本信息 第1章 引言 1.1 编写目的 1.2 项目背景 1.3 参考资料 1.4 术语和缩略语 第2章 ...
- Android锁屏软件
需求描述:锁屏软件就是点击应用然后直接锁屏,不会弹出任何界面 设计思路:应用启动以后通过getSystemService获取系统的服务,调用安卓系统的DevicePolicyManager和Compo ...
随机推荐
- Nginx 教程 （1）：基本概念
简介 嗨!分享就是关心!所以,我们愿意再跟你分享一点点知识.我们准备了这个划分为三节的<Nginx教程>.如果你对 Nginx 已经有所了解,或者你希望了解更多,这个教程将会对你非常有 ...
- mySql配置在nodejs中使用
mySql安装完成后,配置链接nodejs项目中的数据库. 1.测试是否安装成功. 2.use nodejs使用nodejs 3.设置数据源 5.exit
- react native 打包至iphone设备
1.新建bundle 在自己项目的ios文件夹下新建一个文件夹取名bundle PS:ios文件夹和node_modules文件夹在同一级目录下,这个bundle文件夹名称随意取,后面要用到,但是记得 ...
- elasticsearch 深入 —— Search After实时滚动查询
Search After 一般的分页需求我们可以使用form和size的方式实现,但是这种分页方式在深度分页的场景下应该是要避免使用的.深度分页会随着请求的页次增加,所消耗的内存和时间的增长也是成比例 ...
- javascript中的toString()、toLocaleString()方法
javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘 ...
- rmdir －删除空目录
总览 rmdir[options]directory... POSIX 选项: [-p] GNU 选项(缩写): [-p] [--ignore-fail-on-non-empty] [--help] ...
- 基于GPU的图像处理平台
基于GPU的图像处理平台 1. (309)英伟达推Jetson TX1 GPU模块力推人工智能 1.1 产品概述 Jetson TX1 GPU模块,主要针对近年来蓬勃发展的人工智能市场,包括无人机. ...
- day03 for循环、字符串方法、类型转换
01 上周内容回顾 while 条件: 循环体 例: while True: print(111) print(222) print(333) 结束循环的两种方式: 1,改变条件. 2,break. ...
- 一、Iframe
一.Iframe 自适应iframe的高 <!-- frameborder :设置iframe的边框 scrolling:设置iframe的滚动条 src:设置iframe的路径 onload: ...
- Mybatis-Generator demo
使用Mybatis-Generator自动生成Dao.Model.Mapping相关文件(转) https://www.cnblogs.com/smileberry/p/4145872.html == ...