Skip to content

M
mui
Commit 31620a78 authored by hbcui1984's avatar hbcui1984
Browse files
Options

更新带登录和设置的mui项目模板

parent 6abfc4cc
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1439 additions and 9871 deletions
examples/hello-mui/list.html
View file @ 31620a78
......@@ -358,7 +358,7 @@
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/setting.html">
setting（设置）
setting（设置）- div窗体切换示例
</a>
</li>
</ul>
......
examples/login/css/mui.css deleted 100644 → 0
View file @ 6abfc4cc
This diff is collapsed.
examples/login/css/mui.min.css
View file @ 31620a78
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/login/forget_password.html 0 → 100644
View file @ 31620a78
<!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: 20px auto 0px auto;
}
.mui-input-group:first-child {
margin-top: 20px;
}
.mui-input-group label {
width: 22%;
}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 78%;
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-content-padded {
margin-top: 25px;
}
.mui-btn {
padding: 10px;
}
.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
margin-top: 1px;
}
</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='email' type="email" class="mui-input-clear mui-input" placeholder="请输入注册邮箱">
</div>
</form>
<div class="mui-content-padded">
<button id='sendMail' 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 sendButton = doc.getElementById('sendMail');
var emailBox = doc.getElementById('email');
sendButton.addEventListener('tap', function() {
app.forgetPassword(emailBox.value, function(err, info) {
plus.nativeUI.toast(err || info);
});
}, false);
});
}(mui, document));
</script>
</body>
</html>
\ No newline at end of file
examples/login/index.html deleted 100644 → 0
View file @ 6abfc4cc
<!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
View file @ 31620a78
/**
* 演示程序当前的 “注册/登录” 等操作，是基于 “本地存储” 完成的
* 当您要参考这个演示程序进行相关 app 的开发时，
* 请注意将相关方法调整成 “基于服务端Service” 的实现。
**/
(function($, owner) {
/**
* 用户登录
**/
owner.login = function(loginInfo, callback) {
callback = callback || $.noop;
loginInfo = loginInfo || {};
loginInfo.account = loginInfo.account || '';
loginInfo.password = loginInfo.password || '';
if (loginInfo.account.length < 5) {
return callback('账号最短为 5 个字符');
}
if (loginInfo.password.length < 6) {
return callback('密码最短为 6 个字符');
}
var users = JSON.parse(localStorage.getItem('$users') || '[]');
var authed = users.some(function(user) {
return loginInfo.account == user.account && loginInfo.password == user.password;
......@@ -18,6 +32,10 @@
return callback('用户名或密码错误');
}
};
/**
* 新用户注册
**/
owner.reg = function(regInfo, callback) {
callback = callback || $.noop;
regInfo = regInfo || {};
......@@ -29,16 +47,26 @@
if (regInfo.password.length < 6) {
return callback('密码最短需要 6 个字符');
}
if (!checkEmail(regInfo.email)) {
return callback('邮箱地址不合法');
}
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));
......@@ -46,10 +74,34 @@
settings.gestures = '';
owner.setSettings(settings);
};
var checkEmail=function(email){
email = email || '';
return (email.length > 3 && email.indexOf('@') > -1);
};
/**
* 找回密码
**/
owner.forgetPassword = function(email, callback) {
callback = callback || $.noop;
if (!checkEmail(email)) {
return callback('邮箱地址不合法');
}
return callback(null, '新的随机密码已经发送到您的邮箱，请查收邮件。');
};
/**
* 获取应用本地配置
**/
owner.setSettings = function(settings) {
settings = settings || {};
localStorage.setItem('$settings', JSON.stringify(settings));
}
/**
* 设置应用本地配置
**/
owner.getSettings = function() {
var settingsText = localStorage.getItem('$settings') || "{}";
return JSON.parse(settingsText);
......
examples/login/js/mui.js deleted 100644 → 0
View file @ 6abfc4cc
This diff is collapsed.
examples/login/js/mui.locker.js
View file @ 31620a78
......@@ -19,6 +19,26 @@
var times = 4;
function getElementLeft(element) {　　　　
var actualLeft = element.offsetLeft;　　　　
var current = element.offsetParent;　　　　
while (current !== null) {　　　　　　
actualLeft += current.offsetLeft;　　　　　　
current = current.offsetParent;　　　　
}　　　　
return actualLeft;　　
}　　
function getElementTop(element) {　　　　
var actualTop = element.offsetTop;　　　　
var current = element.offsetParent;　　　　
while (current !== null) {　　　　　　
actualTop += current.offsetTop;　　　　　　
current = current.offsetParent;　　　　
}　　　　
return actualTop;　　
}
//定义 Locker 类
var Locker = $.Locker = $.Class.extend({
R: 26,
......@@ -36,6 +56,11 @@
throw "构造 Locker 时缺少容器元素";
}
self.holder = holder;
//避免重复初始化开始
if (self.holder.__locker_inited) return;
self.holder.__locker_inited = true;
//避免重复初始化结束
//
self.options = options || {};
self.options.callback = self.options.callback || self.options.done || $.noop;
self.holder.innerHTML = '<canvas></canvas>';
......@@ -52,8 +77,8 @@
//
if (self.options.width) self.holder.style.width = self.options.width + 'px';
if (self.options.height) self.holder.style.height = self.options.height + 'px';
self.CW = self.holder.offsetWidth || self.CW;
self.CH = self.holder.offsetHeight || self.CH;
self.CW = self.options.width || self.holder.offsetWidth || self.CW;
self.CH = self.options.height || self.holder.offsetHeight || self.CH;
//处理 “宽、高” 等数值, 全部扩大 times 倍
self.R *= times;
self.CW *= times;
......@@ -69,7 +94,11 @@
var Y = (self.CH - 2 * self.OffsetY - self.R * 2 * 3) / 2;
self.pointLocationArr = self.caculateNinePointLotion(X, Y);
self.initEvent(canvas, cxt, self.holder);
//console.log(X);
self.draw(cxt, self.pointLocationArr, [], null);
setTimeout(function() {
self.draw(cxt, self.pointLocationArr, [], null);
}, 0);
},
/**
......@@ -161,8 +190,8 @@
//start
self._startHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
self.isPointSelect(e.point, linePoint);
isDown = true;
};
......@@ -172,8 +201,8 @@
if (!isDown) return;
e.preventDefault();
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
var touches = e.point;
self.isPointSelect(touches, linePoint);
cxt.clearRect(0, 0, self.CW, self.CH);
......@@ -186,8 +215,8 @@
//end
self._endHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, null);
//事件数据
......@@ -265,10 +294,11 @@
};
//自动处理 class='mui-locker' 的 dom
try {
$('.' + lockerClassName).locker();
} catch (ex) {}
$.ready(function() {
setTimeout(function() {
$('.' + lockerClassName).locker();
}, 350);
});
}(mui, document));
\ No newline at end of file
examples/login/js/mui.min.js
View file @ 31620a78
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/login/js/mui.view.js 0 → 100644
View file @ 31620a78
This diff is collapsed.
examples/login/login.html
View file @ 31620a78
......@@ -8,90 +8,86 @@
<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;
.area {
margin: 20px auto 0px auto;
}
.mui-content-padded {
.mui-input-group {
margin-top: 10px;
}
.mui-input-group:first-child {
margin-top: 20px;
}
.ui-login-form {
border: solid 1px #ddd;
border-radius: 5px;
margin: 10px;
overflow: hidden;
background-color: #ddd;
.mui-input-group label {
width: 22%;
}
.ui-login-form input {
border: none;
margin: 0px;
font-size: 18px;
padding: 15px !important;
border-radius: 0px;
height: auto;
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 78%;
}
.ui-login-form input:first-child {
margin-bottom: 1px;
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-btn-block {
padding: 12px 0px;
.mui-content-padded {
margin-top: 25px;
}
#reg {
.mui-btn {
padding: 10px;
}
.link-area {
display: block;
margin-top: 45px;
margin-top: 25px;
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;
.spliter {
color: #bbb;
padding: 0px 8px;
}
/*
#forgetPassword {
}
#reg {
position: absolute;
bottom: 30px;
left: 50%;
width: 80px;
margin-left: -40px;
background-color: #f5f5f5;
}*/
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登录</h1>
</header>
<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 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>
</form>
<div class="mui-checkbox">
<input class="mui-checkbox" id='autoLogin' name="checkbox" type="checkbox">
<label>记住我的状态</label>
<form class="mui-input-group">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
自动登录
<div id="autoLogin" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
</form>
<div class="mui-content-padded">
<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
<a id='reg'>注册新用户</a>
<div class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
......@@ -101,11 +97,42 @@
$.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');
var state = app.getState();
//检查 "登录状态/锁屏状态" 开始
if (settings.autoLogin && state.token && settings.gestures) {
$.openWindow({
url: 'unlock.html',
id: 'unlock',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
} else if (settings.autoLogin && state.token) {
$.openWindow({
url: 'main.html',
id: 'main',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
}
setTimeout(function() {
//关闭 splash
plus.navigator.closeSplashscreen();
}, 600);
//检查 "登录状态/锁屏状态" 结束
var loginButton = doc.getElementById('login');
var accountBox = doc.getElementById('account');
var passwordBox = doc.getElementById('password');
var autoLoginButton = doc.getElementById("autoLogin");
var regButton = doc.getElementById('reg');
var forgetButton = doc.getElementById('forgetPassword');
loginButton.addEventListener('tap', function(event) {
var loginInfo = {
account: accountBox.value,
......@@ -118,23 +145,54 @@
}
$.openWindow({
url: 'main.html',
id: 'main'
id: 'main',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
});
});
autoLoginButton.checked = settings.autoLogin;
autoLoginButton.addEventListener('change', function(event) {
autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')
autoLoginButton.addEventListener('toggle', function(event) {
setTimeout(function() {
settings.autoLogin = autoLoginButton.checked;
var isActive = event.detail.isActive;
settings.autoLogin = isActive;
app.setSettings(settings);
}, 50);
}, false);
regButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'reg.html',
id: 'reg'
id: 'reg',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
}, false);
forgetButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'forget_password.html',
id: 'forget_password',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
}, false);
/*
window.addEventListener('resize', function() {
setTimeout(function() {
regButton.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
}, 0);
}, false);*/
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
......
examples/login/main.html
View file @ 31620a78
......@@ -12,29 +12,33 @@
font-size: 14px;
color: #8f8f94;
}
.mui-btn-block {
padding: 12px 0px;
.mui-btn {
padding: 10px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">主页</h1>
<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
<h1 class="mui-title">登录模板</h1>
<button id='setting' class=" mui-pull-right mui-btn-link">设置</button>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>
您好，您已成功登录。
您好 <span id='account'></span>，您已成功登录。
<ul>
<li>关闭应用并不会注销当前用户的登录状态。</li>
<li>注销登录会清除当前用户的登录状态。</li>
<li>如果登录时您选择了 "记住我的状态"，可以在这里设置 "解锁手势图案"。</li>
<li>这是mui带登录和设置模板的示例App首页。</li>
<li>您可以点击右上角的 “设置” 按钮，进入设置模板，体验div窗体切换示例。</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 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>
......@@ -44,8 +48,12 @@
$.init();
$.plusReady(function() {
var settings = app.getSettings();
var state = app.getState();
var account = doc.getElementById('account');
account.innerText = state.account;
//退出应用
var exitButton = doc.querySelector('#exit');
/*
var exitButton = doc.getElementById('exit');
exitButton.addEventListener('tap', function(event) {
if (!settings.autoLogin) {
app.setState({});
......@@ -53,17 +61,24 @@
plus.runtime.quit();
});
exitButton.style.display = mui.os.ios ? 'none' : 'block';
*/
//设置
var settingButton = doc.querySelector('#setting');
settingButton.style.display = settings.autoLogin ? 'block' : 'none';
var settingButton = doc.getElementById('setting');
//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
settingButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'setting.html',
id: 'setting'
id: 'setting',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
});
//注销
$.oldBack = mui.back;
/*
var logoutButton = doc.querySelector('#logout');
logoutButton.addEventListener('tap', function(event) {
app.setState({});
......@@ -75,6 +90,8 @@
}
});
});
*/
$.oldBack = mui.back;
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
......
examples/login/manifest.json
View file @ 31620a78
......@@ -10,7 +10,7 @@
"icons": {
"72": "icon.png"
},
"launch_path": "index.html",/*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/
"launch_path": "login.html",/*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/
"developer": {
"name": "",/*开发者名称*/
"email": "",/*开发者邮箱地址*/
......
examples/login/reg.html
View file @ 31620a78
This diff is collapsed.
examples/login/setting.html
View file @ 31620a78
This diff is collapsed.
examples/login/unlock.html
View file @ 31620a78
......@@ -43,7 +43,7 @@
$.init();
$.plusReady(function() {
var settings = app.getSettings();
var forgetButton = doc.querySelector("#forget");
var forgetButton = doc.getElementById("forget");
var locker = doc.querySelector('.mui-locker');
forgetButton.addEventListener('tap', function(event) {
settings.gestures = '';
......@@ -53,7 +53,13 @@
app.setState(state);
$.openWindow({
url: 'login.html',
id: 'login'
id: 'login',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
});
locker.addEventListener('done', function(event) {
......@@ -61,7 +67,13 @@
if (settings.gestures == rs.points.join('')) {
$.openWindow({
url: 'main.html',
id: 'main'
id: 'main',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
rs.sender.clear();
} else {
......
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