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 OOP包机制,类创建的方法定义
Nov 02 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
原生js生成图片验证码
Oct 11 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
thinkphp框架实现删除和批量删除
2016/06/29 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
PHP7 新增常量
2021/03/09 PHP
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
利用python实现数据分析
2017/01/11 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
机械专业应届生求职信
2013/12/12 职场文书
给市场的环保建议书
2014/05/14 职场文书
战友聚会策划方案
2014/06/13 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书