上一个树形菜单的改进，增添了数据绑定功能而非仅仅的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 ...
随机推荐
- Thinkphp5.0快速入门笔记（3）
学习来源与说明 https://www.kancloud.cn/thinkphp/thinkphp5_quickstart 测试与部署均在windows10下进行学习. 快速入门第三节 获取当前的请求 ...
- ajax异步刷新请求数据
AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XM ...
- git取消操作命令
1,移除git add . 的内容 git reset HEAD 2,移除git commit 的内容(commit_A是文件名) git rebase -i commit_A
- QQ恶搞 - 卡死对方的手机QQ
方式1(低端设备有效): 使用方法: 代码: oo0.oo.OOO00.oo.OO00.oo.OO00.oo.OO00.oo.OO00.oo.OO00.oo.OO00.oo.OO00.oo.O00.o ...
- 使用Mybatis Generator自动生成代码
MyBatis Generator(MBG)是MyBatis MyBatis 和iBATIS的代码生成器.它将为所有版本的MyBatis以及版本2.2.0之后的iBATIS版本生成代码.它将内省数据库 ...
- 10.1、LNMT架构
Java环境安装包下载路径: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...
- deep_learning_tensorflow_get_variable()
maxwell_tesla tf.get_variable函数的使用 tf.get_variable(name, shape, initializer): name就是变量的名称,shape是变量的 ...
- Chrome安装Axure插件axure-chrome-extension
用Chrome打开Axure发布的原型图打不开,提示需要安装axure-chrome-extension插件,如下图提示 下面记录一下安装过程,其实很简单,插件没必要从网上到处找,在你发布的路径下就有 ...
- linux 指定ftp用户 特定目录及权限
Linux添加FTP用户并设置权限 在linux中添加ftp用户,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test 2.建 ...
- CentOS7 配置NFS(Network File System)及其使用
1. 服务端配置 1.1. 安装NFS yum -y install nfs* 1.2. 查看是否安装了NFS与RPCBIND rpm -qa | grep nfs rpm - ...