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

本文实例讲述了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>

运行效果图如下:

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

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

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

时间: 2016-09-10

jsp中将后台传递过来的json格式的list数据绑定到下拉菜单select

复制代码 代码如下: <span style="white-space:pre"> </span><select><c:forEach var="fileList" items="${fileList}" varStatus="i"> <option value="${i.count}">${fileList.filePath}</optio

JS实现适合于后台使用的动画折叠菜单效果

本文实例讲述了JS实现适合于后台使用的动画折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款适合于后台使用的动画折叠菜单,代码超简,无jQuery,展开与折叠效果平滑.本演示中有两组菜单,向大家展示如何在一个网页中布局两个菜单,整体效果以及兼容性还算可以,希望在实际应用中不会出现什么问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ht-control-animate-zd-menu-codes/ 具体代码如下: <!DOCTY

js实现的后台左侧管理菜单代码

本文实例讲述了js实现的后台左侧管理菜单代码.分享给大家供大家参考.具体如下: 这是一个完美的后台左侧管理菜单,从样式来说,貌似出自专业人士之手,风格清新,操作实用,用在WEB管理系统中或用在网站后台管理中,最恰当不过了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-main-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra

js类后台管理菜单类-MenuSwitch

写MenuSwitch类的出发点是因为随着后台管理项越来越多,从而导致菜单显示部出现了滚动条导致页面很不美观,自己蒙生写这个JS类了.     这个功能类采用了目前比较流行的Web2.0做法,使用DIV+CSS+JS方式,将样式和功能分开.我下面先把演示效果放出来吧 复制代码 代码如下: function MenuSwitch(className){                 this._elements = [];         this._default = -1;         

ExtJS中设置下拉列表框不可编辑的方法

ExtJS这个框架,并没有学习和用过,只知道是一个流行的前段框架,和Easy UI,BUI,DWZ等这些框架都是差不多的,只不过比他们更加强大而已,之所以写这个,我觉得还是很有帮助的. 今天朋友遇到了一个问题:ExtJS中的下拉列表如何设置不可编辑的,html中是不可以编辑的,但是现在这种UI框架中的下拉列表框都是可以编辑的,朋友的需求就是像html中的那样效果,所以朋友想到了用editable属性,但是写了这个属性之后就报错了,当时并没有看错误,我给他找了1个属性设置为不可编辑的,但是还是不好

前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

用javascript实现div可编辑的常见方法

功能:实现网页内容的即时编辑,增加页面的可用性.交互性. 方法1:直接通过textarea标签实现,请运行下边代码: New Document #info { font-size: 12px; overflow:hidden; background-color: #ffffcc; color: black; padding-right:5px; padding-left:5px; font-family: courier; width:100%; letter-spacing:0; line-h

JS在可编辑的div中的光标位置插入内容的方法

本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

使用js实现一个可编辑的select下拉列表

复制代码 代码如下: <select id="name" name="name" onkeydown="clearSelect(this,event);" onkeypress="writeSelect(this,event);" style="width:70px;"> <option value=""></option> <option va

让你的网站可编辑的实现js代码

非常的简单 一.打开你要黑的网站, 二.在浏览器的地址栏里输入: 复制代码 代码如下: javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 三.现在你会发现他的页面竟然可以任由你自由修改了!! 四.按照你自己的意图修改好后,在地址栏中输入: 复制代码 代码如下: javascript:document.body.contentEditable='false'; void 0 好了,截图

在IE上直接编辑网页内容的js代码(IE地址栏js)

只要将下面的代码,在当前打开的页面的IE地址栏中,输入下面的js,即可以随意修改当前网页的内容了 复制代码 代码如下: javascript:document.body.contentEditable='true'; document.designMode='on'; 遇到不允许复制内容网页时,在IE地址栏输入上面这句代码,再双击页面就可以了.

从QQ网站中提取的纯JS省市区三级联动菜单

我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下:  何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js 使用方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 直接使用QQ的省市区数据

Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windows–>perferences–>validation 把 除了manual 下面的全部点掉,build下只留 classpath dependency Validator 2.关闭拼写检查 windows–>perferences–>general–> editors->

让网站自动生成章节目录索引的多个js代码

第一种:只支持一级目录 <h3>,作为段落不支持分类 一个好的博文除了博文的质量要好以外,好的组织结构也能让读者阅读的更加舒服与方便,我看园子里面有一些园友的博文都是分章节的,并且在博文的前面都带有章节的目录索引,点击索引之后会跳转到相应的章节阅读,并且还可以回到目录顶端,其中 Fish Li 的博文就是这种组织,当然这种结构如果是在写博文的时候人工设置那是非常麻烦的,无疑是增加了写作人的工作量.如果能自动生成章节索引岂不是节省了一大堆工作量.本来想通过FireBug看看Fish Li源码是怎

vue+iview 实现可编辑表格的示例代码

先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具... 毕竟公司还在用angularjs+jq. 这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了 话不多说,先来个效果图 我们再看下极为简单的目录结构 IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关

vue实现导航菜单和编辑文本的示例代码

导航菜单实例 <div id="main"> <!-- 激活的菜单样式为 active 类 --> <!-- 为了阻止链接在点击时跳转,我们使用了 "prevent" 修饰符 (preventDefault 的简称). --> <nav v-bind:class="active" v-on:click.prevent> <!-- 当菜单上的链接被点击时,我们调用了 makeActive 方法,

php access 数据连接与读取保存编辑数据的实现代码

复制代码 代码如下: $conn = new com("ADODB.Connection"); $connstr = "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=". realpath("www.jb51.net/db.mdb"); //与access连接要用到com接口了. $conn->Open($connstr); $rs = new com("ADODB.RecordSet

js制作网站首页图片轮播特效代码

本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;

JavaScript 就地编辑HTML节点实现代码

点击编辑当前内容 var EditField={ configure:function(id){ this.id=id; this.createElements(); //动态生成编辑输入框 this.toScan(); //初始化动态生成的输入框和按钮.待编辑的DOM元素的display属性 this.addEvents(); //给相关的DOM元素添加事件监听器 }, events:function(elem,type,fn){ //用于添加事件的通用函数 if(elem.attachEve