apicloud弹出层

最新推荐文章于 2023-01-06 19:55:53 发布

weixin_34004750

最新推荐文章于 2023-01-06 19:55:53 发布

阅读量1.6k

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000012694911

版权

我的，点击设置弹出

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 17.63 + 'px';
    </script>
</head>

<body>
  <header class="app-subheader" id="header">
    <div class="subheader-left"></div>
    <div class="subheader-center">我的</div>
    <div class="subheader-right"></div>
  </header>
    <!--个人中心-->
    <section class="app-personalCenter">
        <div class="personalCenter-header">
            <img src="../../image/personCenterImg.png" alt="img" class="header-top" />
            <p class="header-bottom">欢迎你，华仔同学</p>
        </div>
        <ul class="personalCenter-body">
            <li class="body-item" onclick="openCollection()">
                <img class="item-left" src="../../image/centerStart.png" alt="start"/>
                <span class="item-center">收藏</span>
                <img class="item-right" src="../../image/centerMore.png" alt="more" />
            </li>
            <li class="body-item" onclick="openSet()">
                <img class="item-left" src="../../image/centerSet.png" alt="start" />
                <span class="item-center">设置</span>
                <img class="item-right" src="../../image/centerMore.png" alt="more"  />
            </li>
            <li class="body-item" onclick="openAbout()">
                <img class="item-left" src="../../image/centerPerson.png" alt="start" />
                <span class="item-center">关于</span>
                <img class="item-right" src="../../image/centerMore.png" alt="more" />
            </li>
            <li class="body-item" onclick="openDialog()">
                <img class="item-left" src="../../image/centerInfo.png" alt="start" />
                <span class="item-center">当前版本1.0,已经是最新版本</span>
                <img class="item-right" src="../../image/centerMore.png" alt="more"/>
            </li>
        </ul>
    </section>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function() {
        var header = $api.dom('#header');
        $api.fixStatusBar(header);
        var headerH = $api.offset(header).h;
        $("body").css("padding-top",headerH);
        navWidth = api.pageParam.navWidth;
        headerHeight = api.pageParam.headerHeight;
        dialogBox = api.require('dialogBox');
    };
    function openCollection(){
      api.openFrame({
          name: 'collection',
          url: 'collection.html',
          rect: {
              x: navWidth,
              y: 0,
              w: 'auto',
              h: 'auto'
          },
          pageParam: {
              navWidth: navWidth,
              headerHeight: headerHeight
          },
          bounces: false
      });
    }
    function openAbout() {
        api.openFrame({
            name: 'about',
            url: 'about.html',
            rect: {
                x: navWidth,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {
                navWidth: navWidth,
                headerHeight: headerHeight
            },
            bounces: false
        });
    }

    function openSet() {
        api.openFrame({
            name: 'set',
            url: './set.html',
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: api.winHeight
            },
            bgColor: 'rgba(0,0,0,0.6)',
            bounces: false,
            pageParam: {
                navWidth: navWidth,
                headerHeight: headerHeight
            }
        });
    }
</script>
</html>

设置页面

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 17.63 + 'px';
    </script>
    <style>
        html,
        body {
            height: 100%;
            background-color: transparent;
        }
        .app-login{

        }
    </style>
</head>

<body>
    <!--个人信息-->
    <section class="app-login">
        <div class="login-header">
            <div class="header-item">
                <img src="../../image/loginPerson.png" alt="img" />
                <input type="text" placeholder="13737241011" />
            </div>
            <div class="header-item">
                <img src="../../image/loginLock.png" alt="img" />
                <input type="password" placeholder="修改密码" />
            </div>
        </div>
        <div class="login-footer" onclick="api.closeFrame();">退出登录</div>
    </section>

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    apiready = function() {};
</script>

</html>

weixin_34004750

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
apicloud弹出层

我的，点击设置弹出<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user...
复制链接

扫一扫

apicloud弹出层

我的，点击设置弹出

设置页面

“相关推荐”对你有帮助么？