海创软件组--20200802--网盘界面

界面显示

在这里插入图片描述

引入组件库

这个界面的展示是引入了layui组件库,然后自己修改一些样式就可以使用了

如何引入内联框架

在引入内联框架的时候,开始一直有问题,后来仔细的判断了一下这个问题到底出现在哪里,解决了
在这里插入图片描述
一般img等标签可以直接通过img.src=“xxx”来更改路劲,我也用了这个方法,但是发现iframe框架无法使用这个,我是通过使用控制台发现了在iframe里路径根本不是在src里面
在这里插入图片描述
而是在iframe.attributes.src.nodeValue里面,所以需要使用这个来更改路径

点击每个板块,切换iframe

//引入内联框架
var iframe=document.querySelector("iframe")
//上传框架
function isload(){
  iframe.attributes.src.nodeValue="./onload.html"
}
//我的网盘框架
function mynetdisk(){
  iframe.attributes.src.nodeValue="./netdisk.html"
}

这样的做法就很方便,引用了外面的整个框架,当你点击每一个板块,例如我上面显示的上传文件以及我的网盘,它不需要跳转页面,只是在内容区更换iframe
在这里插入图片描述
在这里插入图片描述

管理员里面的退出按钮

当点击后会弹出框询问是否退出

这里的代码也很简单

<dd><a href="" onclick="isout() ;return false;">退出</a></dd>
//在js里定义这个函数
function isout()
{ 
question = confirm("确实要退出吗?") 
if (question !="0")
{
  window.location.href="./login.html";
}
}

添加文件

添加文件这个板块开始我是有疑问的,首先我在上传文件那里上传了文件后后台,后台会返回给我id与文件名,当我选择下载的时候会将id与文件名传给后台,因为需要有点麻烦,所以我就用了比较简单的样式
这一个板块的引入了bootstrap组件库的样式

<div>
    <ul class="list-group">
        <li class="list-group-item">
          01
          <span class="badge"><span class="glyphicon glyphicon-save" aria-hidden="true"></span></span>
          文件名
        </li>
      </ul>
  </div>

上面01是我的id,后面就是文件名
我在js中使用了向ul动态添加内容的方法,运用了自定义的一个数组items,借助a=""不停的向a添加内容,最后保存再添加到ul中ul.innerHTML+=a

 var ul=document.querySelector(".list-group")
    var items=[{name:"abc",id:"02"},{name:"sada",id:'03'},{name:"afdafa",id:'04'}]
    console.log(items[0].name);
    var a=""
    for (let index = 0; index <items.length; index++) {
      a+="<li class='list-group-item'>"+items[index].id
      +" <span class='badge'>"
          +"<span class='glyphicon glyphicon-save' aria-hidden='true'>"+"</span>"+"</span>"+items[index].name+"</li>"
    }
    ul.innerHTML+=a

然后再给每一个下载图标绑定单击响应函数,然后使用this.parentNode.parentNode.innerText拿到id与文件名,因为我的id与文件名只有使用了一个空格(+" “)这一个span前面其实有个空格,整个this.parentNode.parentNode.innerText内容原本是01 文件名,连在一起的,然后再使用split(” ")分隔开,这样就拿到了id与文件名

 //给每一个span下载图标绑定一个单击响应函数
    var li=document.querySelectorAll(".list-group-item")
    var load=document.querySelectorAll(".glyphicon")
    console.log(load);
    for(var i = 0; i < load.length; i++) {
      load[i].onclick = delA;
				}
        function delA() {
          alert(this.parentNode.parentNode.innerText)
          var result=this.parentNode.parentNode.innerText.split(" ")
          console.log("这是id",result[0]);
          console.log("这是文件名",result[1]);
        }

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>海创网盘</title>
  <link rel="stylesheet" href="./src/css/layui.css">
  <link rel="stylesheet" href="./css/iphone.css">
  <style>
    iframe{
      width: 100%;
      height: 100%;
      position: absolute;
    }
   .layui-side-scroll a{
     background-color:  #393D49 !important;
   }

  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">海创网盘</div>
    <!-- 头部区域(可配合layui已有的水平导航) -->
    <ul class="layui-nav layui-layout-left">
    <li class="layui-nav-item"><a href="javascript:;"  onclick="isload()" >上传文件</a></li>
	  <li class="layui-nav-item"><a href="javascript:;"   onclick="mynetdisk()">我的网盘</a></li>
      <li class="layui-nav-item"><a href="">传输列表</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="./hc.jpg" class="layui-nav-img">
          管理员
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
          <dd><a href="" onclick="isout() ;return false;">退出</a></dd>
        </dl>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item"><a href="javascript:;"  onclick="mynetdisk()">全部文件</a></li>
        <li class="layui-nav-item"><a href="">回收站</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <iframe src=" " frameborder="0"></iframe>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    <p style="color: grey;">Copyright © haichuang.com</p>
  </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="./js/jquery.js"></script>
<script src="./src/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
function isout()
{ 
question = confirm("确实要退出吗?") 
if (question !="0")
{
  window.location.href="./login.html";
}
}

//引入内联框架
var iframe=document.querySelector("iframe")
//上传框架
function isload(){
  iframe.attributes.src.nodeValue="./onload.html"
}
//我的网盘框架
function mynetdisk(){
  iframe.attributes.src.nodeValue="./netdisk.html"
}
console.log(iframe.attributes.src.nodeValue);

</script>
</body>
</html>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页