<!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" />
<style>
.ui-page-login,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.mui-content{height: 100%;}
.area {
margin: 20px auto 0px auto;
}
.mui-input-group {
margin-top: 10px;
}
.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;
}
.link-area {
display: block;
margin-top: 25px;
text-align: center;
}
.spliter {
color: #bbb;
padding: 0px 8px;
}
.oauth-area {
position: absolute;
bottom: 20px;
left: 0px;
text-align: center;
width: 100%;
padding: 0px;
margin: 0px;
}
.oauth-area .oauth-btn {
display: inline-block;
width: 50px;
height: 50px;
background-size: 30px 30px;
background-position: center center;
background-repeat: no-repeat;
margin: 0px 20px;
/*-webkit-filter: grayscale(100%); */
border: solid 1px #ddd;
border-radius: 25px;
}
.oauth-area .oauth-btn:active {
border: solid 1px #aaa;
}
.oauth-area .oauth-btn.disabled {
background-color: #ddd;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登录</h1>
</header>
<div class="mui-content">
<form id='login-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>
<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>
<div class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
</div>
</div>
<div class="mui-content-padded oauth-area">
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>-->
<script>
mui.init({
statusBarBackground: '#f7f7f7'
});
var loginbut = document.getElementById("login");
var uname = document.getElementById("account");
var upwd = document.getElementById("password");
loginbut.addEventListener('tap', function(event) {
console.log('loginButton click');
var loginOk = true;
var loginInfo = {
account: uname.value,
password:upwd.value
};
app.login(loginInfo, function(err) {
if (err) {
mui.toast(err);
loginOk = false;
return;
}
});
console.log('loginOk ='+loginOk);
if(loginOk)
{
mui.openWindow({
id: 'main',
url:'index.html',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
}
});
</script>
</body>
</html>
sungny
- 发布：2016-09-05 15:15
- 更新：2016-09-06 15:14
- 阅读：2082
最佳回复
Trust - 少说废话
mui.openWindow()会对运行的环境进行判定，如果是安卓或iOS并且5+相关的API可用，则会调用5+相关的方法；浏览器环境，则会直接调用window.location.href。
如果在手机环境运行，请写在plusReady中，请参阅页面初始化
sungny (作者)
@二十而立 ，什么意思？
id: 'main',
url:'index.html',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}删除了，重新写？？不管用，必须先把光标停在用户名处，再点击登录才能打开页面。
sungny (作者)
查看mni.js代码中的函数 openWindow 发现
if (!window.plus) {
return;
}改为
if (!window.plus) {
//return;
}就可以了，请教大神，这么修改有什么遗留问题吗？
April小小2
返回页面按钮tap事件写在plusReady中，首次有效，后面几次就无效了。。如何处理？
2016-09-12 13:42