apicloud彈出層

時間  2021-04-07
標籤 javascript css html java api app dom url spa 欄目 JavaScript 简体版
原文   原文鏈接

個人，點擊設置彈出

<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程