JS实现可编辑的后台管理菜单功能【附demo源码下载】


Posted in Javascript onSeptember 13, 2016

本文实例讲述了JS实现可编辑的后台管理菜单功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS可编辑后台菜单</title>
<style type="text/css">
body {
  font-size: 12px;
}
ul, li, h2 {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
#top {
  width: 900px;
  height: 40px;
  margin: 0 auto;
  background-color: #CCCC00
}
#top h2 {
  width: 150px;
  height: 40px;
  background-color: #99CC00;
  float: left;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
}
#topTags {
  width: 750px;
  height: 40px;
  margin: 0 auto;
  background-color: #CCCC00;
  float: left
}
#topTags ul li {
  float: left;
  width: 100px;
  height: 25px;
  margin-right: 5px;
  display: block;
  text-align: center;
  cursor: pointer;
  padding-top: 15px;
}
#main {
  width: 900px;
  height: 500px;
  margin: 0 auto;
  background-color: #F5F7E6;
}
#leftMenu {
  width: 150px;
  height: 500px;
  background-color: #009900;
  float: left
}
#leftMenu ul {
  margin: 10px;
}
#leftMenu ul li {
  width: 130px;
  height: 30px;
  display: block;
  background: #99CC00;
  cursor: pointer;
  line-height: 30px;
  text-align: center;
  margin-bottom: 5px;
}
#leftMenu ul li a {
  color: #000000;
  text-decoration: none;
}
#content {
  width: 750px;
  height: 500px;
  float: left
}
.content {
  width: 740px;
  height: 490px;
  display: none;
  padding: 5px;
  overflow-y: auto;
  line-height: 30px;
}
#footer {
  width: 900px;
  height: 30px;
  margin: 0 auto;
  background-color: #ccc;
  line-height: 30px;
  text-align: center;
}
.content1 {
  width: 740px;
  height: 490px;
  display: block;
  padding: 5px;
  overflow-y: auto;
  line-height: 30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
  function $(id){return document.getElementById(id)}
  var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器
  var tags=menu.getElementsByTagName("li");//顶部菜单
  var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单
  var j;
  //点击左侧菜单增加新标签
  for(i=0;i<ck.length;i++){
    ck[i].onclick=function(){
      $("welcome").style.display="none"//欢迎内容隐藏
      clearMenu();
      this.style.background="yellow";
      //循环取得当前索引
      for(j=0;j<8;j++){
        if(this==ck[j]){
          if($("p"+j)==null){
            openNew(j,this.innerHTML);//设置标签显示文字
          }
        clearStyle();
        $("p"+j).style.backgroundColor="yellow";
        clearContent();
        $("c"+j).style.display="block";
        }
      }
      return false;
    }
  }
  //增加或删除标签
  function openNew(id,name){
    var tagMenu=document.createElement("li");
    tagMenu.id="p"+id;
    tagMenu.innerHTML=name+"  "+"<img src='close.gif' style='vertical-align:middle'/>";
    //标签点击事件
    tagMenu.onclick=function(evt){
      clearMenu();
      ck[id].style.background="yellow";
      clearStyle();
      tagMenu.style.backgroundColor="yellow";
      clearContent();
      $("c"+id).style.display="block";
    }
    //标签内关闭图片点击事件
    tagMenu.getElementsByTagName("img")[0].onclick=function(evt){
      evt=(evt)?evt:((window.event)?window.event:null);
      if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;
      this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签
      var color=tagMenu.style.backgroundColor;
      //设置如果关闭一个标签时,让最后一个标签得到焦点
      if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释
        if(tags.length-1>=0){
          clearStyle();
          tags[tags.length-1].style.backgroundColor="yellow";
          clearContent();
          var cc=tags[tags.length-1].id.split("p");
          $("c"+cc[1]).style.display="block";
          clearMenu();
          ck[cc[1]].style.background="yellow";
        }
        else{
          clearContent();
          clearMenu();
          $("welcome").style.display="block";
        }
      }
    }
    menu.appendChild(tagMenu);
  }
  //清除菜单样式
  function clearMenu(){
    for(i=0;i<ck.length;i++){
      ck[i].style.background="#99CC00";
    }
  }
  //清除标签样式
  function clearStyle(){
    for(i=0;i<tags.length;i++){
      menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00";
    }
  }
  //清除内容
  function clearContent(){
    for(i=0;i<7;i++){
      $("c"+i).style.display="none";
    }
  }
}
</script>
</head>
<body>
<div id="top">
  <h2>管理菜单</h2>
  <div id="topTags">
    <ul>
    </ul>
  </div>
</div>
<div id="main">
  <div id="leftMenu">
    <ul>
      <li>导航一</li>
      <li>导航二</li>
      <li>导航三</li>
      <li>导航四</li>
      <li>导航五</li>
      <li>导航六</li>
      <li>导航七</li>
    </ul>
  </div>
  <div id="content">
    <div id="welcome" class="content" style="display:block;">
      <div align="center">
        <p> </p>
        <p><strong>欢迎光临</strong></p>
        <p> </p>
      </div>
    </div>
    <div id="c0" class="content"><a href="###">导航一内容</a></div>
    <div id="c1" class="content"><a href="###">导航二内容</a></div>
    <div id="c2" class="content"><a href="###">导航三内容</a></div>
    <div id="c3" class="content"><a href="###">导航四内容</a></div>
    <div id="c4" class="content"><a href="###">导航五内容</a></div>
    <div id="c5" class="content"><a href="###">导航六内容</a></div>
    <div id="c6" class="content"><a href="###">导航七内容</a></div>
  </div>
</div>
<div id="footer">copyright 3water.com </div>
</body>
</html>

运行效果图如下:

JS实现可编辑的后台管理菜单功能【附demo源码下载】

完整实例代码点击此处本站下载。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
轻松实现js弹框显示选项
Sep 13 #Javascript
JS制作图形验证码实现代码
Oct 19 #Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 #Javascript
javascript数组遍历的方法实例分析
Sep 13 #Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 #Javascript
JS简单去除数组中重复项的方法
Sep 13 #Javascript
jQuery包裹节点用法完整示例
Sep 13 #Javascript
You might like
PHP empty函数报错解决办法
2014/03/06 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python读写文件基础知识点
2019/06/10 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
解决python replace函数替换无效问题
2020/01/18 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
Python3 assert断言实现原理解析
2020/03/02 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
2014年艾滋病防治工作总结
2014/12/10 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android