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 相关文章推荐
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
vue input标签通用指令校验的实现
Nov 05 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
2006/11/25 PHP
PHP伪造referer实例代码
2008/09/20 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
J2EE相关知识面试题
2013/08/26 面试题
护理专业推荐信
2013/11/07 职场文书
销售总经理岗位职责
2014/03/15 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle