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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS实现可编辑的后台管理菜单功能【附demo源码下载】，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5149字，纯文字阅读大概需要8分钟。

内容图文

本文实例讲述了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 jb51.net </div>
</body>
</html>

运行效果图如下：

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

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》

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

内容总结

以上是互联网集市为您收集整理的JS实现可编辑的后台管理菜单功能【附demo源码下载】全部内容，希望文章能够帮你解决JS实现可编辑的后台管理菜单功能【附demo源码下载】所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/349743.html

来源：【匿名】

【上一篇】JS之获取样式的简单实现方法(推荐)【下一篇】javascript 怎么调用php方法

更多 ►

【JS实现可编辑的后台管理菜单功能【附demo源码下载】】教程文章相关的互联网学习教程文章

JavaScript 实现页面中录音功能【代码】【图】

页面中实现录音需要使用浏览器提供的 Media?Recorder API，所以前提是需要浏览器支持 MediaStream Recording 相关的功能。以下代码默认工作在 Chrome 环境中。准备页面首先准备一个页面，其中内容很简单，两个按钮，一个用于录音，一个用于播放。<!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=...

原生JavaScript写出日历功能无引用Jq【代码】【图】

成品显示，可左右切换月份html 代码 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>移动端日历</title><link rel="stylesheet" href="./css/calendar.css"> </head> <body><div id="calendarElement"><div class="header"><div class="prev"><i class="previ"></i></div><div class="...

javascript实现简单的动画功能

//在第二个函数positionMessage中设置初始位置与终点，新建html文件是，元素ID为message。function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != ‘function‘) { window.onload=func;}else{ window.onload = function(){ oldonload(); func(); } }}function positionMessage() { if (!document.getElementById) {return false;} if (!document.get...

JavaScript 常用功能总结【代码】【图】

编吐血整理加上翻译，太辛苦了~求赞！本文主要总结了JavaScript 常用功能总结，如一些常用的额JS 对象，基本数据结构，功能函数等，还有一些常用的设计模式。目录：众所周知，JavaScript是动态的面向对象的编程语言，能够实现以下效果：1. 丰富Web 网页功能2. 丰富Web界面3. 实现本地或远程存储。4. 实现分布式网络应用的前端组件，并在后台进行数据存储管理。5. 使用JavaScript可以实现完整的分布式Web 应用。 JavaScript 中的数...

实现简单的网页登录注册功能 (使用html和css以及javascript技术) 没有美化的日后补全【代码】【图】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>账号注册</title><style>select {width: 100px;padding: 5px;font-size:16px;}</style> </head> <body>  <form action="demo01.html"method="post"> <p>账号:<input type="text"name="userCode"required placeholder="请输入账号:...

javascript常用功能收藏【代码】

引用:http://www.css88.com/archives/5180收集了一些比较常用的javascript函数。字符串长度截取function cutstr(str, len) {var temp,icount = 0,patrn = /[^\x00-\xff]/，strre = "";for (var i = 0; i < str.length; i++) {if (icount < len - 1) {temp = str.substr(i, 1);if (patrn.exec(temp) == null) {icount = icount + 1} else {icount = icount + 2}strre += temp} else {break;}}return strre + "..." }替换全部String....

javascript自定义简单map对象功能【代码】

这里介绍一种js创建简单map对象的方法：function Map() {//创建object对象, 并给object对象添加key和value属性 var obj1=new Object();var obj2=new Object(); obj1.key="zhangsan" ;obj1.value=23;obj2.key="lisi";obj2.value=25;//创建一个数组，将创建的object对象放如到数组中去var map=new Array(obj1,obj2); } 这里只是一中最简单的map（）的构建方式，将含有键值对的object对象存入到Array数组中，就形成了类似...

JavaScript实现的分页功能[用于搭配后台使用]【代码】

1 (function(root){2 3function Page(params){4 5this.oTarget = document.getElementById(params.dom);6this.fn = params.fn;7this.pageNumber = params.pageNumber;8this.interval = params.interval || 2;9this.page = 1; 10this.start = 1; 11this.end = (this.interval*2+1); 1213this.dom(); 14this.bind(); 15 } 16 Page.prototype.dom=function(){ 17this.last = true; 18this.Data = []; 1920if(this....

用户找回密码功能JS验证邮箱通过点击下一步隐藏邮箱输入框并修改下一步按钮的ID【代码】

//这里是BaseDao 1/** 2 * 获得一个对象3 * @param hql4 * @param param5 * @return 6*/ 7public Object get(String hql, Object[] param){8 List<Object> objects = this.getHibernateTemplate().find(hql, param); 9if (objects != null && objects.size() > 0) { 10return objects.get(0); 11 } else { 12returnnull; 13 } 14 }//这里是UsersDaoImpl 1/** 2 * 查找邮箱...

js实现全选与全部取消功能

function checkAll() { //把所有参与选择的checkbox使用相同的name，这里为"num_iid" var eles = document.getElementsByName("num_iid"); var i = 0; // 如果是全选状态，则取消所有的选择 if (isSelectAll() == true) { for ( i = 0; i < eles.length; i++) { eles[i].checked = false; } document.getElementById("selectAll").checked = false; } else { // 否则选中每一个checkbox for ...

我在做评论功能时学到的js一些思路【代码】

在提交评论的时候，如何判断是一级评论还是二级评论（因为都是通过一个文本域提交评论），思路：声明一个全局变量，如果是回复（二级评论）那么会触发点击回复事件，在这个事件的回调函数里给全局变量设置为true；如果没有设为true，则说明是提交一级评论。如何声明全局变量--》here因为是通过一个按钮的点击事件实现回复和一级评论，所以需要用到一个事件触发多个函数的思路。看了一眼这篇博客有了一个思路~呵呵~通过全局变量的值...

js实现打印功能

<input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" /><style type="text/css" media=print>.noprint{display : none }</style><p class="noprint">不需要打印的地方</p><p>打印的部分</p>  <!--...

jQuery部分功能使用js进行实现(初探JQ)【代码】

今天使用js写了段jq中的html()方法。我的原则是废话不多说，直接放代码。。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JQuery初探</title> </head> <body><div id="box"><span>1112</span></div><script>var Kodo = function(selector){returnnew Kodo.prototype.init(selector);}Kodo.prototype = {constructor : Kodo,length : 0,splice : [].splice,selector : ‘‘,id:{},init : function(selector...

Clipboard.js：不用Flash实现剪贴板功能的轻量级JavaScript库【代码】

Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库：Clipboard.js。在每一个Github仓库页面的侧边栏上都有一个小部件，用来显示repo的HTTPS克隆地址，当你点击紧挨着这个部件的按钮时，就会复制当前repo的URL到用户的剪贴板中。Github用JavaScript库ZeroClipboard来实现这一功能，问题是这个库是用一个不可见的Flash来完成剪贴操作，而Flash技术正被各大浏览器厂商冷落，所以势必要有一个新的方案...

功能强大的JavaScript引擎--SpiderMonkey与实现【代码】

JavaScript是由Netscape开发的对象脚本语言，其特点是开发简单、功能灵活，目前已广泛应用于WEB页面及服务器应用程序中。HTML本身是静态的、不允许用户干预，但用JavaScript编写的脚本程序就可以在用户的浏览器端运行，可以同用户进行交互，从而实现动态页面。可以将JavaScript与嵌入WEB的大多数对象的事件（如鼠标点击、移动等）相关联，然后用自己的方式处理这些事件。JavaScript提供了丰富的内置函数及命令，能在浏览器中显示HT...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【JS实现可编辑的后台管理菜单功能【附demo源码下载】】教程文章相关的互联网学习教程文章

功能 - 相关标签

后台 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程