8、mui 登录页/注册页/列表页/详情页

时间：2022-11-09 16:52:53

一、参考资料

二、登录页

1. 效果图

8、mui 登录页/注册页/列表页/详情页

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. 页面效果

8、mui 登录页/注册页/列表页/详情页

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. 代码

<!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. 代码

<!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>
标签：

相关文章