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

最新推荐文章于 2021-03-21 00:17:14 发布
最新推荐文章于 2021-03-21 00:17:14 发布
阅读量2.5k 收藏 12
点赞数 2

 

一、参考资料

二、登录页

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>
Carefree1990
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MUI框架实现注册登录界面以及规则校验 实例源码下载
02-10
MUI框架实现注册登录界面以及规则校验
MUI 登录注册等例
02-05
MUI 登录注册MUI 登录注册MUI 登录注册MUI 登录注册MUI 登录注册
8、mui 登录页/注册页/列表页/详情页
热门推荐
sue的博客
08-24 2万+
一参考资料 二登录页 效果图 代码 三注册页 页面效果 代码 四列表页 代码 五详情页 代码一、参考资料 http://edu.yuantuan.com/course/98/learn#lesson/828 二、登录页1. 效果图2. 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewpo
MUI登录
这里是菠萝味菠萝啤的博客
12-25 743
注意变量作用域user，pwd写ffunction变量外面就不行 &lt;div class="mui-content mui-content-padded"&gt; &lt;div class="mui-input-group"&gt; &lt;div class="mui-input-row"&gt; &lt;label&gt;用户名&l
Mui之登录
测试
09-27 339
(adsbygoogle = window.adsbygoogle || []).push({}); Mui之登录 当前位置: Home » material » Auxia » Mui之登录 第一次接触接触MUI是为了制作简单的页面，然而我师父问我这个框架支不支持ios，我说支持，然后就给我一个私活，登录的时...
基于mui移动微商城APP模板.zip
10-09
1. **商品展示**：商品列表页和详情页设计得既美观又实用，展示了商品图片、价格、库存等关键信息。通过mui的滑动效果和触控响应，用户可以轻松浏览商品。 2. **购物车**：用户可以方便地添加、删除商品，调整购买...
MUI手机wap商城模板
12-22
6. **join.html**：注册/登录页，用户可以创建账号或登录到商城。MUI提供了表单组件和验证功能，确保数据输入的准确性和安全性。 7. **wisdom.html**：智慧养老服务页面，可能涉及到特定的养老产品或服务，结合...
mui仿小米商城模板
10-05
2. 页面结构：模板包括首页、商品分类页、商品详情页、购物车页面等多个模块，每个模块都由MUI的基础组件构成，如header、list、grid、tabs等。这些组件的组合使用，使得页面结构清晰，层次分明。 3. 动画效果：MUI...
Mui App 电子商务源码
09-01
在电商应用中，商品详情页、分类列表页、搜索结果页等都是关键页面。Mui提供的组件可以帮助我们轻松实现这些页面。例如，商品列表可以通过List组件展示，商品图片可以使用Image组件处理，而商品详情则可能涉及到多个...
基于vue+vue-router+vuex+element-ui+axios，参考小米商城，实现的电商项目，仿小米商城源代码
最新发布
03-23
前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。 实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录...
mui框架手机网页开发，包含登录、注册
05-08
基于MUI框架，实现的html5的手机网页app开发。包含登录、注册页面，可直接真机测试
mui电商系统页面
09-19
mui电商移动端页面，方便新手学习，简单明了，包含首页注册登录购物车个人中心等页面
新闻详情页列表页 刷新 demon
01-15
mui 框架学习 加载更多 页面传值 详情页等以及数据列表页
手机个人中心模板
01-13
手机个人中心模板，ios9风格。超级好看
用php mui ajax注册登录页面,mui---ajax登录请求示例
weixin_28966407的博客
03-21 233
mui.init();var dom_login_btn = document.getElementById("login");dom_login_btn.addEventListener(‘tap‘, function(e) {var cname = document.getElementById("account").value.trim();var pwd = document.getEle...
mui app登录页.
qq_38921534的博客
09-03 3741
&lt;div class="logo"&gt; &lt;img src="static/new_dl/images/logo.png" alt=""&gt; &lt;/div&gt; &lt;div class="wrap"&gt; &lt;div class="name"&am
mui简单的详情页面
u013008898的博客
02-23 3132
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximu...
HBuilder mui入门教程——（5）登录和访问控制
永远行进
07-02 2万+
mui中提供了登录的模板页，但是对于登录后各个页面的访问控制，刷新等并没有官方的推荐方案。我在这里简单说一种初级的解决方案吧，肯定有不足指出，欢迎批评指正。第一节中创建移动APP项目的时候选择的是"mui项目"，只引入了默认的js和css等文件，没有登录模板。要使用默认登录模板，可以创建的时候选择"mui登录模板"。现在创建一个名为muiLogin的"mui登录模板"项目： 可以看到这次多了不少东
用php mui ajax注册登录页面,mui登录界面（验证）
weixin_42361478的博客
03-21 446
html>mui.init();欢迎登录用户名：密码：登录mui(document.body).on('tap','.mui-btn',function(e){mui("#input_exampleinput").each(function(){//若当前input为空，则alert提醒if(!this.value||this.value.trim()==""){var...
mui如何实现页面跳转
07-13
在mui中，可以使用以下方法来实现页面跳转： 1. 使用`mui.openWindow`方法打开一个新窗口，示例代码如下： ```javascript mui.openWindow({ url: 'new_page.html', id: 'new_page' }); ``` 2. 使用`mui.openWindowWithTitle`方法打开一个新窗口，并显示标题栏，示例代码如下： ```javascript mui.openWindowWithTitle({ url: 'new_page.html', id: 'new_page', styles: { titleNView: { titleText: 'New Page' } } }); ``` 3. 使用`mui.openWindow`方法打开一个新窗口，并传递参数，示例代码如下： ```javascript mui.openWindow({ url: 'new_page.html', id: 'new_page', extras: { key1: 'value1', key2: 'value2' } }); ``` 4. 在HTML中使用`a`标签来创建一个链接，并通过`href`属性指定跳转的页面，示例代码如下： ```html <a href="new_page.html">跳转到新页面</a> ``` 以上是一些常见的在mui中实现页面跳转的方法，根据具体需求选择合适的方法来实现页面跳转。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值