码迷，mamicode.com
首页 > Windows程序 > 详细

Apicloud_(项目)网上书城

时间：2018-12-13 01:09:00      阅读：526      评论：0      收藏：0      [点我收藏+]

标签：nbsp   amount   doc   href   ring   文件删除   Fix   界面   ready   

 

 

[本文皆在记录自己开发Apicloud项目过程，不具备教学水平性文章]

 

　　创建magical丶Shop项目

　　修改index.html，将<style/>标签中的样式与<body/>标签中的元素删除

　　将项目html文件夹下main.html文件删除，选择“新建APICloud模板文件”，在html文件夹下创建一个新的main.html

 

　　修改App启动后展示第一个界面为main.html，在index.html的apiready函数中添加代码

    apiready = function(){
          api.openWin({
              name: ‘main‘,
              url: ‘./html/main.html‘,
          slidBackEnabled:false
          });

    };

 

 

制作app中header部分

　　

　　头部橙色颜色调

      header {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: #ffaf45;
      }

 

　　居中图片文字部分

      header .center {
          position: relative;
          width: 100%;
          height: 100%;
          background: url(../image/book.png);
          background-size: 74px 19px;
          background-position: center center;
          background-repeat: no-repeat;
      }

 

　　技术分享图片

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      header {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: #ffaf45;
      }

      header .left {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100px;
          height: 50px;
      }

      header .left .arrow {
          position: absolute;
          bottom: 21px;
          left: 11px;
          width: 13px;
          height: 8px;
          background: url(../image/arrow_down.png);
          background-size: 13px 8px;
          background-position: center center;
          background-repeat: no-repeat;
          -webkit-transition: 200ms;
          transition: 200ms;
      }

      header .left .arrow.active {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
      }

      header .left .city {
          position: relative;
          z-index: 2;
          width: 100%;
          height: 50px;
          padding-left: 27px;
          box-sizing: border-box;
          line-height: 50px;
          font-size: 14px;
          color: #fff;
          text-align: left;
      }

      header .center {
          position: relative;
          width: 100%;
          height: 100%;
          background: url(../image/book.png);
          background-size: 74px 19px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      header .right {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40px;
          height: 50px;
          background: url(../image/home_membercenter.png);
          background-size: 30px 30px;
          background-position: center center;
          background-repeat: no-repeat;
      }
      </style>
  </head>
  <body>
    <!--header部分-->
    <header id="header">
        <div class="left">
            <div class="arrow" id="arrow"></div>
            <div class="city" id="city">厦门市</div>
        </div>
        <div class="center"></div>
        <div class="right"></div>
    </header>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
  </script>
  </html>
main.html

 

　　设置标签背景样式

nav {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-flex-flow: row;
          flex-flow: row;
          position: relative;
          width: 100%;
          height: 40px;
          background-color: #ffaf45;
      }

 

　　设置菜单未选择时样式

nav .menu {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: #ff7f00;
          text-align: center;
      }

 

　　设置菜单选择时的样式

nav .menu.selected {
          font-size: 14px;
          color: #fff;
          font-weight: bolder;
      }

 

 　　技术分享图片

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      header {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: #ffaf45;
      }

      header .left {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100px;
          height: 50px;
      }

      header .left .arrow {
          position: absolute;
          bottom: 21px;
          left: 11px;
          width: 13px;
          height: 8px;
          background: url(../image/arrow_down.png);
          background-size: 13px 8px;
          background-position: center center;
          background-repeat: no-repeat;
          -webkit-transition: 200ms;
          transition: 200ms;
      }

      header .left .arrow.active {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
      }

      header .left .city {
          position: relative;
          z-index: 2;
          width: 100%;
          height: 50px;
          padding-left: 27px;
          box-sizing: border-box;
          line-height: 50px;
          font-size: 14px;
          color: #fff;
          text-align: left;
      }

      header .center {
          position: relative;
          width: 100%;
          height: 100%;
          background: url(../image/book.png);
          background-size: 74px 19px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      header .right {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40px;
          height: 50px;
          background: url(../image/home_membercenter.png);
          background-size: 30px 30px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      nav {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-flex-flow: row;
          flex-flow: row;
          position: relative;
          width: 100%;
          height: 40px;
          background-color: #ffaf45;
      }

      nav .menu {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: #ff7f00;
          text-align: center;
      }

      nav .menu.selected {
          font-size: 14px;
          color: #fff;
          font-weight: bolder;
      }
      </style>
  </head>
  <body>
    <!--header部分-->
    <header id="header">
        <div class="left">
            <div class="arrow" id="arrow"></div>
            <div class="city" id="city">厦门市</div>
        </div>
        <div class="center"></div>
        <div class="right"></div>
    </header>
    <nav id="nav">
        <div class="menu selected">武侠</div>
        <div class="menu">科幻</div>
        <div class="menu">悬疑</div>
        <div class="menu">爱情</div>
        <div class="menu">恐怖</div>
    </nav>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
  </script>
  </html>
main.html

 

　　为防止header被系统状态栏遮挡，在页面的apiready函数中加入代码

      apiready = function(){
          $api.fixStatusBar(
            $api.byId(‘header‘)
          );
      };

 

　　  $api.byId(‘header‘)方法获取了header元素，然后通过$api.fixStatusBar()为它设置padding-top，空出状态栏的位置

　　技术分享图片

 

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      header {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: #ffaf45;
      }

      header .left {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100px;
          height: 50px;
      }

      header .left .arrow {
          position: absolute;
          bottom: 21px;
          left: 11px;
          width: 13px;
          height: 8px;
          background: url(../image/arrow_down.png);
          background-size: 13px 8px;
          background-position: center center;
          background-repeat: no-repeat;
          -webkit-transition: 200ms;
          transition: 200ms;
      }

      header .left .arrow.active {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
      }

      header .left .city {
          position: relative;
          z-index: 2;
          width: 100%;
          height: 50px;
          padding-left: 27px;
          box-sizing: border-box;
          line-height: 50px;
          font-size: 14px;
          color: #fff;
          text-align: left;
      }

      header .center {
          position: relative;
          width: 100%;
          height: 100%;
          background: url(../image/book.png);
          background-size: 74px 19px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      header .right {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40px;
          height: 50px;
          background: url(../image/home_membercenter.png);
          background-size: 30px 30px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      nav {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-flex-flow: row;
          flex-flow: row;
          position: relative;
          width: 100%;
          height: 40px;
          background-color: #ffaf45;
      }

      nav .menu {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: #ff7f00;
          text-align: center;
      }

      nav .menu.selected {
          font-size: 14px;
          color: #fff;
          font-weight: bolder;
      }
      </style>
  </head>
  <body>
    <!--header部分-->
    <header id="header">
        <div class="left">
            <div class="arrow" id="arrow"></div>
            <div class="city" id="city">厦门市</div>
        </div>
        <div class="center"></div>
        <div class="right"></div>
    </header>
    <nav id="nav">
        <div class="menu selected">武侠</div>
        <div class="menu">科幻</div>
        <div class="menu">悬疑</div>
        <div class="menu">爱情</div>
        <div class="menu">恐怖</div>
    </nav>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
          $api.fixStatusBar(
            $api.byId(‘header‘)
          );
      };
  </script>
  </html>
main.html

 

技术分享图片 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <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" />
    <style type="text/css">

    </style>
</head>
<body>

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
          api.openWin({
              name: ‘main‘,
              url: ‘./html/main.html‘,
          slidBackEnabled:false
          });

    };
</script>
</html>
index.html

 

 

制作Tab页面并添加点击事件和动画效果

 　   下面实现手势滑动的功能

　　创建main_frame.html模板，在main_frame.html文件夹中添加JavaScript代码

　　这里通过api.pageParam获取到传入的数据，通过$api.jsonToStr()将JSON对象转换为字符串，然后将它显示到body元素中

      apiready = function(){
          var param = $api.jsonToStr(api.pageParam);
          $api.html($api.dom("body"),param);  //将数据赋值给页面的body元素

      };

 

　　在main.html模板中接收得到的数据，在main.html文件夹中添加JavaScript代码

      apiready = function(){
          $api.fixStatusBar(
            $api.byId(‘header‘)
          );

          var header = $api.byId(‘header‘);
          var nav = $api.byId(‘nav‘);

          var headerH = $api.offset(header).h;
          var navH = $api.offset(nav).h;

          // 打开FrameGroup
          api.openFrameGroup ({
              name: ‘mainFrameGroup‘,
              scrollEnabled: true,      //支持手势滑动
              rect: {
                   x: 0,
                   y: headerH+navH,
                   w: ‘auto‘,          //自动填充所在Window宽度
                   h: ‘auto‘           //自动填充所在window高度
              },
              index: 0,
              frames: frames,
              preload:frames.length
          }, function(ret, err){        //回调函数
              var menus = $api.domAll($api.byId("nav"),".menu");
              for(var i=0;i<menus.length;i++){
                  $api.removeCls(menus[i], ‘selected‘);
              }
              $api.addCls(menus[ret.index],‘selected‘);
          });
      };

      var frames = [];
      for (var i = 0; i < 5; i++) {
          frames.push({
              name: ‘main_frame_‘ + i,
              url: ‘./main_frame.html‘,
              pageParam: {
                  wareTypeIndex: i
              }
          });
      }

 　　

　　api.openFrameGroup()的第二个参数是一个回调函数

　　此时回调函数作用，每当一个Tab页被跳转后，都会执行这段代码。首先获得所有TabBiaoqian，然后把它们的"selected"样式全部移除，最后找到被跳转倒的标签添加"selected"样式，这样就是先了Tab页面跳转和激活标签的效果。

 

　　技术分享图片

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      header {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: #ffaf45;
      }

      header .left {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100px;
          height: 50px;
      }

      header .left .arrow {
          position: absolute;
          bottom: 21px;
          left: 11px;
          width: 13px;
          height: 8px;
          background: url(../image/arrow_down.png);
          background-size: 13px 8px;
          background-position: center center;
          background-repeat: no-repeat;
          -webkit-transition: 200ms;
          transition: 200ms;
      }

      header .left .arrow.active {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
      }

      header .left .city {
          position: relative;
          z-index: 2;
          width: 100%;
          height: 50px;
          padding-left: 27px;
          box-sizing: border-box;
          line-height: 50px;
          font-size: 14px;
          color: #fff;
          text-align: left;
      }

      header .center {
          position: relative;
          width: 100%;
          height: 100%;
          background: url(../image/book.png);
          background-size: 74px 19px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      header .right {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40px;
          height: 50px;
          background: url(../image/home_membercenter.png);
          background-size: 30px 30px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      nav {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-flex-flow: row;
          flex-flow: row;
          position: relative;
          width: 100%;
          height: 40px;
          background-color: #ffaf45;
      }

      nav .menu {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: #ff7f00;
          text-align: center;
      }

      nav .menu.selected {
          font-size: 14px;
          color: #fff;
          font-weight: bolder;
      }
      </style>
  </head>
  <body>
    <!--header部分-->
    <header id="header">
        <div class="left">
            <div class="arrow" id="arrow"></div>
            <div class="city" id="city">厦门市</div>
        </div>
        <div class="center"></div>
        <div class="right"></div>
    </header>
    <nav id="nav">
        <div class="menu selected">武侠</div>
        <div class="menu">科幻</div>
        <div class="menu">悬疑</div>
        <div class="menu">爱情</div>
        <div class="menu">恐怖</div>
    </nav>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
          $api.fixStatusBar(
            $api.byId(‘header‘)
          );

          var header = $api.byId(‘header‘);
          var nav = $api.byId(‘nav‘);

          var headerH = $api.offset(header).h;
          var navH = $api.offset(nav).h;

          // 打开FrameGroup
          api.openFrameGroup ({
              name: ‘mainFrameGroup‘,
              scrollEnabled: true,      //支持手势滑动
              rect: {
                   x: 0,
                   y: headerH+navH,
                   w: ‘auto‘,          //自动填充所在Window宽度
                   h: ‘auto‘           //自动填充所在window高度
              },
              index: 0,
              frames: frames,
              preload:frames.length
          }, function(ret, err){        //回调函数
              var menus = $api.domAll($api.byId("nav"),".menu");
              for(var i=0;i<menus.length;i++){
                  $api.removeCls(menus[i], ‘selected‘);
              }
              $api.addCls(menus[ret.index],‘selected‘);
          });
      };

      var frames = [];
      for (var i = 0; i < 5; i++) {
          frames.push({
              name: ‘main_frame_‘ + i,
              url: ‘./main_frame.html‘,
              pageParam: {
                  wareTypeIndex: i
              }
          });
      }

  </script>
  </html>
main.html

 

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
          body{

          }
      </style>
  </head>
  <body>
      in frame
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
          var param = $api.jsonToStr(api.pageParam);
          $api.html($api.dom("body"),param);  //将数据赋值给页面的body元素

      };
  </script>
  </html>
main_frame.html

 

　　下面实现点击Tab标签跳转到对应Tab页的goon功能，通过对想要实现点击的标签添加onclick事件，将对应标签的下标传入，然后使用对应的API跳转即可

　　修改main.html中<body/>标签中的<nav/>标签部分，为其注册onclick事件

  <nav id="nav">
        <div class="menu selected" tapmode="selected" onclick="fnSetNavMenuIndex(0);">武侠</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(1);">科幻</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(2);">悬疑</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(3);">爱情</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(4);">恐怖</div>
    </nav>

 

　　html代码中的tapmode溢出了html页面的点击延时，使体验更接近原生

　　<script/>标签中添加分类菜单点击的响应函数

      function fnSetNavMenuIndex(index_) {
          // 首先更新菜单选中状态
          var menus = $api.domAll($api.byId("nav"),".menu");
          $api.addCls(menus[index_], ‘selected‘);
          // 切换FrameGroup中的当前Frame
          api.setFrameGroupIndex({
              name: ‘mainFrameGroup‘,
              index: index_,
              scroll: true
          });
      }

 

 　　api.setFrameGroupIndex()函数用来激活Tab页面，name参数是之前创建FrameGroup时设置的名称，index参数是被激活页面的下标，scroll参数表示frame切换过程中是否有平滑滚动效果

　　技术分享图片

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      header {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: #ffaf45;
      }

      header .left {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100px;
          height: 50px;
      }

      header .left .arrow {
          position: absolute;
          bottom: 21px;
          left: 11px;
          width: 13px;
          height: 8px;
          background: url(../image/arrow_down.png);
          background-size: 13px 8px;
          background-position: center center;
          background-repeat: no-repeat;
          -webkit-transition: 200ms;
          transition: 200ms;
      }

      header .left .arrow.active {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
      }

      header .left .city {
          position: relative;
          z-index: 2;
          width: 100%;
          height: 50px;
          padding-left: 27px;
          box-sizing: border-box;
          line-height: 50px;
          font-size: 14px;
          color: #fff;
          text-align: left;
      }

      header .center {
          position: relative;
          width: 100%;
          height: 100%;
          background: url(../image/book.png);
          background-size: 74px 19px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      header .right {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40px;
          height: 50px;
          background: url(../image/home_membercenter.png);
          background-size: 30px 30px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      nav {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-flex-flow: row;
          flex-flow: row;
          position: relative;
          width: 100%;
          height: 40px;
          background-color: #ffaf45;
      }

      nav .menu {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: #ff7f00;
          text-align: center;
      }

      nav .menu.selected {
          font-size: 14px;
          color: #fff;
          font-weight: bolder;
      }
      </style>
  </head>
  <body>
    <!--header部分-->
    <header id="header">
        <div class="left">
            <div class="arrow" id="arrow"></div>
            <div class="city" id="city">厦门市</div>
        </div>
        <div class="center"></div>
        <div class="right"></div>
    </header>
    <nav id="nav">
        <div class="menu selected" tapmode="selected" onclick="fnSetNavMenuIndex(0);">武侠</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(1);">科幻</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(2);">悬疑</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(3);">爱情</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(4);">恐怖</div>
    </nav>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
          $api.fixStatusBar(
            $api.byId(‘header‘)
          );

          var header = $api.byId(‘header‘);
          var nav = $api.byId(‘nav‘);

          var headerH = $api.offset(header).h;
          var navH = $api.offset(nav).h;

          // 打开FrameGroup
          api.openFrameGroup ({
              name: ‘mainFrameGroup‘,
              scrollEnabled: true,      //支持手势滑动
              rect: {
                   x: 0,
                   y: headerH+navH,
                   w: ‘auto‘,          //自动填充所在Window宽度
                   h: ‘auto‘           //自动填充所在window高度
              },
              index: 0,
              frames: frames,
              preload:frames.length
          }, function(ret, err){        //回调函数
              var menus = $api.domAll($api.byId("nav"),".menu");
              for(var i=0;i<menus.length;i++){
                  $api.removeCls(menus[i], ‘selected‘);
              }
              $api.addCls(menus[ret.index],‘selected‘);
          });
      };

      var frames = [];
      for (var i = 0; i < 5; i++) {
          frames.push({
              name: ‘main_frame_‘ + i,
              url: ‘./main_frame.html‘,
              pageParam: {
                  wareTypeIndex: i
              }
          });
      }

      // 分类菜单点击的响应函数，切换Frame
      function fnSetNavMenuIndex(index_) {
          // 首先更新菜单选中状态
          var menus = $api.domAll($api.byId("nav"),".menu");
          $api.addCls(menus[index_], ‘selected‘);
          // 切换FrameGroup中的当前Frame
          api.setFrameGroupIndex({
              name: ‘mainFrameGroup‘,
              index: index_,
              scroll: true
          });
      }

  </script>
  </html>
main.html

 

　　下面实现具体Tab页的内容

 　　在main_frame.html中<body/>标签中添加内容

  <body>
    <header id="header">
        <img id="banner" class="banner" src="../image/adver2.jpg">
    </header>
    <section id="list">
      <div class="ware">
        <div class="content">
          <img class="thumbnail" src="../image/book1.png">
          <div class="info">
            <div class="name">安迪生童话</div>
            <div class="description">描述：这是一本很浪漫的童话故事</div>
              <div class="price-tag">
                <span class="prive">Y100</span>
                <span class="unit">/本</span>
              </div>
              <div class="origin-price">图书价:
                <del>Y110</del>
              </div>
          </div>
          <div class="control">
            <img class="add" src="../image/add.png">
          </div>
        </div>
      </div>
    </section>
    <div class="push-status" id="pushStatus">上拉加载更多</div>

  </body>

 

　　为显示内容添加样式

技术分享图片 
      <style>
      header {
          width: 100%;
          height: 130px;
          box-sizing: border-box;
          padding: 4px 10px;
      }

      header .banner {
          width: 100%;
          height: 100%;
      }

      section {
          position: relative;
          width: 100%;
          height: auto;
          box-sizing: border-box;
          padding: 0 8px;
      }

      .content {
          width: 100%;
          height: 100%;
      }

      .ware {
          position: relative;
          width: 100%;
          height: 145px;
          box-sizing: border-box;
          padding-top: 15px;
          padding-bottom: 15px;
          border-bottom: 1px solid #d1d1d1;
      }

      .ware .thumbnail {
          position: absolute;
          top: 20px;
          left: 0px;
          height: 100px;
          width: 100px;
      }

      .ware .info {
          width: 100%;
          height: 114px;
          box-sizing: border-box;
          padding-left: 112px;
          padding-right: 28px;
      }

      .ware .info .name {
          width: 100%;
          height: 15px;
          color: #555555;
          margin-top: 14px;
          font-size: 15px;
      }

      .ware .info .description {
          margin-top: 10px;
          width: 100%;
          height: 13px;
          font-size: 13px;
          color: #9d9d9d;
      }

      .ware .info .price-tag {
          margin-top: 10px;
          width: 100%;
          height: 12px;
          font-size: 12px;
          vertical-align: top;
      }

      .ware .info .price-tag .price {
          color: #e3007f;
      }

      .ware .info .price-tag .unit {
          font-size: 8px;
          color: #cbcbcb;
      }

      .ware .info .origin-price {
          margin-top: 5px;
          width: 100%;
          height: 10px;
          font-size: 10px;
          color: #d3d3d3;
      }

      .ware .control {
          position: absolute;
          width: 110px;
          height: 23px;
          right: 8px;
          top:90px;
      }

      .ware .control .add {
          position: absolute;
          top: 0;
          right: 0;
          width: 23px;
          height: 23px;
          z-index: 2;
      }

      .push-status {
          width: 100%;
          height: 40px;
          font-size: 16px;
          color: #888;
          line-height: 40px;
          text-align: center;
          background-color: #fff;
      }

      .active {
          opacity: 0.7;
      }
      </style>
main_frame.style

　　　技术分享图片

 

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      header {
          width: 100%;
          height: 130px;
          box-sizing: border-box;
          padding: 4px 10px;
      }

      header .banner {
          width: 100%;
          height: 100%;
      }

      section {
          position: relative;
          width: 100%;
          height: auto;
          box-sizing: border-box;
          padding: 0 8px;
      }

      .content {
          width: 100%;
          height: 100%;
      }

      .ware {
          position: relative;
          width: 100%;
          height: 145px;
          box-sizing: border-box;
          padding-top: 15px;
          padding-bottom: 15px;
          border-bottom: 1px solid #d1d1d1;
      }

      .ware .thumbnail {
          position: absolute;
          top: 20px;
          left: 0px;
          height: 100px;
          width: 100px;
      }

      .ware .info {
          width: 100%;
          height: 114px;
          box-sizing: border-box;
          padding-left: 112px;
          padding-right: 28px;
      }

      .ware .info .name {
          width: 100%;
          height: 15px;
          color: #555555;
          margin-top: 14px;
          font-size: 15px;
      }

      .ware .info .description {
          margin-top: 10px;
          width: 100%;
          height: 13px;
          font-size: 13px;
          color: #9d9d9d;
      }

      .ware .info .price-tag {
          margin-top: 10px;
          width: 100%;
          height: 12px;
          font-size: 12px;
          vertical-align: top;
      }

      .ware .info .price-tag .price {
          color: #e3007f;
      }

      .ware .info .price-tag .unit {
          font-size: 8px;
          color: #cbcbcb;
      }

      .ware .info .origin-price {
          margin-top: 5px;
          width: 100%;
          height: 10px;
          font-size: 10px;
          color: #d3d3d3;
      }

      .ware .control {
          position: absolute;
          width: 110px;
          height: 23px;
          right: 8px;
          top:90px;
      }

      .ware .control .add {
          position: absolute;
          top: 0;
          right: 0;
          width: 23px;
          height: 23px;
          z-index: 2;
      }

      .push-status {
          width: 100%;
          height: 40px;
          font-size: 16px;
          color: #888;
          line-height: 40px;
          text-align: center;
          background-color: #fff;
      }

      .active {
          opacity: 0.7;
      }
      </style>
  </head>
  <body>
    <header id="header">
        <img id="banner" class="banner" src="../image/adver2.jpg">
    </header>
    <section id="list">
      <div class="ware">
        <div class="content">
          <img class="thumbnail" src="../image/book1.png">
          <div class="info">
            <div class="name">安迪生童话</div>
            <div class="description">描述：这是一本很浪漫的童话故事</div>
              <div class="price-tag">
                <span class="prive">Y100</span>
                <span class="unit">/本</span>
              </div>
              <div class="origin-price">图书价:
                <del>Y110</del>
              </div>
          </div>
          <div class="control">
            <img class="add" src="../image/add.png">
          </div>
        </div>
      </div>
    </section>
    <div class="push-status" id="pushStatus">上拉加载更多</div>

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


      };
  </script>
  </html>
main_frame.html

 

 

制作悬浮购物车信息框

　　下面实现悬浮购物车信息Frame，建立minicart_frame.html文件

 　　悬浮购物车信息框样式

  section {
          display: inline-block;
          box-sizing: border-box;
          padding: 4px;
          width: auto;
          height: 33px;
          min-width: 35px;
          line-height: 25px;
          color: #fff;
          font-size: 12px;
          background-image: url(../image/minicart1.png);
          background-repeat: no-repeat;
          background-size: auto 33px;
          background-position: right center;
      }

 

　　悬浮购物车文本内容信息框

  <body>
    <section>
        <span class="prefix">￥</span>
        <span id="amount" class="amount">0</span>
        <span id="count" class="count"></span>
    </section>
  </body>

 

　　在main.html中的apiready函数中插入代码，通过apicloudFrame()将购物车信息Frame打开，显示在指定位置，显示位置和大小通过rect参数确定，之后通过api.bringFrameToFront()将这个Frame移动到最前端。Frame是以固定位置的方式定位在Window中的，它会悬浮在Window的最上层，并且党Tab页上下滚动时页不会随着移动。

          api.openFrame({
              name: ‘minicart_frame‘,
              url: ‘./minicart_frame.html‘,
              rect: {
                  x: 0,
                  y: api.winHeight - 55,
                  w: 150,
                  h: 34
              },
              bounces: false // 关闭弹动
          });
          // 将mini购物车Frame放置在首页Window所有Frame的最上层
          api.bringFrameToFront({
              from: ‘minicart_frame‘
          });
      };

　

　　　技术分享图片

 

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      header {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: #ffaf45;
      }

      header .left {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100px;
          height: 50px;
      }

      header .left .arrow {
          position: absolute;
          bottom: 21px;
          left: 11px;
          width: 13px;
          height: 8px;
          background: url(../image/arrow_down.png);
          background-size: 13px 8px;
          background-position: center center;
          background-repeat: no-repeat;
          -webkit-transition: 200ms;
          transition: 200ms;
      }

      header .left .arrow.active {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
      }

      header .left .city {
          position: relative;
          z-index: 2;
          width: 100%;
          height: 50px;
          padding-left: 27px;
          box-sizing: border-box;
          line-height: 50px;
          font-size: 14px;
          color: #fff;
          text-align: left;
      }

      header .center {
          position: relative;
          width: 100%;
          height: 100%;
          background: url(../image/book.png);
          background-size: 74px 19px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      header .right {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40px;
          height: 50px;
          background: url(../image/home_membercenter.png);
          background-size: 30px 30px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      nav {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-flex-flow: row;
          flex-flow: row;
          position: relative;
          width: 100%;
          height: 40px;
          background-color: #ffaf45;
      }

      nav .menu {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: #ff7f00;
          text-align: center;
      }

      nav .menu.selected {
          font-size: 14px;
          color: #fff;
          font-weight: bolder;
      }
      </style>
  </head>
  <body>
    <!--header部分-->
    <header id="header">
        <div class="left">
            <div class="arrow" id="arrow"></div>
            <div class="city" id="city">厦门市</div>
        </div>
        <div class="center"></div>
        <div class="right"></div>
    </header>
    <nav id="nav">
        <div class="menu selected" tapmode="selected" onclick="fnSetNavMenuIndex(0);">武侠</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(1);">科幻</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(2);">悬疑</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(3);">爱情</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(4);">恐怖</div>
    </nav>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
          $api.fixStatusBar(
            $api.byId(‘header‘)
          );

          var header = $api.byId(‘header‘);
          var nav = $api.byId(‘nav‘);

          var headerH = $api.offset(header).h;
          var navH = $api.offset(nav).h;

          // 打开FrameGroup
          api.openFrameGroup ({
              name: ‘mainFrameGroup‘,
              scrollEnabled: true,      //支持手势滑动
              rect: {
                   x: 0,
                   y: headerH+navH,
                   w: ‘auto‘,          //自动填充所在Window宽度
                   h: ‘auto‘           //自动填充所在window高度
              },
              index: 0,
              frames: frames,
              preload:frames.length
          }, function(ret, err){        //回调函数
              var menus = $api.domAll($api.byId("nav"),".menu");
              for(var i=0;i<menus.length;i++){
                  $api.removeCls(menus[i], ‘selected‘);
              }
              $api.addCls(menus[ret.index],‘selected‘);
          });

          api.openFrame({
              name: ‘minicart_frame‘,
              url: ‘./minicart_frame.html‘,
              rect: {
                  x: 0,
                  y: api.winHeight - 55,
                  w: 150,
                  h: 34
              },
              bounces: false // 关闭弹动
          });
          // 将mini购物车Frame放置在首页Window所有Frame的最上层
          api.bringFrameToFront({
              from: ‘minicart_frame‘
          });
      };

      var frames = [];
      for (var i = 0; i < 5; i++) {
          frames.push({
              name: ‘main_frame_‘ + i,
              url: ‘./main_frame.html‘,
              pageParam: {
                  wareTypeIndex: i
              }
          });
      }

      // 分类菜单点击的响应函数，切换Frame
      function fnSetNavMenuIndex(index_) {
          // 首先更新菜单选中状态
          var menus = $api.domAll($api.byId("nav"),".menu");
          $api.addCls(menus[index_], ‘selected‘);
          // 切换FrameGroup中的当前Frame
          api.setFrameGroupIndex({
              name: ‘mainFrameGroup‘,
              index: index_,
              scroll: true
          });
      }

  </script>
  </html>
main.html

 

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      html,
      body {
          height: 100%;
          background-color: transparent;
      }

      section {
          display: inline-block;
          box-sizing: border-box;
          padding: 4px;
          width: auto;
          height: 33px;
          min-width: 35px;
          line-height: 25px;
          color: #fff;
          font-size: 12px;
          background-image: url(../image/minicart1.png);
          background-repeat: no-repeat;
          background-size: auto 33px;
          background-position: right center;
      }

      .count {
          display: none;
          box-sizing: border-box;
          padding-left: 4px;
          padding-right: 4px;
          width: auto;
          min-width: 25px;
          height: 25px;
          border-radius: 13px;
          background-color: #fff;
          text-align: center;
          color: #e3007f;
      }
      </style>
  </head>
  <body>
    <section>
        <span class="prefix">￥</span>
        <span id="amount" class="amount">0</span>
        <span id="count" class="count"></span>
    </section>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
  </script>
  </html>
minicart_frame.html

 

 

跳转到登陆页面

　　用户登陆body

<body>
    <header id="header">
        <div class="back" tapmode onclick="api.closeWin();"></div>
        <h1>用户登录</h1>
        <div class="right" tapmode onclick="fnOpenRegisterWin();">注册</div>
    </header>
</body>

 

　　编写用户登陆javaScript函数

apiready = function() {
  var header = $api.byId(‘header‘);
  $api.fixStatusBar(header);
  var headerH = $api.offset(header).h;

  // 打开注册Frame
  api.openFrame({
      name: ‘login_frame‘,
      url: ‘./login_frame.html‘,
      rect: {
          marginTop: headerH,
          w: ‘auto‘,
          h: ‘auto‘
      },
      bgColor:‘rgba(0,0,0,0)‘,
    });
};

 

　　main.html页面中，实现个人中心图标(右上角)注册点击事件

    <!--header部分-->
    <header id="header">
        <div class="left">
            <div class="arrow" id="arrow"></div>
            <div class="city" id="city">厦门市</div>
        </div>
        <div class="center"></div>
        <!--右上角注册点击事件-->
        <div class="right" tapmode onclick="fnOpenPersonalCenterWin();"></div>
    </header>

 

　　通过api.openWin()打开个人中心页面，个人中心页面暂时显示为登陆页面

　　在login.html页面中，为返回按钮(右上角)注册点击事件

        <!--为返回按钮(左上角)注册点击事件-->
        <div class="back" tapmode onclick="api.closeWin();"></div>
        <h1>用户登录</h1>
        <div class="right" tapmode onclick="fnOpenRegisterWin();">注册</div>

 

　　技术分享图片

技术分享图片 
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      header {
          position: relative;
          width: 100%;
          height: 50px;
          background-color: #ffaf45;
      }

      header .left {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100px;
          height: 50px;
      }

      header .left .arrow {
          position: absolute;
          bottom: 21px;
          left: 11px;
          width: 13px;
          height: 8px;
          background: url(../image/arrow_down.png);
          background-size: 13px 8px;
          background-position: center center;
          background-repeat: no-repeat;
          -webkit-transition: 200ms;
          transition: 200ms;
      }

      header .left .arrow.active {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
      }

      header .left .city {
          position: relative;
          z-index: 2;
          width: 100%;
          height: 50px;
          padding-left: 27px;
          box-sizing: border-box;
          line-height: 50px;
          font-size: 14px;
          color: #fff;
          text-align: left;
      }

      header .center {
          position: relative;
          width: 100%;
          height: 100%;
          background: url(../image/book.png);
          background-size: 74px 19px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      header .right {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40px;
          height: 50px;
          background: url(../image/home_membercenter.png);
          background-size: 30px 30px;
          background-position: center center;
          background-repeat: no-repeat;
      }

      nav {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-flex-flow: row;
          flex-flow: row;
          position: relative;
          width: 100%;
          height: 40px;
          background-color: #ffaf45;
      }

      nav .menu {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: #ff7f00;
          text-align: center;
      }

      nav .menu.selected {
          font-size: 14px;
          color: #fff;
          font-weight: bolder;
      }
      </style>
  </head>
  <body>
    <!--header部分-->
    <header id="header">
        <div class="left">
            <div class="arrow" id="arrow"></div>
            <div class="city" id="city">厦门市</div>
        </div>
        <div class="center"></div>
        <!--右上角注册点击事件-->
        <div class="right" tapmode onclick="fnOpenPersonalCenterWin();"></div>
    </header>
    <nav id="nav">
        <div class="menu selected" tapmode="selected" onclick="fnSetNavMenuIndex(0);">武侠</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(1);">科幻</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(2);">悬疑</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(3);">爱情</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(4);">恐怖</div>
    </nav>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
          $api.fixStatusBar(
            $api.byId(‘header‘)
          );

          var header = $api.byId(‘header‘);
          var nav = $api.byId(‘nav‘);

          var headerH = $api.offset(header).h;
          var navH = $api.offset(nav).h;

          // 打开FrameGroup
          api.openFrameGroup ({
              name: ‘mainFrameGroup‘,
              scrollEnabled: true,      //支持手势滑动
              rect: {
                   x: 0,
                   y: headerH+navH,
                   w: ‘auto‘,          //自动填充所在Window宽度
                   h: ‘auto‘           //自动填充所在window高度
              },
              index: 0,
              frames: frames,
              preload:frames.length
          }, function(ret, err){        //回调函数
              var menus = $api.domAll($api.byId("nav"),".menu");
              for(var i=0;i<menus.length;i++){
                  $api.removeCls(menus[i], ‘selected‘);
              }
              $api.addCls(menus[ret.index],‘selected‘);
          });

          api.openFrame({
              name: ‘minicart_frame‘,
              url: ‘./minicart_frame.html‘,
              rect: {
                  x: 0,
                  y: api.winHeight - 55,
                  w: 150,
                  h: 34
              },
              bounces: false // 关闭弹动
          });
          // 将mini购物车Frame放置在首页Window所有Frame的最上层
          api.bringFrameToFront({
              from: ‘minicart_frame‘
          });
      };

      var frames = [];
      for (var i = 0; i < 5; i++) {
          frames.push({
              name: ‘main_frame_‘ + i,
              url: ‘./main_frame.html‘,
              pageParam: {
                  wareTypeIndex: i
              }
          });
      }

      // 分类菜单点击的响应函数，切换Frame
      function fnSetNavMenuIndex(index_) {
          // 首先更新菜单选中状态
          var menus = $api.domAll($api.byId("nav"),".menu");
          $api.addCls(menus[index_], ‘selected‘);
          // 切换FrameGroup中的当前Frame
          api.setFrameGroupIndex({
              name: ‘mainFrameGroup‘,
              index: index_,
              scroll: true
          });
      }

      function fnOpenPersonalCenterWin() {
        api.openWin({
            name: ‘login‘,
            url: ‘./login.html‘
        });
      }
  </script>
  </html>
main.html

 

技术分享图片 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
    header {
        width: 100%;
        height: 50px;
        background-color: #ffaf45
    }

    header .back {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 50px;
        background: url(../image/back.png);
        background-position: 12px 16px;
        background-size: 11px 18px;
        background-repeat: no-repeat;
    }

    header h1 {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        font-size: 20px;
    }

    header .right {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 15px;
        text-align: center;
    }
    </style>
</head>

<body>
    <header id="header">
        <!--为返回按钮(左上角)注册点击事件-->
        <div class="back" tapmode onclick="api.closeWin();"></div>
        <h1>用户登录</h1>
        <div class="right" tapmode onclick="fnOpenRegisterWin();">注册</div>
    </header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
  var header = $api.byId(‘header‘);
  $api.fixStatusBar(header);
  var headerH = $api.offset(header).h;

  // 打开注册Frame
  api.openFrame({
      name: ‘login_frame‘,
      url: ‘./login_frame.html‘,
      rect: {
          marginTop: headerH,
          w: ‘auto‘,
          h: ‘auto‘
      },
      bgColor:‘rgba(0,0,0,0)‘,
    });
};


</script>

</html>
login.html

 

技术分享图片 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录Frame</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
    body {
        text-align: center;
    }

    .row {
        width: auto;
        height: 70px;
        box-sizing: border-box;
        margin-left: 32px;
        margin-right: 32px;
        padding-top: 40px;
        border-bottom: 1px solid #888;
    }

    .input {
        width: 100%;
        height: 20px;
        border: none;
        outline: none;
        font-size: 16px;
        line-height: 20px;
    }

    .btn {
        width: auto;
        height: 50px;
        margin-left: 32px;
        margin-right: 32px;
        margin-top: 32px;
        background-color: #ffaf45;
        line-height: 50px;
        color: #fff;
        font-size: 24px;
        text-align: center;
        border-radius: 8px;
    }

    .btn-third-party {
        display: inline-block;
        width: auto;
        height: 50px;
        box-sizing: border-box;
        margin-top: 32px;
        margin-left: auto;
        margin-right: auto;
        padding: 8px 8px 8px 36px;
        font-size: 20px;
        color: #888;
        line-height: 32px;
        text-align: left;
        border: 1px solid #aaa;
        background-image: url(../image/share_friend.png);
        background-repeat: no-repeat;
        background-size: auto 20px;
        background-position: 8px center;
        border-radius: 8px;
    }

    .highlight {
        opacity: 0.7;
    }
    </style>
</head>

<body>
    <div class="row">
        <input id="username" class="input" type="text" placeholder="用户名">
    </div>
    <div class="row">
        <input id="password" class="input" type="password" placeholder="密码">
    </div>
    <div class="btn" tapmode="highlight" onclick="fnLogin();">登录</div>
    <div class="btn-third-party">使用微信登录</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {

};

</script>

</html>
login_frame.html

 

 

 城市选择菜单和事件通信

　　建立cityselector_frame.html文件

 

Apicloud_(项目)网上书城

标签：nbsp   amount   doc   href   ring   文件删除   Fix   界面   ready   

原文地址：https://www.cnblogs.com/1138720556Gary/p/10106325.html
踩
(0)
赞
(1)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！