上一个树形菜单的改进，增添了数据绑定功能而非仅仅的jq特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.menulevelzero{display:inline-block;width:200px;height:30px;border: 1px solid black;text-align: center;line-height: 30px;font-size: 16px;}
.menulevelzero_input{width:198px;height:26px;display: none;}
.addbox{width:100px;height:69px;background-color: grey;display:none}
.addbox_list{color:black;border:1px solid black;}
.addbox_last,.addbox_first{height:46px;width:100px;background-color: grey;display:none}
button{display:inline-block;top:20px;left:200px; width:22px;}
</style>
</head>
<body>
<button class="menulevelzero_0" aaa>-</button><input class="menulevelzero_input" type="text" name="" id="" value="" /><div class="menulevelzero" id="menulevelzero_0">总菜单</div>
<div class="menulevelzero_box">
</div>
<div class="addbox">
<div class="addbox_list addbox_add">添加</div>
<div class="addbox_list addbox_chg">修改</div>
<div class="addbox_list addbox_del">删除</div>
</div>
<div class="addbox_first">
<div class="addbox_list addbox_add">添加</div>
<div class="addbox_list addbox_chg">修改</div>
<div></div>
</div>
<div class="addbox_last">
<div class="addbox_list addbox_chg">修改</div>
<div class="addbox_list addbox_del">删除</div>
</div>
</body>
<script type="text/javascript">
var count=0;
var menuid;
var inputval;
var parent;
var str;
// addbox文本框的定位
function addboxposition(){
var e = event || window.event;
$(".addbox").css({"display":"inline-block",
"position":"absolute",
})
function getviewheight(){
return document.documentElement.clientHeight || document.body.clientHeight ;
}
function getviewwidth(){
return document.documentElement.clientWidth || document.body.clientWidth ;
}
if(e.clientX<=getviewwidth()-100){
$(".addbox").css("left",e.clientX);
}else{
$(".addbox").css("left",(e.clientX-100));
}
if(e.clientY<=getviewheight()-69){
$(".addbox").css("top",e.clientY);
}else{
$(".addbox").css("top",(e.clientY-69));
}
$(".addbox_last").css("display","none");
$(".addbox_first").css("display","none");
}
// 总菜单addbox文本框展示
function addboxpositionfirst(){
var e = event || window.event;
$(".addbox_first").css({"display":"inline-block",
"position":"absolute",
})
function getviewheight(){
return document.documentElement.clientHeight || document.body.clientHeight ;
}
function getviewwidth(){
return document.documentElement.clientWidth || document.body.clientWidth ;
}
if(e.clientX<=getviewwidth()-100){
$(".addbox_first").css("left",e.clientX);
}else{
$(".addbox_first").css("left",(e.clientX-100));
}
if(e.clientY<=getviewheight()-46){
$(".addbox_first").css("top",e.clientY);
}else{
$(".addbox_first").css("top",(e.clientY-46));
}
$(".addbox").css("display","none");
$(".addbox_last").css("display","none");
}
// 四级菜单addbox文本框展示
$(".menulevelzero_box").on("contextmenu",".menulevelfourth",function(e){return false;}).on("mousedown",".menulevelfourth", function addmenulevelfourth(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id");
addboxpositionlast();
}
})
function addboxpositionlast(){
var e = event || window.event;
$(".addbox_last").css({"display":"inline-block",
"position":"absolute",
})
function getviewheight(){
return document.documentElement.clientHeight || document.body.clientHeight ;
}
function getviewwidth(){
return document.documentElement.clientWidth || document.body.clientWidth ;
}
if(e.clientX<=getviewwidth()-100){
$(".addbox_last").css("left",e.clientX);
}else{
$(".addbox_last").css("left",(e.clientX-100));
}
if(e.clientY<=getviewheight()-46){
$(".addbox_last").css("top",e.clientY);
}else{
$(".addbox_last").css("top",(e.clientY-46));
}
$(".addbox").css("display","none");
$(".addbox_first").css("display","none");
}
// addbox 右键事件的阻止
$(".addbox").on("contextmenu",function(e){return false;});
$(".addbox_first").on("contextmenu",function(e){return false;});
$(".addbox_last").on("contextmenu",function(e){return false;});
// 点击全屏隐藏 addbox事件
$("body").on("click",function boxhide(){
$(".addbox").css("display","none");
$(".addbox_last").css("display","none");
$(".addbox_first").css("display","none");
})
// 数据处理
var arr0 = [{CID:"menulevelzero_0",Istake:0,content:"总菜单",CClass:"menulevelzero_box",CList:[]}];
// 数据添加函数
function dataadd() {
if (menuid == arr0[0].CID){
var arr=arr0[0].CList;
var obj = {CID:"menulevelfirst"+count,Istake:0,content:"一级菜单",CClass:"menulevelfirst_box",CList:[]}
arr.push(obj);
arr0[0].Istake=arr.length;
count++;
}else{
var arr1 = arr0[0].CList;
for (var i=0;i<arr1.length;i++) {
if (menuid == arr1[i].CID){
var arr=arr1[i].CList;
arr.push({
CID:"menulevelsecond"+count,Istake:0,content:"二级菜单",CClass:"menulevelsecond_box",CList:[]
})
arr1[i].Istake=arr.length;
count++;
}else{
var arr2 = arr1[i].CList;
for (var j=0;j<arr2.length;j++) {
if (menuid == arr2[j].CID){
var arr=arr2[j].CList;
arr.push({
CID:"menulevelthird"+count,Istake:0,content:"三级菜单",CClass:"menulevelthird_box",CList:[]
})
arr2[j].Istake=arr.length;
count++;
}else{
var arr3 = arr2[j].CList;
for (var k=0;k<arr3.length;k++) {
if (menuid == arr3[k].CID){
var arr=arr3[k].CList;
arr.push({
CID:"menulevelfourth"+count,Istake:0,content:"四级菜单",CClass:"menulevelfourth_box",CList:[]
})
arr3[k].Istake=arr.length;
count++;
}
}
}
}
}
}
}
}
// 数据修改函数
function datachange() {
if (menuid == arr0[0].CID){
arr0[0].content=inputval;
}else{
var arr1 = arr0[0].CList;
for (var i=0;i<arr1.length;i++) {
if (menuid == arr1[i].CID){
arr1[i].content=inputval;
}else{
var arr2 = arr1[i].CList;
for (var j=0;j<arr2.length;j++) {
if (menuid == arr2[j].CID){
arr2[j].content=inputval;
}else{
var arr3 = arr2[j].CList;
for (var k=0;k<arr3.length;k++) {
if (menuid == arr3[k].CID){
arr3[k].content=inputval;
}else{
var arr4 = arr3[k].CList;
for (var a=0;a<arr4.length;a++) {
if (menuid == arr4[a].CID){
arr4[a].content=inputval;
}
}
}
}
}
}
}
}
}
}
// 数据删除函数
function datadel() {
var arr1 = arr0[0].CList;
for (var i=0;i<arr1.length;i++) {
if (menuid == arr1[i].CID){
arr1.splice(i,1);
arr0[0].Istake=arr1.length;
}else{
var arr2 = arr1[i].CList;
for (var j=0;j<arr2.length;j++) {
if (menuid == arr2[j].CID){
arr2.splice(j,1);
arr1[i].Istake=arr2.length;
}else{
var arr3 = arr2[j].CList;
for (var k=0;k<arr3.length;k++) {
if (menuid == arr3[k].CID){
arr3.splice(k,1);
arr2[j].Istake=arr3.length;
}else{
var arr4 = arr3[k].CList;
for (var a=0;a<arr4.length;a++) {
if (menuid == arr4[a].CID){
arr4.splice(a,1);
arr3[k].Istake=arr4.length;
}
}
}
}
}
}
}
}
}
// 改变菜单样式函数
function setmenucss() {
$(".menulevelfirst").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#fff"})
$(".menulevelsecond").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#ccc"})
$(".menulevelthird").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#999"})
$(".menulevelfourth").css({"display":"inline-block","width":"200px","height":"25px",
"border":"1px solid black",
"text-align": "center","line-height": "25px",
"font-size": "16px","background-color": "#666"})
$(".menu_input").css({"width":"198px","height":"21px",
"display": "none"})
$("button").css({"display":"inline-block","top":"20px","left":"200px","width":"22px"})
}
// 数据展示
function showlist(){
var html="";
if (arr0[0].Istake==0) {
$(".menulevelzero_0[aaa]").html('-');
} else{
$(".menulevelzero_0[aaa]").html('+');
}
$("#menulevelzero_0").html(arr0[0].content);
var arr1 = arr0[0].CList;
for (var i=0;i<arr1.length;i++) {
if (arr1[i].Istake==0) {
html+='<button class="'+arr1[i].CID+'" aaa>-</button><input class="menu_input input'+arr1[i].CID+'" type="text" /><div class="menulevelfirst" id="'+arr1[i].CID+'">'+arr1[i].content+'</div><div class="menulevelfirst_box'+arr1[i].CID+'">';
} else{
html+='<button class="'+arr1[i].CID+'" aaa>+</button><input class="menu_input input'+arr1[i].CID+'" type="text" /><div class="menulevelfirst" id="'+arr1[i].CID+'">'+arr1[i].content+'</div><div class="menulevelfirst_box'+arr1[i].CID+'">';
}
var arr2 = arr1[i].CList;
for (var j=0;j<arr2.length;j++) {
if (arr2[j].Istake==0) {
html+='<button class="'+arr2[j].CID+'" aaa>-</button><input class="menu_input input'+arr2[j].CID+'" type="text" /><div class="menulevelsecond" id="'+arr2[j].CID+'">'+arr2[j].content+'</div><div class="menulevelsecond_box'+arr2[j].CID+'">';
} else{
html+='<button class="'+arr2[j].CID+'" aaa>+</button><input class="menu_input input'+arr2[j].CID+'" type="text" /><div class="menulevelsecond" id="'+arr2[j].CID+'">'+arr2[j].content+'</div><div class="menulevelsecond_box'+arr2[j].CID+'">';
}
var arr3 = arr2[j].CList;
for (var k=0;k<arr3.length;k++) {
if (arr3[k].Istake==0) {
html+='<button class="'+arr3[k].CID+'" aaa>-</button><input class="menu_input input'+arr3[k].CID+'" type="text" /><div class="menulevelthird" id="'+arr3[k].CID+'">'+arr3[k].content+'</div><div class="menulevelthird_box'+arr3[k].CID+'">';
} else{
html+='<button class="'+arr3[k].CID+'" aaa>+</button><input class="menu_input input'+arr3[k].CID+'" type="text" /><div class="menulevelthird" id="'+arr3[k].CID+'">'+arr3[k].content+'</div><div class="menulevelthird_box'+arr3[k].CID+'">';
}
var arr4 = arr3[k].CList;
for (var z=0;z<arr4.length;z++) {
html+='<button class="'+arr4[z].CID+'" aaa>-</button><input class="menu_input input'+arr4[z].CID+'" type="text" /><div class="menulevelfourth" id="'+arr4[z].CID+'">'+arr4[z].content+'</div><div class="menulevelfourth_box'+arr4[z].CID+'"></div><div bbb></div>';
}
html+='</div><div bbb></div>';
}
html+='</div><div bbb></div>';
}
html+='</div><div bbb></div>';
}
console.log(arr0);
$(".menulevelzero_box").html(html);
}
//操作一级菜单
//右键事件的阻止与新的右键事件的设置
$(".menulevelzero").on("contextmenu",function(e){return false;}).on("mousedown", function addmenulevelfirst(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id"); //获取所点击DIV的id
addboxpositionfirst();
}
}).on("click",function (){
$(".menulevelzero_box").toggle();
})
//操作二级菜单
//右键事件的阻止与新的右键事件的设置
$(".menulevelzero_box").on("contextmenu",".menulevelfirst",function(e){return false;}).on("mousedown",".menulevelfirst", function addmenulevelsecond(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id");
addboxposition();
}
}).on("click",".menulevelfirst",function firsttoggle(){ //菜单的点击收起点击释放
$(this).next().toggle();
})
//操作三级菜单
$(".menulevelzero_box").on("contextmenu",".menulevelsecond",function(e){return false;}).on("mousedown",".menulevelsecond", function addmenulevelthird(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id");
addboxposition();
}
}).on("click",".menulevelsecond",function secondtoggle(){
$(this).next().toggle();
})
//操作四级菜单
$(".menulevelzero_box").on("contextmenu",".menulevelthird",function(e){return false;}).on("mousedown",".menulevelthird", function addmenulevelfourth(event, a){
if(event.which == 3 || a == 'right'){
menuid=$(this).attr("id");
addboxposition();
}
}).on("click",".menulevelthird",function thirdtoggle(){
$(this).next().toggle();
})
// 添加功能
$(".addbox_add").on("click",function addmenu(){
dataadd();
showlist();
setmenucss();
})
// addbox_chg 修改功能
$(".addbox_chg").on("click",function chgmenu(){
$("#"+menuid).css("display","none");
$("#"+menuid).prev().css("display","inline-block");
str = $("#"+menuid).html();
$("#"+menuid).prev().val(str);
});
$(".menulevelzero_box").on("blur","input[type=text]",function(){
$("#"+menuid).css("display","inline-block");
$("#"+menuid).prev().css("display","none");
var str1 = $("#"+menuid).prev().val().trim();
if (str1 != "") {
inputval=str1;
} else{
inputval=str;
}
datachange();
showlist();
setmenucss();
})
$(".menulevelzero_input").on("blur",function(){
$("#menulevelzero_0").css("display","inline-block");
$(this).css("display","none");
var str1 = $(this).val().trim();
if (str1 != "") {
inputval=str1;
} else{
inputval=str;
}
datachange();
showlist();
setmenucss();
})
// addbox_del 删除功能
$(".addbox_del").on("click",function delmenu(){
datadel();
showlist();
setmenucss();
})
</script>
</html>
与上一个比起来在功能上并没有大的改变，仍然是增删改，菜单收起与展开，以及是否有子菜单的标记功能
不同的是这个树形菜单是通过对数据的处理来进行菜单的变化，与上一个树形菜单单纯的jq特效而没有实用功能不同
这份树形菜单完全可以作为插件来使用，数据结构为对象与数组的嵌套 以下
// var arr0 = [{CID:"menulevelzero_0",Istake:0,content:"总菜单",CClass:"menulevelzero_box",CList:[ ]}]; // [ {总菜单 [ {一级菜单 [ {二级菜单 [ {三级菜单 [ {四级菜单[] },{ 四级菜单 } ] }, {三级菜单 [ ] } ] } , { 二级菜单 [] } ] }, {一级菜单 [] } ] } ]
// var arr1 = arr0[0].CList; //内部对象为一级菜单 // [ {一级菜单 [ {二级菜单 [ {三级菜单 [ {四级菜单[] },{ 四级菜单 } ] }, {三级菜单 [ ] } ] } , { 二级菜单 [] } ] }, {一级菜单 [] } ]
// var arr2 = arr1[i].CList; //[ {二级菜单 [ {三级菜单 [ {四级菜单[] },{ 四级菜单 } ] }, {三级菜单 [ ] } ] } , { 二级菜单 [] } ]
// var arr3 = arr2[i].CList; //[ {三级菜单 [ {四级菜单[] },{ 四级菜单 } ] }, {三级菜单 [ ] } ]
// var arr4 = arr3[i].CList; //[ {四级菜单[] },{ 四级菜单 } ]
上一个树形菜单的改进，增添了数据绑定功能而非仅仅的jq特效的更多相关文章
- Android学习笔记之树形菜单的应用...
PS:终于考完试了,总算是解脱了...可以正式上手项目开发了.... 学习内容: 1.掌握如何使用树形菜单... 对知识点进行一下补充...居然忘记了去学习树形菜单...不过在这里补上... Ex ...
- vue树形菜单
vue树形菜单 由于项目原因,没有使用ui框架上的树形菜单,所以自己动手并参考大佬的代码写了一个树形菜单的组件,话不多说,直接上代码.html代码js代码直接调用api 把请求到的数据直接赋值给per ...
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 使用标记创建树形菜单
jQuery EasyUI 树形菜单 - 使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 元素中.无序列表的 元素提供一个基础的树(Tre ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
- 前框 （一个）zTree 从数据库树形菜单动态加载
这些天做动态菜单使用此插件.现在有一个非常广泛的开源框架,最新QUI框架是菜单部分使用这个插件开发,因此,它是非常值获取深入的研究和探讨,通过使用非常丰富的感觉功能,己开发和编写,官网上有非常详尽的A ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
- 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
- 用JS写一个网站树形菜单
先上效果图: 主体内容就是侧边展示的一二三级菜单,树形结构的. 前端页面布局内容,页面内容简单用ul li 来完成所有的罗列项.用先后顺序来区分一级二级三级: <body> <b&g ...
随机推荐
- C++练习 | 铁轨问题
#include <iostream> #include <cmath> #include <cstring> #include <string> #i ...
- vue cli3项目发布在apache www/vue目录下并配置history路由
注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...
- TCP 三次握手和四次挥手
TCP 三次握手和四次挥手 作为面试会被经常考察的的点,自己复习了一下,总结如下: TCP 三次握手 先上图: 所谓三次握手,是指建立一个 TCP 连接时,需要客户端和服务器总共发送 3 个包. 第一 ...
- C++ 标准库字符串类使用
标准库中的字符串类 C++语言直接支持C语言所有概念. C++中没有原生的字符串类型. 由于C++中没有原生的字符串类型,C++标准库提供了string类型. 1.string 直接支持字符串链接 2 ...
- Abp添加新的接口（扩展底层接口）
在https://aspnetboilerplate.com/Templates 创建项目之后,下载用Vs2019打开(vs2017不支持netcore3.0)结构如下: 一. 2. 在xx.core ...
- Mysql学习（二）之通过homebrew安装mysql后，为什么在系统偏好设置里没有mysql
原因 用brew install packagename是用来安装命令行工具的,一般不可能影响到图形界面. mysql官方文档是通过dmg文件安装的: The MySQL Installation P ...
- ajax异步刷新请求数据
AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XM ...
- hiper、sitespeed性能工具
https://github.com/pod4g/hiper hiper: A statistical analysis tool for performance testing https: ...
- 解决 webpack 打包文件体积过大
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...
- 第十八篇 JS传参数
JS传参数 参数,这是个什么东西呢?简单的说吧,我们去玩别人的网站,一般来个登录,有用户名和密码,当我们输入正确之后,那么这用户名和密码里面的值,就是参数的值,它将这个值传给“参数”,然后提交到后 ...