Skip to content

M
mui
Commit 48f4a40e authored by hbcui1984's avatar hbcui1984
Browse files
Options

初始化提交登录模板

parent 46297ad4
Expand all Show whitespace changes
Inline Side-by-side
Showing with 10742 additions and 0 deletions
examples/login/.project 0 → 100644
View file @ 48f4a40e
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>login</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>com.pandora.projects.ui.MKeyBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.pandora.projects.ui.MKeyNature</nature>
</natures>
</projectDescription>
examples/login/css/mui.css 0 → 100644
View file @ 48f4a40e
This diff is collapsed.
examples/login/css/mui.min.css 0 → 100644
View file @ 48f4a40e
This diff is collapsed.
examples/login/css/style.css 0 → 100644
View file @ 48f4a40e
.ui-page-login,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.mui-content{height: 100%;}
examples/login/index.html 0 → 100644
View file @ 48f4a40e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
html,
body {
height: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
.loading {
position: absolute;
top: 50%;
height: 18px;
margin-top: -9px;
text-align: center;
width: 100%;
left: 0px;
}
</style>
</head>
<body>
<div class='loading'>
正在启动应用...
</div>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script>
(function($) {
$.init();
$.plusReady(function() {
var settings = app.getSettings();
var state = app.getState();
if (settings.autoLogin && state.token && settings.gestures) {
$.openWindow({
url: 'unlock.html',
id: 'unlock'
});
} else if (settings.autoLogin && state.token) {
$.openWindow({
url: 'main.html',
id: 'main'
});
} else {
$.openWindow({
url: 'login.html',
id: 'login'
});
}
$.plusReady(function() {
setTimeout(function() {
//关闭 splash
plus.navigator.closeSplashscreen();
}, 600);
});
//
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
if (backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
});
}(mui));
</script>
</body>
</html>
\ No newline at end of file
examples/login/js/app.js 0 → 100644
View file @ 48f4a40e
(function($, owner) {
owner.login = function(loginInfo, callback) {
callback = callback || $.noop;
loginInfo = loginInfo || {};
loginInfo.account = loginInfo.account || '';
loginInfo.password = loginInfo.password || '';
var users = JSON.parse(localStorage.getItem('$users') || '[]');
var authed = users.some(function(user) {
return loginInfo.account == user.account && loginInfo.password == user.password;
});
if (authed) {
var state = owner.getState();
state.account = loginInfo.account;
state.token = "token123456789";
owner.setState(state);
return callback();
} else {
return callback('用户名或密码错误');
}
};
owner.reg = function(regInfo, callback) {
callback = callback || $.noop;
regInfo = regInfo || {};
regInfo.account = regInfo.account || '';
regInfo.password = regInfo.password || '';
if (regInfo.account.length < 5) {
return callback('用户名最短需要 5 个字符');
}
if (regInfo.password.length < 6) {
return callback('密码最短需要 6 个字符');
}
var users = JSON.parse(localStorage.getItem('$users') || '[]');
users.push(regInfo);
localStorage.setItem('$users', JSON.stringify(users));
return callback();
};
owner.getState = function() {
var stateText = localStorage.getItem('$state') || "{}";
return JSON.parse(stateText);
};
owner.setState = function(state) {
state = state || {};
localStorage.setItem('$state', JSON.stringify(state));
var settings = owner.getSettings();
settings.gestures = '';
owner.setSettings(settings);
};
owner.setSettings = function(settings) {
settings = settings || {};
localStorage.setItem('$settings', JSON.stringify(settings));
}
owner.getSettings = function() {
var settingsText = localStorage.getItem('$settings') || "{}";
return JSON.parse(settingsText);
}
}(mui, window.app = {}));
\ No newline at end of file
examples/login/js/mui.js 0 → 100644
View file @ 48f4a40e
This diff is collapsed.
examples/login/js/mui.locker.js 0 → 100644
View file @ 48f4a40e
/**
* 手势锁屏插件
* varstion 1.0.4
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, doc) {
var touchSupport = ('ontouchstart' in document);
var startEventName = touchSupport ? 'touchstart' : 'mousedown';
var moveEventName = touchSupport ? 'touchmove' : 'mousemove';
var endEventName = touchSupport ? 'touchend' : 'mouseup';
var lockerHolderClassName = $.className('locker-holder');
var lockerClassName = $.className('locker');
var styleHolder = doc.querySelector('head') || doc.querySelector('body');
styleHolder.innerHTML += "<style>.mui-locker-holder{overflow:hidden;position:relative;padding:0px;}.mui-locker-holder canvas{width:100%;height:100%;}</style>";
//定义 Locker 类
var Locker = $.Locker = $.Class.extend({
R: 26,
CW: 400,
CH: 320,
OffsetX: 30,
OffsetY: 30,
/**
* 构造函数
* */
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 Locker 时缺少容器元素";
}
self.holder = holder;
self.options = options || {};
self.options.callback = self.options.callback || self.options.done || $.noop;
self.holder.innerHTML = '<canvas></canvas>';
//
self.holder.classList.add(lockerHolderClassName);
//初始化
var canvas = self.canvas = $.qsa('canvas', self.holder)[0];
canvas.on = canvas.addEventListener || function(name, handler, capture) {
canvas.attachEvent('on' + name, handler, capture);
};
canvas.off = canvas.removeEventListener || function(name, handler, capture) {
canvas.detachEvent('on' + name, handler, capture);
};
if (self.options.width) self.holder.style.width = self.options.width + 'px';
if (self.options.height) self.holder.style.height = self.options.height + 'px';
canvas.width = self.CW = (options.width || canvas.offsetWidth);
canvas.height = self.CH = (options.height || canvas.offsetHeight);
var cxt = self.cxt = canvas.getContext("2d");
//两个圆之间的外距离 就是说两个圆心的距离去除两个半径
var X = (self.CW - 2 * self.OffsetX - self.R * 2 * 3) / 2;
var Y = (self.CH - 2 * self.OffsetY - self.R * 2 * 3) / 2;
self.pointLocationArr = self.caculateNinePointLotion(X, Y);
self.initEvent(canvas, cxt, self.holder);
self.draw(cxt, self.pointLocationArr, [], null);
},
/**
* 计算
*/
caculateNinePointLotion: function(diffX, diffY) {
var self = this;
var Re = [];
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
var Point = {
X: (self.OffsetX + col * diffX + (col * 2 + 1) * self.R),
Y: (self.OffsetY + row * diffY + (row * 2 + 1) * self.R)
};
Re.push(Point);
}
}
return Re;
},
/**
* 绘制
*/
draw: function(cxt, _PointLocationArr, _LinePointArr, touchPoint) {
var self = this;
var R = self.R;
if (_LinePointArr.length > 0) {
cxt.beginPath();
for (var i = 0; i < _LinePointArr.length; i++) {
var pointIndex = _LinePointArr[i];
cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
}
cxt.lineWidth = 10;
cxt.strokeStyle = self.options.lineColor || "#999"; //连结线颜色
cxt.stroke();
cxt.closePath();
if (touchPoint != null) {
var lastPointIndex = _LinePointArr[_LinePointArr.length - 1];
var lastPoint = _PointLocationArr[lastPointIndex];
cxt.beginPath();
cxt.moveTo(lastPoint.X, lastPoint.Y);
cxt.lineTo(touchPoint.X, touchPoint.Y);
cxt.stroke();
cxt.closePath();
}
}
for (var i = 0; i < _PointLocationArr.length; i++) {
var Point = _PointLocationArr[i];
cxt.fillStyle = self.options.ringColor || "#888"; //圆圈边框颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
cxt.fillStyle = self.options.fillColor || "#f3f3f3"; //圆圈填充颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
if (_LinePointArr.indexOf(i) >= 0) {
cxt.fillStyle = self.options.pointColor || "#777"; //圆圈中心点颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - 16, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
}
},
isPointSelect: function(touches, linePoint) {
var self = this;
for (var i = 0; i < self.pointLocationArr.length; i++) {
var currentPoint = self.pointLocationArr[i];
var xdiff = Math.abs(currentPoint.X - touches.elementX);
var ydiff = Math.abs(currentPoint.Y - touches.elementY);
var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
if (dir < self.R) {
if (linePoint.indexOf(i) < 0) {
linePoint.push(i);
}
break;
}
}
},
initEvent: function(canvas, cxt, holder) {
var self = this;
var linePoint = [];
var isDown = false; //针对鼠标事件
//start
self._startHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft);
e.point.elementY = (e.point.pageY - holder.offsetTop);
self.isPointSelect(e.point, linePoint);
isDown = true;
};
canvas.on(startEventName, self._startHandler, false);
//move
self._moveHanlder = function(e) {
if (!isDown) return;
e.preventDefault();
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft);
e.point.elementY = (e.point.pageY - holder.offsetTop);
var touches = e.point;
self.isPointSelect(touches, linePoint);
cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, {
X: touches.elementX,
Y: touches.elementY
});
};
canvas.on(moveEventName, self._moveHanlder, false);
//end
self._endHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft);
e.point.elementY = (e.point.pageY - holder.offsetTop);
cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, null);
//事件数据
var eventData = {
sender: self,
points: linePoint
};
/*
* 回调完成事件
*
* 备注:
* 比较理想的做法是为 Locker 的实例启用事件机制，比如 locker.on('done',handler);
* 在 mui 没有完整的公共事件模块前，此版本中 locker 实例暂通过 options.callback 处理
*/
self.options.callback(eventData);
//触发声明的DOM的自定义事件(暂定 done 为事件名，可以考虑更有针对的事件名 )
$.trigger(self.holder, 'done', eventData);
//-
linePoint = [];
isDown = false;
};
canvas.on(endEventName, self._endHandler, false);
},
pointLocationArr: [],
/**
* 清除图形
* */
clear: function() {
var self = this;
//self.pointLocationArr = [];
if (self.cxt) {
self.cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(self.cxt, self.pointLocationArr, [], {
X: 0,
Y: 0
});
}
},
/**
* 释放资源
* */
dispose: function() {
var self = this;
self.cxt = null;
self.canvas.off(startEventName, self._startHandler);
self.canvas.off(moveEventName, self._moveHandler);
self.canvas.off(endEventName, self._endHandler);
self.holder.innerHTML = '';
self.canvas = null;
}
});
//添加 locker 插件
$.fn.locker = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (options) {
new Locker(element, options);
} else {
var optionsText = element.getAttribute('data-locker-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.lineColor = element.getAttribute('data-locker-line-color') || options.lineColor;
options.ringColor = element.getAttribute('data-locker-ring-color') || options.ringColor;
options.fillColor = element.getAttribute('data-locker-fill-color') || options.fillColor;
options.pointColor = element.getAttribute('data-locker-point-color') || options.pointColor;
options.width = element.getAttribute('data-locker-width') || options.width;
options.height = element.getAttribute('data-locker-height') || options.height;
new Locker(element, options);
}
});
return this;
};
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
setTimeout(function() {
$('.' + lockerClassName).locker();
}, 200);
});
}(mui, document));
\ No newline at end of file
examples/login/js/mui.min.js 0 → 100644
View file @ 48f4a40e
This diff is collapsed.
examples/login/login.html 0 → 100644
View file @ 48f4a40e
<!DOCTYPE html>
<html class="ui-page-login">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
background-color: #efeff4;
}
.ui-logo {
width: 100px;
height: 100px;
margin: 60px auto 25px auto;
background-image: url(images/user-photo.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 60px;
}
.mui-content-padded {
margin-top: 20px;
}
.ui-login-form {
border: solid 1px #ddd;
border-radius: 5px;
margin: 10px;
overflow: hidden;
background-color: #ddd;
}
.ui-login-form input {
border: none;
margin: 0px;
font-size: 18px;
padding: 15px !important;
border-radius: 0px;
height: auto;
}
.ui-login-form input:first-child {
margin-bottom: 1px;
}
.mui-btn-block {
padding: 12px 0px;
}
#reg {
display: block;
margin-top: 45px;
text-align: center;
}
.mui-checkbox label {
display: inline-block;
width: auto;
vertical-align: text-bottom;
padding: 2px 0px;
color: #777;
}
.mui-checkbox input {
position: relative !important;
top: auto!important;
left: auto!important;
right: auto!important;
bottom: auto!important;
margin: 0px;
padding: 0px;
vertical-align: text-bottom;
}
.mui-checkbox {
margin: 3px 10px;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="ui-logo"></div>
<form class="ui-login-form">
<input id='account' type="text" class="mui-input-clear mui-input" placeholder="账号">
<input id='password' type="password" class="mui-input-clear mui-input" placeholder="密码">
</form>
<div class="mui-checkbox">
<input class="mui-checkbox" id='autoLogin' name="checkbox" type="checkbox">
<label>记住我的状态</label>
</div>
<div class="mui-content-padded">
<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
<a id='reg'>注册新用户</a>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script>
(function($, doc) {
$.init();
$.plusReady(function() {
var settings = app.getSettings();
var loginButton = doc.querySelector('#login');
var accountBox = doc.querySelector('#account');
var passwordBox = doc.querySelector('#password');
var autoLoginButton = doc.querySelector("#autoLogin");
var regButton = doc.querySelector('#reg');
loginButton.addEventListener('tap', function(event) {
var loginInfo = {
account: accountBox.value,
password: passwordBox.value
};
app.login(loginInfo, function(err) {
if (err) {
plus.nativeUI.toast(err);
return;
}
$.openWindow({
url: 'main.html',
id: 'main'
});
});
});
autoLoginButton.checked = settings.autoLogin;
autoLoginButton.addEventListener('change', function(event) {
setTimeout(function() {
settings.autoLogin = autoLoginButton.checked;
app.setSettings(settings);
}, 50);
}, false);
regButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'reg.html',
id: 'reg'
});
}, false);
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
if (backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
});
}(mui, document));
</script>
</body>
</html>
\ No newline at end of file
examples/login/main.html 0 → 100644
View file @ 48f4a40e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
ul {
font-size: 14px;
color: #8f8f94;
}
.mui-btn-block {
padding: 12px 0px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">主页</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>
您好，您已成功登录。
<ul>
<li>关闭应用并不会注销当前用户的登录状态。</li>
<li>注销登录会清除当前用户的登录状态。</li>
<li>如果登录时您选择了 "记住我的状态"，可以在这里设置 "解锁手势图案"。</li>
</ul>
</p>
<button id='setting' class="mui-btn mui-btn-block mui-btn-primary">设置解锁图案</button>
<button id='exit' class="mui-btn mui-btn-block mui-btn-green">关闭应用</button>
<button id='logout' class="mui-btn mui-btn-red mui-btn-block">注销登录</button>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script>
(function($, doc) {
$.init();
$.plusReady(function() {
var settings = app.getSettings();
//退出应用
var exitButton = doc.querySelector('#exit');
exitButton.addEventListener('tap', function(event) {
if (!settings.autoLogin) {
app.setState({});
}
plus.runtime.quit();
});
exitButton.style.display = mui.os.ios ? 'none' : 'block';
//设置
var settingButton = doc.querySelector('#setting');
settingButton.style.display = settings.autoLogin ? 'block' : 'none';
settingButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'setting.html',
id: 'setting'
});
});
//注销
$.oldBack = mui.back;
var logoutButton = doc.querySelector('#logout');
logoutButton.addEventListener('tap', function(event) {
app.setState({});
$.openWindow({
url: 'login.html',
id: 'login',
show: {
aniShow: 'slide-in-left'
}
});
});
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
if (backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
});
}(mui, document));
</script>
</body>
</html>
\ No newline at end of file
examples/login/manifest.json 0 → 100644
View file @ 48f4a40e
This diff is collapsed.
examples/login/reg.html 0 → 100644
View file @ 48f4a40e
<!DOCTYPE html>
<html class="ui-page-login">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<style>
.area {
margin: 30px auto 0px auto;
}
.mui-input-group {
margin-top: 10px;
}
.mui-input-group:first-child {
margin-top: 30px;
}
.mui-input-group label {
width: 20%;
}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 80%;
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-content-padded {
margin-top: 25px;
}
.mui-btn-block {
padding: 12px 0px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">注册</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input id='account' type="text" class="mui-input-clear mui-input" placeholder="账号">
</div>
<div class="mui-input-row">
<label>密码</label>
<input id='password' type="password" class="mui-input-clear mui-input" placeholder="密码">
</div>
<div class="mui-input-row">
<label>确认</label>
<input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="密码">
</div>
</form>
<div class="mui-content-padded">
<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script>
(function($, doc) {
$.init();
$.plusReady(function() {
var settings = app.getSettings();
var regButton = doc.querySelector('#reg');
var accountBox = doc.querySelector('#account');
var passwordBox = doc.querySelector('#password');
var passwordConfirmBox = doc.querySelector('#password_confirm');
regButton.addEventListener('tap', function(event) {
var regInfo = {
account: accountBox.value,
password: passwordBox.value
};
var passwordConfirm = passwordConfirmBox.value;
if (passwordConfirm != regInfo.password) {
plus.nativeUI.toast('密码两次输入不一致');
return;
}
app.reg(regInfo, function(err) {
if (err) {
plus.nativeUI.toast(err);
return;
}
$.openWindow({
url: 'login.html',
id: 'login'
});
});
});
});
}(mui, document));
</script>
</body>
</html>
\ No newline at end of file
examples/login/setting.html 0 → 100644
View file @ 48f4a40e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
html,
body {
background-color: #efeff4;
overflow: hidden;
}
.mui-locker {
margin: 35px auto;
display: none;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">设定解锁手势</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 10px 0px;">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
启用状态
<div id="lockState" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div class="mui-locker" data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}' data-locker-width='320' data-locker-height='320'>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.locker.js"></script>
<script src="js/app.js"></script>
<script>
(function($, doc) {
$.init();
$.plusReady(function() {
var settings = app.getSettings();
var lockStateButton = doc.querySelector("#lockState");
var locker = doc.querySelector('.mui-locker');
lockStateButton.addEventListener('toggle', function(event) {
var isActive = event.detail.isActive;
locker.style.display = isActive ? 'block' : 'none';
if (!isActive) {
settings.gestures = '';
app.setSettings(settings);
}
}, false);
lockStateButton.classList[settings.gestures ? 'add' : 'remove']('mui-active')
locker.style.display = settings.gestures ? 'block' : 'none';
var record = [];
locker.addEventListener('done', function(event) {
var rs = event.detail;
if (rs.points.length < 4) {
plus.nativeUI.toast('设定的手势太简单了');
record = [];
rs.sender.clear();
return;
}
record.push(rs.points.join(''));
if (record.length >= 2) {
if (record[0] == record[1]) {
plus.nativeUI.toast('手势设定完成');
settings.gestures = record[0];
app.setSettings(settings);
setTimeout(function() {
$.openWindow({
url: 'main.html',
id: 'main'
});
}, 200);
} else {
plus.nativeUI.toast('两次手势不一致,请重新设定');
}
rs.sender.clear();
record = [];
} else {
plus.nativeUI.toast('请确认手势设定');
rs.sender.clear();
}
}, false);
});
}(mui, document));
</script>
</body>
</html>
\ No newline at end of file
examples/login/unlock.html 0 → 100644
View file @ 48f4a40e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
html,
body {
background-color: #efeff4;
overflow: hidden;
}
.mui-locker {
margin: 35px auto;
}
#forget {
display: block;
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">解锁</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 10px 0px;">
<div class="mui-locker" data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}' data-locker-width='320' data-locker-height='320'>
</div>
</div>
<a id='forget'>我忘记了解锁图案</a>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.locker.js"></script>
<script src="js/app.js"></script>
<script>
(function($, doc) {
$.init();
$.plusReady(function() {
var settings = app.getSettings();
var forgetButton = doc.querySelector("#forget");
var locker = doc.querySelector('.mui-locker');
forgetButton.addEventListener('tap', function(event) {
settings.gestures = '';
app.setSettings(settings);
var state = app.getState();
state.token = '';
app.setState(state);
$.openWindow({
url: 'login.html',
id: 'login'
});
});
locker.addEventListener('done', function(event) {
var rs = event.detail;
if (settings.gestures == rs.points.join('')) {
$.openWindow({
url: 'main.html',
id: 'main'
});
rs.sender.clear();
} else {
plus.nativeUI.toast('解锁手势错误');
rs.sender.clear();
}
}, false);
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
if (backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
});
}(mui, document));
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment