一、参考资料
二、登录页
1. 效果图
2. 代码
<!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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<style type="text/css">
.mui-content{margin-top: 12px;}
.mui-btn{width: 80px;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登录</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>帐号</label>
<input type="text" class="mui-input-clear" placeholder="请输入帐号名" id="username">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="text" class="mui-input-clear" placeholder="请输入密码" id="password">
</div>
</form>
//注意:登录按钮不能和账号密码输入框放在一个form里面
<div class="mui-content-padded" align="center">
<button type="button" class="mui-btn mui-btn-blue" id="login">登陆</button>
<button type="button" class="mui-btn mui-btn-green" id="reg">注册</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
var reg=document.getElementById("reg");
var login=document.getElementById("login");
reg.addEventListener('tap',function(){
mui.openWindow({
url:'reg.html',
id:'reg'
})
});
login.addEventListener('tap',function(){
var username=document.getElementById("username");
var password=document.getElementById("password");
if(username.value.length==0){
plus.ui.toast("用户名不能为空");
return;
}
if(password.value.length==0){
plus.ui.toast("密码不能为空");
return;
}
mui.ajax('http://192.168.0.7/newssystem/index.php/Home/User/login',{
data:{
username:username.value,
password:password.value
},
dataType:'json',
type:'POST',
timeout:10000,
success:function(data){
//{"reslut":1}
if(data.result==1){
//登录成功
plus.ui.toast("登录成功");
mui.openWindow({
url:'list.html',
id:'list'
})
}else{
//登录失败
plus.ui.toast(data.data);
}
},
error:function(){
}
})
})
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
三、注册页
1. 页面效果
2. 代码
<!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 type="text/css">
.mui-content{margin-top: 12px;}
.mui-btn{width: 95%;}
</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 type="text" class="mui-input-clear" placeholder="请输入账号" id="username">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-clear" placeholder="请输入密码" id="password">
</div>
<div class="mui-input-row">
<label>昵称</label>
<input type="text" class="mui-input-clear" placeholder="请输入昵称" id="nickname">
</div>
</form>
/*注意:注册按钮不能和账号密码输入框放在一个form里面*/
<div class="mui-content-padded" align="center">
<button type="button" class="mui-btn mui-btn-blue" id="reg">注册</button>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
var username=document.getElementById("username");
var password=document.getElementById("password");
var nickname=document.getElementById("nickname");
var reg=document.getElementById("reg");
reg.addEventListener('tap',function(){
if(username.value.length==0){
plus.ui.toast("用户名不能为空");
return;
}
if(password.value.length==0){
plus.ui.toast("密码不能为空");
return;
}
if(nickname.value.length==0){
plus.ui.toast("昵称不能为空");
return;
}
mui.ajax('http://192.168.0.7/newssystem/index.php/Home/User/reg',{
data:{
username:username.value,
password:password.value,
nickname:nickname.value
},
dataType:'json',//数据格式类型
type:'POST',//http请求类型
timeout:10000,//超时设置
success:function(data){
//处理成功返回的数据
//{'result':1,'data':"注册成功"}
if(data.result==1){
plus.ui.toast(data.data);
mui.back();
}else{
plus.ui.toast(data.data);
}
},
error:function(){
}
})
})
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
四、列表页
1. 代码
<!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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
mui.ajax('http://192.168.0.7/newssystem/index.php/Home/News/getlist',{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
var list=document.getElementById("list");
var finallist='';
for(i=data.length-1;i>=0;i--){
finallist=finallist+'<li data-id="'+i+'" class="mui-table-view-cell" ><a class="mui-navigate-right"><div class="mui-media-body">'+data[i].title+'<p class="mui-ellipsis">'+data[i].content+'</p></div></a></li>';
}
list.innerHTML=finallist;
mui('#list').on('tap','li',function(){
mui.openWindow({
url:'detail.html',
id:'detail',
extras:{
title:data[this.getAttribute('data-id')].title,
author:data[this.getAttribute('data-id')].author,
pubtime:data[this.getAttribute('data-id')].pubtime,
content:data[this.getAttribute('data-id')].content
}
})
})
},
error:function(){
}
})
})
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">XXXX</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="list">
</ul>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
五、详情页
1. 代码
<!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>
.mui-content{margin-top: 12px;margin-left: 10px;margin-right: 10px;}
</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">
<p><h3 id="title"></h3></p>
<p><h5 id="author"></h5></p>
<p><h5 id="content"></h5></p>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
var self=plus.webview.currentWebview();
var title=document.getElementById("title");
var content=document.getElementById("content");
var author=document.getElementById("author");
title.innerHTML=self.title;
content.innerHTML=self.content;
author.innerHTML=self.author+" "+ self.pubtime;
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
<link href='javascript:void(0)'>