前端框架纯js版本

探路者-易
已于 2022-11-07 15:37:49 修改
阅读量294
点赞数 1
文章标签：前端
于 2022-11-07 11:07:00 首次发布
本文链接：https://blog.csdn.net/yangying19911113/article/details/127727444
版权
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/index.css" rel="stylesheet" />
    <style type="text/css">
        
    </style>
</head>

<body>
    <!-- <div class="mianTop">
        <div class="mianTopleft">公司简介：</div>
        <div class="mianToprigth">管理员</div>
    </div> -->
    <div id="mian">
        <div id="left">
            <ul id="menu">
                
            </ul>
        </div>
        <div id="right">
            <div id="top">
                <div id="toplistlfty"></div>
                <div id="toplist"></div>
            </div>
            <div id="bottom">
                
            </div>
        </div>
    </div>

    <!--右键菜单-->
    <section class="rightClickMenu" id="rightClickMenu" style="left: 100px; top: 200px;">
        <div id="bottomView" class="box15">
            <button type="button" class="item black rounds" onclick="buttonF5()" >刷新页面</button>
            <button type="button" class="item black rounds" onclick="buttonThis()" >关闭当前</button>
            <button type="button" class="item black rounds" onclick="buttonALL()">关闭其他</button>
            <button type="button" class="item black rounds" onclick="buttonLeftALL()">关闭左侧</button>
            <button type="button" class="item black rounds" onclick="closeAll()">关闭全部</button>
        </div>
    </section>
</body>
<!-- <script src="js/indexDom.js"></script> -->
<script>
/**废除网页的右键方法*/
document.oncontextmenu = function(e) {
  e.preventDefault();
};
  /**创建菜单对象列表**/
  var data = {
        menuList:[
            { id:'Tab0',title:'首页',url:'shouye.html',check:false,iframeid:'iframeTab0',index:0},
            { id:'Tab1',title:'语文',url:'a.html',check:false,iframeid:'iframeTab1',index:1},
            { id:'Tab2',title:'数学',url:'b.html',check:false,iframeid:'iframeTab2',index:2},
            { id:'Tab3',title:'英语',url:'c.html',check:false,iframeid:'iframeTab3',index:3},
            { id:'Tab4',title:'化学',url:'d.html',check:false,iframeid:'iframeTab4',index:4},
            { id:'Tab5',title:'生物',url:'e.html',check:false,iframeid:'iframeTab5',index:5},
            { id:'Tab6',title:'按钮样式',url:'t.html',check:false,iframeid:'iframeTab6',index:6},
        ],
        menuHistory:[
          { id:'Tab0',title:'首页',url:'shouye.html',check:false,iframeid:'iframeTab0',index:0},
        ],
        index:0,
        key:0,
        /**创建右键菜单数据对象**/
        rightClickMenu:{
          tab: Object,
          index:Number,
          ids:Number
        }
  }

   Object.defineProperty(data, "key", {
    get(){
      return data.index;
    },
    set(val){
      console.log("监听到数据发生变化",val)
      /**刷新tab*/
      view();
      /**修剪多出来的tab**/
      deleteView();
      
      /**刷新iframe*/
      viewiframe("bottom");
      /**修剪多出来的iframe**/
      deleteViewiframe("bottom");
      document.getElementById("rightClickMenu").style.display = "none";
    }
  }) 

  /**默认执行的代码**/
  window.onload = function(){
    //创建菜单。根据数据创建
    menu();
    //刷新tab
    view();
    //刷新iframe
    viewiframe("bottom");
  }

    /**
     * 把点击事件添加到menuHistory中。
     * 第一部获取点击的值。
     * 第二步写入数据 push
     * **/
   function addTab(params) {
    //先检查后写入
    console.log(params)
    var temp = false;
    for(var i = 0 ; i < data.menuHistory.length; i++){
      if(data.menuHistory[i].index === params){
        temp = true;
      }
    }
    //不相等，则表示没有
    if(!temp){
      //写入数据 
      data.menuHistory.push(data.menuList[params]);
    }
    //设置选中的状态
    data.index =  params ;
    data.key =  params ;
   }

   /**
    * 点击显示的iframe
    * **/
   function showIframe(params) {
    data.index =  params ;
    data.key =  params ;
   }


   /**
    * 动态添加菜单栏
    * **/
   function menu(){
    console.log("执行了menu")
    //获取
    var html = "";
    var menu = document.getElementById("menu").innerHTML;
    for(var i = 0 ; i < data.menuList.length; i ++){
      html= html + "<li><span onclick='addTab("+ data.menuList[i].index +")'>"+ data.menuList[i].index +"."+data.menuList[i].title +"</span></li>";
    }
    document.getElementById("menu").innerHTML = menu + html;
   }


   /**
    * 创建右键菜单功能
    * **/
   function ondown(params,e,index) {
    //等于2表示右键
    if (e.button == 2) {
      //展示右键菜单。
      var rightClickMenu = document.getElementById("rightClickMenu");
      rightClickMenu.style.display = "block" ;
      //设置坐标
      rightClickMenu.style.left = getElementLeft(params) + "px";
      rightClickMenu.style.top = getElementTop(params) + 40 + "px";
      //显示完成。
      data.rightClickMenu.tab = params;
      data.rightClickMenu.index = index;
      //获取当前对象的索引位置。
      //data.rightClickMenu.ids = 0;
      //父标签的子元素集合
      data.rightClickMenu.ids = [].indexOf.call(params.parentNode.childNodes,params);
    }
   }

   /**
    * 关闭当前页 
    * **/
   function buttonThis() {
    var ids = data.rightClickMenu.ids;
    console.log("当前对象的下标是：",ids);
    var index = data.menuHistory[ids].index;
    //删除下标对应的tab.这个是js自带的函数
    data.menuHistory.splice(ids,1);
    //判断是否删除当前光标
    if(index === data.index){
      if(ids + 1 < data.menuHistory.length){
        //后面后tab ，光标向后走
        data.index = data.menuHistory[ids].index;
      }else{
        //最后一个位置光标向前走。
        data.index = data.menuHistory[ids-1].index;
      }
    }
    data.key = data.index;
   }

   /**
    * 关闭其他
    * */
   function buttonALL() {
    //获取index。
    var index = data.rightClickMenu.index;
    var ids = data.rightClickMenu.ids;
    //删除前面的值;
    data.menuHistory.splice(1,ids-1);
    //删除后面的值;
    data.menuHistory.splice(2,data.menuHistory.length);
    data.index = index ;
    data.key = index ;
   }

   /**关闭左侧**/
   function buttonLeftALL() {
    //获取index。
    var index = data.rightClickMenu.index;
    var ids = data.rightClickMenu.ids;
    //删除前面的值;
    data.menuHistory.splice(1,ids-1);
    //刷新光标
    data.index = index ;
    //刷新监听
    data.key = data.index ;
   }

   /**
    * 关闭全部
    * **/
   function closeAll() {
    //第一个位置是首页。
    data.menuHistory.splice(1,data.menuHistory.length);
    //刷新光标为首页
    data.index = data.menuHistory[0].index ;
    data.key = data.index ;
   }

   /**
    * 刷新按钮
    * **/
   function view(){
    console.log("执行了：view,当前坐标",data.index);
    
    var tabList = document.getElementsByClassName("tab");
    
    for(var i = 0 ; i < data.menuHistory.length; i++){
        try {
          //检查tab是否存在，如果不存在就会报错。
          tabList[i].id 
        } catch (error) {
          //console.log("监控到tab不存在，需要创建",error.log ,data.menuHistory[i].id);
          //html = html + "<button type='button' class='tab button black round' id='" + data.menuHistory[i].id + "' onclick='showIframe("+data.menuHistory[i].index +")' onmousedown='ondown(this,event,"+data.menuHistory[i].index+")'>" + data.menuHistory[i].index +"."+data.menuHistory[i].title + "</button>";
          var html ="";
          if(data.menuHistory[i].index === 0){
            html = "<button type='button' class='tab button black round' id='" + data.menuHistory[i].id + "' onclick='showIframe("+data.menuHistory[i].index +")'>" + data.menuHistory[i].index +"."+data.menuHistory[i].title + "</button>";
          }else{
            html = "<button type='button' class='tab button black round' id='" + data.menuHistory[i].id + "' onclick='showIframe("+data.menuHistory[i].index +")' onmousedown='ondown(this,event,"+data.menuHistory[i].index+")'>" + data.menuHistory[i].index +"."+data.menuHistory[i].title + "</button>";
          }
          document.getElementById("toplist").appendHTML(html);
        }
    }
    //完成了tab的创建工作，确保了数据和tab总量是一样的。
    for(var i = 0 ; i < data.menuHistory.length; i++){
      if(data.menuHistory[i].index === data.index){
        //console.log("我被执行了data.index",data.index)
        document.getElementById(data.menuHistory[i].id).className = "tab button black round";
      }else{
        document.getElementById(data.menuHistory[i].id).className = "tab button gray round";
      }
    }

    if(data.index == 0 ){
      document.getElementById("top").style.display = "block";
    }else{
      document.getElementById("top").style.display = "block";
    }
    
   }

   /**
    * 
    * 删除tab的动作
    * **/
    function deleteView(){
      console.log("执行了deleteview");
      var tabList = document.getElementsByClassName("tab");
      //console.log("执行了deleteview,tab历史记录是：",tabList.length);
      for(var i = 0 ; i < tabList.length ; i ++ ){
        var result = false ;
        for( var  x = 0 ;x < data.menuHistory.length ; x ++){
          if(tabList[i].id === data.menuHistory[x].id){
            result = true;
            //console.log("dom存在：",tabList[i].id)
          }
        }
        if(!result){
          //console.log("dom不存在：",tabList[i])
          tabList[i].remove();
          i--;
        }
      }
      //console.log("执行了deleteview,tab历史记录只剩下",tabList.length);
    }

   /**
    * 刷新iframe
    * 判断是否存在，存在就不用创建，不存在，需要创建。而不是强制创建。强制创建的后果就是，数据重新加载。
    * 
    * **/
   function viewiframe(iframePack){
    console.log("执行了：viewiframe");
    var iframeList = document.getElementsByClassName("view");
    for(var i = 0 ; i < data.menuHistory.length; i++){
        try {
          //检查iframe是否存在，如果不存在就会报错。
          iframeList[i].id 
        } catch (error) {
          console.log("监控到iframe不存在，需要创建",error.log ,data.menuHistory[i].iframeid);
          var html ="<iframe src='" + data.menuHistory[i].url + "' frameborder='0' class='view' style='display:block' id='" + data.menuHistory[i].iframeid + "'></iframe>";
          document.getElementById(iframePack).appendHTML(html);
        }
    }
    
    //已完成创建iframe,但是产生了一个新的问题，那就是都显示了。我们只需要选中的显示，其他的都隐藏起来。
    
    for(var i = 0 ; i < data.menuHistory.length; i++){
      //console.log("data.menuHistory[i].index",data.menuHistory[i].index)
      if(data.menuHistory[i].index !== data.index){
        document.getElementById(data.menuHistory[i].iframeid).style.display = "none";
      }else{
        document.getElementById(data.menuHistory[i].iframeid).style.display = "block";
      }
    }
   }

   /**
    * 
    * 删除iframe的动作
    * **/
    function deleteViewiframe(iframePack){
      console.log("执行了deleteViewiframe");
      var tabList = document.getElementById(iframePack).childNodes;
      //console.log("执行了deleteViewiframe历史记录是：",tabList.length);
      for(var i = 0 ; i < tabList.length ; i ++ ){
        var result = false ;
        for( var  x = 0 ;x < data.menuHistory.length ; x ++){
          if(tabList[i].id === data.menuHistory[x].iframeid){
            result = true;
            //console.log("dom存在：过",tabList[i].id)
          }
        }
        if(!result){
          console.log("dom不存在：",tabList[i].id)
          tabList[i].remove();
          i--;
        }
      }
      //console.log("执行了deleteview,tab历史记录只剩下",tabList.length);
    }


   //获取element的x坐标.工具类。直接用就是了
  function getElementLeft(element) {
      var actualLeft = element.offsetLeft;
      var current = element.offsetParent;
      while (current !== null) {
          actualLeft += current.offsetLeft;
          current = current.offsetParent;
      }
      return actualLeft;
  }
  //获取element的y坐标  工具类。直接用就是了。
  function getElementTop(element) {
      var actualTop = element.offsetTop;
      var current = element.offsetParent;
      while (current !== null) {
          actualTop += current.offsetTop;
          current = current.offsetParent;
      }
      return actualTop;
  }

  /**
   * 给Dome添加一个可操作的方法。
   * **/
  HTMLElement.prototype.appendHTML = function(html) {
    var divTemp = document.createElement("div"), nodes = null
        // 文档片段，一次性append，提高性能
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    this.appendChild(fragment);
    // 据说下面这样子世界会更清净
    nodes = null;
    fragment = null;
};
</script>