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

最新推荐文章于 2023-03-31 13:55:10 发布

chainnnn

最新推荐文章于 2023-03-31 13:55:10 发布

阅读量403

点赞数

分类专栏：海创软件组文章标签： jquery html javascript

本文链接：https://blog.csdn.net/m0_46239267/article/details/107732505

版权

海创软件组专栏收录该内容

16 篇文章 0 订阅

订阅专栏

界面显示

在这里插入图片描述

引入组件库

这个界面的展示是引入了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>

chainnnn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
海创软件组--20200802--网盘界面

界面显示引入组件库这个界面的展示是引入了layui组件库，然后自己修改一些样式就可以使用了如何引入内联框架在引入内联框架的时候，开始一直有问题，后来仔细的判断了一下这个问题到底出现在哪里，解决了一般img等标签可以直接通过img.src=“xxx”来更改路劲，我也用了这个方法，但是发现iframe框架无法使用这个，我是通过使用控制台发现了在iframe里路径根本不是在src里面而是在iframe.attributes.src.nodeValue里面，所以需要使用这个来更改路径点击每个板块
复制链接

扫一扫