<!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" />
<script src="js/pub.js" type="text/javascript" charset="utf-8"></script>
<style>
body {
height: 100%;
background: #fff;
}

.mui-content {
height: 100%;
padding: 0;
background: #fff;
}

img {
margin-top: 30px;
}
</style>

</head>

<body>
<header class="mui-bar mui-bar-nav">
<!--<h1 class="mui-title">欢迎光临</h1>-->
<a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled" href="setting_iandtop.html">
<span class="mui-icon mui-icon-list"></span>
</a>
</header>
<div class="mui-content">

<center><img src="data:images/iandtop.png" /></center><br><br>

<form id='login-form' class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input id='account' type="text" value='' class="mui-input-clear mui-input" placeholder="工号/手机号/邮箱">
</div>
<div class="mui-input-row">
<label>密码</label>
<input id='password' type="password" value="" 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='btnLogin' class="mui-btn mui-btn-block mui-btn-primary" style="height:40px;padding:0 10px;">登 &nbsp;录</button>
<!--<br/>
<div class="link-area">
<a id='reg' href="register.html">注册账号</a> <span class="spliter">|</span>
<a id='forgetPassword'>忘记密码</a>
</div>-->
</div>
<!--<div class="mui-content-padded oauth-area">
<a href="setting_iandtop.html">设置服务器地址</a>
</div>-->
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/pub.js"></script>
<script type="text/javascript" charset="utf-8">
(function(mui, doc) {
var suserName = document.getElementById('account');
var spassWord = document.getElementById('password');
var subLogin = document.getElementById('btnLogin');
var autoSwitch = document.getElementById("autoLogin");
var url = OCS.getUrl();

mui.init({
swipeBack: true //启用右滑关闭功能
});
// 所有方法都放到这里
mui.plusReady(function() {
subLogin.addEventListener('tap', function(event) {
postData(suserName.value, spassWord.value);
});
autoSwitch.addEventListener("toggle", function(event) {
window.localStorage.setItem(OCS.token.SWITCH_STATE, event.detail.isActive);
});

autoLogin();
});

function autoLogin() {
autoSwitch.value = window.localStorage.getItem(OCS.token.SWITCH_STATE);
suserName.value = window.localStorage.getItem(OCS.token.TOKEN_USER);
spassWord.value = window.localStorage.getItem(OCS.token.TOKEN_PW);
if(autoSwitch.value == 'true' || autoSwitch.value == true) {
mui("#autoLogin").switch().toggle();
postData(suserName.value, spassWord.value);
}
}

function postData(name, password) {
mui.post(url + 'Login', {
psncode: name,
password: password
}, function(data) {
window.localStorage.setItem(OCS.token.TOKEN_USER, suserName.value);
window.localStorage.setItem(OCS.token.TOKEN_PW, spassWord.value);
window.localStorage.setItem(OCS.token.TOKEN_TOKEN, data.resultData);

if(data.success + "" != "true") { //如果登陆失败，提示
mui.alert(data.msg);
} else {
mui.post(url + 'IPI', {
token: data.resultData
}, function(dataIPI) {
window.localStorage.setItem(OCS.person.id, dataIPI.resultData.id);
window.localStorage.setItem(OCS.person.addr, dataIPI.resultData.addr);
window.localStorage.setItem(OCS.person.birthdate, dataIPI.resultData.birthdate);
window.localStorage.setItem(OCS.person.email, dataIPI.resultData.email);
window.localStorage.setItem(OCS.person.sex, dataIPI.resultData.sex);
window.localStorage.setItem(OCS.person.usedname, dataIPI.resultData.usedname);
window.localStorage.setItem(OCS.person.mobile, dataIPI.resultData.mobile);
window.localStorage.setItem(OCS.person.psnname, dataIPI.resultData.psnname);
}, 'json');
mui.openWindow({
url: "index.html"
});
}
}, 'json');
}
})(mui, document);
</script>

<script type="text/javascript">
var first = null;
var showMenu = false;
mui.back = function() {
if(showMenu) {
closeMenu();
} else {
//首次按键，提示‘再按一次退出应用’
if(!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if(new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
}
};

var slider = mui("#slider");
slider.slider({
interval: 3000
});
</script>

</html>

mui实现自动登录的更多相关文章

  1. springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装

    springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...

  2. HBuilder开发APP自动登录时跳过"登录页面"

    刚接触开发公司APP项目,用HBuilder开发工具. manifest.json中的入口页面就是"登录页面",现在获取到自动登录状态是true,但是真机联调时"登录页面 ...

  3. Linux开机自动登录（文本模式）

    • Linux系统启动登录过程 以RedHat/CentOS为例,Linux系统Level3模式下从启动到登录的整个过程大致如下: 1> 加载BIOS信息:包含了CPU/显卡/内存/硬盘/网卡等 ...

  4. expect实现自动登录

    自动登录主机(ssh) 建脚本item2login.sh,包含如下内容 #!/usr/bin/expect set timeout 30 spawn ssh -p [lindex $argv 0] [ ...

  5. cookie自动登录的实现

         cookie自动登录是指把用户登录的信息按期限(自定)保存在客户端,当用户请求登录时判断客户端用没有cookie对象,有的话填充值,否则登录界面的输入框为空,不进行填充.      登录界面 ...

  6. windows 2003自动登录的具体步骤

    在win2003系统中,使用最多的可能就是远程操作了,关于远程操作的那些事很多用户还是有些迷茫的.如果win2003系统远程重启后,要重新登录系统十分的麻烦,如何才能实现重启后的自动登录呢?让高手告诉 ...

  7. 如何设置phpMyAdmin自动登录和取消自动登录

    如何设置phpMyAdmin自动登录? 首先在根目录找到config.sample.inc.php复制一份文件名改为config.inc.php(如果已经存在 config.inc.php 文件,则直 ...

  8. 利用activeX控件在网页里自动登录WIN2003远程桌面并实时控制

    首先要自己配置并打开受控端的WEB远程桌面服务,这个在“添加/删除windows组件”里有,我只在windows 2003 server里试过,没试过XP.下面我们在客户端安装微软提供的远程桌面客户端 ...

  9. 简单的行为控制管理方法，自动登录，session定时验证码过期

    代码很简单 实现的方式很多,用cookies 用static 变量 file文件缓存 等等 比如 //简单行为管理,如果请求此方法次数多于5次,就显示验证码 吧当前方法的name传进来,有效时间是5分 ...

随机推荐

  1. (转)Android Studio系列教程一下载与安装 背景Android Studio VS Eclipse准备下载创建HelloWorld项目

    背景 相信大家对Android Studio已经不陌生了,Android Studio是Google于2013 I/O大会针对Android开发推出的新的开发工具,目前很多开源项目都已经在采用,Goo ...

  2. mysql报Fatal error encountered during command execution的解决办法

    连接字符串里加上 Allow User Variables=True 解决. 否则时不时的报错,存储过程名长一点也报错,又有时报有时不报,参数传1位数就正常2位数就报错等…… 折腾mysql蛋疼啊

  3. html页面button样式

    在过去的Web开发中,通常使用Photoshop来设计按钮的样式.不过随着CSS3技术的发展,你完全可以通过几行代码来定制一个漂亮的按钮,并且还可以呈现渐变.框阴影.文字阴影等效果.此类按钮最大的优势 ...

  4. DeDe内容调用img

    文章内容页调用缩略图方法如下两种.第一种没有大小设置.原图显示.第二种.可以设大小, {dede:field.image/} <img src="{dede:field.litpic ...

  5. linux命令——Grep 命令 用法大全

    1. 参数: -I :忽略大小写 -c :打印匹配的行数 -l :从多个文件中查找包含匹配项 -v :查找不包含匹配项的行 -n:打印包含匹配项的行和行标 2.RE(正则表达式) \ 忽略正则表达式中 ...

  6. Automatically watermark all uploaded photos (给所有上传的相片加水印)

    Hello, This mod automatically watermark all uploaded photos. Price: FREE, enjoy. You will have to ed ...

  7. 使用django-mssql时候报pythoncom模块不存在

    pip install django-mssql是链接sqlserver的数据库db引擎,这里用到了pythoncom模块,所以还需要安装 pip install pypiwin32 settings ...

  8. powerpoint取色器有什么用|ppt取色器使用教程

    在使用powerpoint过程中常常发现一些功能我们很少用到,其实是自己不会用的原因,关于powerpoint取色器有什么用呢?接下来我们一起来学一下ppt取色器使用教程. powerpoint取色器 ...

  9. MapReduce Shuffle And Sort

    引言   MapReduce作出保证:进入每个Reducer的数据行都是有序的(根据数据行的键值进行排序).MapReduce将Mapper的输出进行排序并传递给Reducer作为输入的过程称为Shu ...

  10. link@import

    1.两者区别 1)link属于XHTML标签,而@import是CSS提供的;2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; 3)import只在IE ...