JS实现网页页面的框架(demo)

简介: JS实现网页页面的框架(demo)

采用JS实现网页页面的框架

采用的技术点有html,css,JS,jQuery


成品:




HTML:


<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="./css/home.css">
  <link rel="stylesheet" href="./css/aaaaaaa.css">
 
  <script src="js/jquery-3.7.0.js"></script>
  </head>
  <body>
  <!-- 注释的东西到时候可以添加导航栏 -->
  <div class="frame">
    <div class="frame_left">
    <!-- 头部一会要换掉 -->
    <div class="frame_left_title">
      <img src="./img/bcb1ecb0-f75d-4ff9-8fde-c0213535183d.png" alt="">
      <p class="left_show">礼盒商城</p>
    </div>
    <div class="frame_list">
      <div class="frame_item">
      <div class="frame_item_prent" onclick="listOpen(event)">
        <div>
        <img src="./img/123.png" alt="">
        <p class="left_show">账号管理</p>
        </div>
        <img class="left_show" src="./img/向上箭头.png" alt="">
      </div>
      <div class="frame_item_child">
        <div class="frame_child_item">
        <img src="./img/123.png" alt="">
        <p>人员管理</p>
        </div>
        <div class="frame_child_item">
        <img src="./img/123.png" alt="">
        <p>人员管理</p>
        </div>
        <div class="frame_child_item">
        <img src="./img/123.png" alt="">
        <p>人员管理</p>
        </div>
      </div>
      </div>
    </div>
    </div>
    <div class="frame_top">
    <div class="frame_info">
      <div class="frame_info_i">
      <img src="./img/展开列.png" alt="" onclick="isToggle()">
      <p>数据统计</p>
      </div>
      <div class="frame_info_in">
      <div class="frame_fr">
        <img src="./img/搜索 (2).png" alt="">
        <img src="./img/文字.png" alt="">
        <img src="./img/日间模式.png" alt="">
        <img src="./img/设置.png" alt="">
        <div class="zzzz">
        <div>admin</div>
        <img src="./img/0775639c-c82c-4a29-937f-d2a3bae5151a.png" alt="" width="40px"
          height="40px" id="touxiang">
        <button id="quit">退出登录</button>
        </div>
      </div>
      </div>
    </div>
    <div class="frame_nav">
      <div class="nav_home" onclick="isHref('数据统计','/','')">数据统计</div>
      <div class="nav_list">
      <!-- <div class="nav_item">
        <p>页面</p>
        <img src="./img/删除.png" alt="">
      </div>
      <div class="nav_item">
        <p>页面</p>
        <img src="./img/删除.png" alt="">
      </div>
      <div class="nav_item">
        <p>页面</p>
        <img src="./img/删除.png" alt="">
      </div> -->
      </div>
    </div>
    </div>
    <div class="frame_content">
   
  
   
    </div>
  </div>
  <!-- 退出登录 -->
  <div class="box_x" style="display: none;">
    <div id="xiugai"
    style="background-color: #000;opacity: 40%;width: 100%;height: 100%;position: fixed;top: 0;left: 0; z-index: 5;">
    </div>
    <div class="hint">
    <div class="hint-h">
      <p>提示操作</p>
    </div>
    <div class="hint-i">
      <img src="./img/307感叹号-圆框.png" alt="" width="20px" height="20px">
      <p>您确定要退出运营管理公司?</p>
    </div>
    <div class="hint-n">
      <button id="quxiao">取消</button>
      <button id="queding">确定</button>
    </div>
    </div>
  </div>
  <script src="js/home.js"></script>
  </body>
</html>


CSS:


/* 注释的东西到时候可以添加导航栏 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.frame {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.frame_left {
  width: 220px;
  height: 100%;
  background-color: #eeeeee;
  overflow-y: scroll;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: all 1s;
}
.frame_left ::-webkit-scrollbar {
  display: none;
}
.frame_left_title {
  width: 240px;
  height: 60px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.frame_left_title img {
  width: 60px;
  /* height: 60px; */
}
.frame_left_title p {
  font-size: 20px;
  margin-left: 10px;
}
.frame_list {
  width: 100%;
  width: 220px;
}
.frame_item_prent {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
}
.frame_item_prent:hover {
  background-color: #CCCCCC;
  color: #fff;
}
.frame_item_prent div {
  display: flex;
}
.frame_item_prent img {
  width: 30px;
}
.frame_item_prent p {
  line-height: 30px;
  margin-left: 20PX;
}
.frame_item_prent>img {
  width: 18px;
  transform: rotate(180deg);
}
.frame_item {
  width: 100%;
  position: relative;
}
.frame_item_hover {
  display: none;
  position: absolute;
  z-index: 10;
  top: 0px;
  left: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 5px 2px #b5b5b5;
}
.frame_item_hover .frame_child_item {
  padding: 0px 20px;
}
.frame_child_item:hover {
  background-color: #cccccc;
  color: #3796FF;
}
.frame_item_child {
  width: 100%;
  display: none;
  white-space: nowrap;
}
.frame_child_item {
  width: 100%;
  padding-left: 40px;
  height: 50px;
  display: flex;
  align-items: center;
}
.frame_child_item img {
  width: 30px;
  height: 30px;
}
.frame_child_item p {
  margin-left: 10px;
  white-space: nowrap;
}
.frame_top {
  width: calc(100% - 220px);
  height: 50px;
  /* line-height: 60px; */
  background-color: #EEEEEE;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  transition: all 1s;
  /*  display: flex;
  justify-content: space-between; */
}
.frame_info {
  width: 100%;
  height: 50px;
  /* background-color: #eeeeee; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border-bottom: 1px solid #DCDFE6; */
  /* position: absolute; */
}
.frame_info img {
  width: 25px;
  height: 25px;
  margin: 10px 20px;
}
.frame_info_i {
  width: 160px;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
}
/* 
.frame_fr{
  display: flex;
  justify-content: space-between;
} */
.frame_info_in {}
.frame_fr {
  padding-right: 1%;
  display: flex;
  width: 450px;
  justify-content: space-evenly;
  align-items: center;
}
/* 退出弹窗 */
.zzzz {
  width: 100px;
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: center;
}
#quit {
  background-color: white;
  box-shadow: 5px 5px 20px #2c3e50;
  width: 90px;
  height: 35px;
  border: 1px solid #e2e2e2;
  opacity: 0;
  transition: 0.5s;
  top: 50px;
  position: absolute;
  right: 5px;
  z-index: 4;
  border-radius: 5px;
}
/* 提示弹窗 退出登录 批量删除 */
.hint {
  background-color: white;
  width: 450px;
  height: 150px;
  position: fixed;
  top: 45%;
  left: 40%;
  border-radius: 10px;
  z-index: 6;
}
.hint-h p {
  padding: 10px;
  font-size: 22px;
}
.hint-i {
  display: flex;
  padding: 10px;
}
.hint-i p {
  margin-left: 15px;
}
.hint-n {
  padding: 10px;
  margin-left: 60%;
}
.hint-n button {
  width: 72px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #e2e2e2;
}
#queding {
  background-color: #409EFF;
  color: white;
}
.frame_nav {
  /* top: 60px; */
  width: 100%;
  height: 50px;
  display: flex;
  /* line-height: 50px; */
  /* position: fixed; */
  /* padding: 0 20px; */
  /* margin-top: 15px; */
  background-color: #eeeeee;
}
.frame_content {
  width: calc(100% - 220px);
  height: calc(100% - 100px);
  /* 原本为100高度,现在为50,删除了导航栏的高度 */
  background-color: #F2F3F5;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  padding: 20px;
  transition: all 1s;
  /* overflow: scroll; */
}
/* 面包屑,头顶导航栏 */
.nav_list {
  /* width: 100%; */
  height: 50px;
  padding: 5px 0;
  display: flex;
}
.nav_item {
  padding: 0 10px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  background-color: #ccc;
}
.nav_item img {
  width: 20px;
}
.nav_item p {
  /* margin-right: 8px; */
}
.nav_home {
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  background-color: #ccc;
  height: 40px;
  line-height: 40px;
  margin: 5px 5px;
}
.nav_home img {
  width: 20px;
}
.nav_home p {
  margin-right: 8px;
}
.active {
  background-color: #fff;
  color: #3796FF;
}


JS:


// 所有的名称是下划线还是横线要注意
// 二级列表展开事件
function listOpen(e) {
  $(e.target).next(".frame_item_child").toggle(500);
}
// 菜单折叠事件
function isToggle() {
  if ($(".frame_left").width() < 220) {
  $(".frame_left").css('width', '220px');
  $(".frame_top").css('width', 'calc(100% - 220px)');
  $(".frame_content").css('width', 'calc(100% - 220px)');
  $(".left_show").show()
  $(".frame_left").css({
    'z-index': '1',
    'overflow-y': 'scroll'
  });
  $(".frame_left_title").css('width', '220px');
  $(".frame_item").css('width', '220px');
  $(".frame_item_hover").hide()
  $(".frame_item_hover").attr('class', 'frame_item_child');
  } else {
  $(".frame_left").css('width', '80px');
  $(".frame_top").css('width', 'calc(100% - 80px)');
  $(".frame_content").css('width', 'calc(100% - 80px)');
  $(".left_show").hide();
  $(".frame_left").css({
    'z-index': '9',
    'overflow-y': 'visible'
  });
  $(".frame_left_title").css('width', '80px');
  $(".frame_item").css('width', '80px');
  $(".frame_item_child").hide();
  $(".frame_item_child").attr('class', 'frame_item_hover');
  }
}
// 这是一个登录请求的接口,请求成功后返回一个树形菜单的数组,下面需要用到
let list = []
$.ajax({
  type: "POST",
  url: 地址
  data: {
  需要请求的参数
  },
  success: (res) => {
  console.log(res);
  list = res.data.menu;
  console.log(list);
  renders()
  }
})
function renders() {
  let name = sessionStorage.getItem("name") || '';
  let parent = sessionStorage.getItem("parent") || '';
  console.log(list);
  let str = '';
  for (let i = 0; i < list.length; i++) {
  if (list[i].children && list[i].children.length > 1) {
    str += `
    <div class="frame_item">
      <div class="frame_item_prent ${list[i].meta.locale == name && parent != name ? 'active' : ''}" onclick="listOpen(event)">
      <div>
        <img src="./img/123.png" alt="">
        <p class="left_show">${list[i].meta.locale}</p>
      </div>
      <img class="left_show" src="./img/向上箭头.png" alt="">
      </div>
      <div class="frame_item_child" style="display:${parent == list[i].meta.locale ? 'block' : 'none'}">
    `;
    for (let k = 0; k < list[i].children.length; k++) {
    str += `
      <div class="frame_child_item ${list[i].children[k].meta.locale == name ? 'active' : ''}" onclick="isHref('${list[i].children[k].meta.locale}','${list[i].children[k].meta.path}','${list[i].meta.locale}')">
      <img src="./img/123.png" alt="">
      <p>${list[i].children[k].meta.locale}</p>
      </div>
    `;
    }
    str += `</div>
      </div>`;
  } else {
    str += `
    <div class="frame_item" onclick="isHref('${list[i].meta.locale}','${list[i].meta.path}','${list[i].meta.locale}')">
      <div class="frame_item_prent ${list[i].meta.locale == name ? 'active' : ''}">
      <div>
        <img src="./img/123.png" alt="">
        <p class="left_show">${list[i].meta.locale}</p>
      </div>
      </div>
    </div>
    <div class="frame_item_child"></div>
    `;
  }
  }
  $('.frame_list').html(str);
  a ()
}
function a (){
  for (let i = 0; i < $('.frame_item').length; i++) {
  $('.frame_item').eq(i).on('mouseover', function() {
    $('.frame_item_hover').eq(i).show()
  })
  $('.frame_item').eq(i).on('mouseout', function() {
    $('.frame_item_hover').eq(i).hide()
  })
  }
}
function isHref(name,path,parent){
  if (path == '/') {
  location.href = './home.html';
  return
  }
  let nav = JSON.parse(sessionStorage.getItem('nav')) || [];
  let status = false;
  sessionStorage.setItem("name", name);
  sessionStorage.setItem("parent", parent);
  for (let i = 0; i < nav.length; i++) {
  if (nav[i].name == name) {
    status = true;
    break;
  }
  }
  if (!status) {
  nav.push({
    name: name,
    path: path,
    parent: parent
  })
  sessionStorage.setItem("nav", JSON.stringify(nav));
  }
  location.href = '.' + path + '.html';
  console.log(name);
  console.log(path);
}
renderNav()
function renderNav() {
  let name = sessionStorage.getItem("name") || '';
  let nav = JSON.parse(sessionStorage.getItem('nav')) || [];
  let str = '';
  for (let i = 0; i < nav.length; i++) {
  str += `
  <div class="nav_item ${name == nav[i].name ? 'active' : ''}">
    <p onclick="isHref('${nav[i].name}','${nav[i].path}','${nav[i].parent}')">${nav[i].name}</p>
    <img src="./img/删除.png" alt="" onclick="del(${i})">
  </div>
  `;
  }
  document.getElementsByClassName("nav_list")[0].innerHTML = str;
  if (name == '数据统计') {
  $(".nav_home").addClass("active");
  } else {
  $(".nav_home").removeClass("active");
  }
}
// 删除
function del(i) {
  let nav = JSON.parse(sessionStorage.getItem('nav')) || [];
  nav.splice(i, 1);
  sessionStorage.setItem("nav", JSON.stringify(nav));
  let name, parent;
  if (nav[i - 1]) {
  name = nav[i - 1].name;
  parent = nav[i - 1].parent;
  } else if (nav[0]) {
  name = nav[0].name;
  parent = nav[0].parent;
  } else {
  name = '数据统计';
  parent = '';
  }
  sessionStorage.setItem("name", name);
  sessionStorage.setItem("parent", parent);
  renderNav();
  renders();
}
// 退出登录、切换登录
let quit = document.getElementById("quit");
let zzzz = document.getElementsByClassName("zzzz")[0];
let box = document.getElementsByClassName("box_x")[0];
// 鼠标放上去显示退出登录
zzzz.addEventListener("mouseenter", () => {
  quit.style.opacity = "1"
})
zzzz.addEventListener("mouseleave", () => {
  quit.style.opacity = "0"
})
// 退出登录/切换用户
quit.addEventListener("click", () => {
  box.style.display = "block"
})
quxiao.addEventListener("click", () => {
  box.style.display = "none"
})
xiugai.addEventListener("click", () => {
  box.style.display = "none"
})
queding.addEventListener("click", () => {
  sessionStorage.removeItem('nav')
  sessionStorage.removeItem('info')
  location.href = './index.html'
})


相关文章
|
1天前
|
缓存 JavaScript 前端开发
js刷新当前页面
js刷新当前页面
|
2天前
|
JSON JavaScript 数据格式
js代码写一段代码,读取当前页面的链接
js代码写一段代码,读取当前页面的链接
|
9天前
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架,它们各自拥有独特的核心功能和使用场景
【6月更文挑战第16天】Phaser是开源的2D游戏引擎,适合HTML5游戏,提供物理引擎、图像渲染和资源管理,适用于2D游戏,如消消乐。Three.js是基于WebGL的3D库,用于创建复杂的3D场景和应用,涵盖从游戏到可视化领域的多种用途。两者分别在2D和3D开发中展现强大功能,选择取决于项目需求。
20 8
|
8天前
|
JavaScript 前端开发
页面加载时执行特定的 JavaScript 代码
页面加载时执行特定的 JavaScript 代码
|
9天前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
4天前
|
JavaScript 前端开发 算法
[练习]用Js获取html页面中表单提交的数据并且返回到控制台
[练习]用Js获取html页面中表单提交的数据并且返回到控制台
7 0
|
4天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
6天前
|
JavaScript 前端开发 Java
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
|
8天前
|
JSON JavaScript 中间件
Node.js Express 框架
Node.js Express 框架
12 0
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
162 63