右键创建菜单

来源：互联网发布：vr未来发展数据编辑：程序博客网时间：2024/06/06 11:00

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#folder {
width:1000px;
height:500px;
background:#1AA59E;
position:relative;
}
#menus {
display:none;
position:absolute;
border:1px solid;
background: #fff;
}
#menus li {
border: 1px solid #eee;
cursor: pointer;
}
#input {
position:absolute;
left:0;
top:60px;
display:none;
width:60px;

}
#input input{
width:60px;
}
.addFolder {
float:left;
margin:5px;
}
.addFolder img {
width:60px;
}
* {
padding:0;
margin:0;
list-style:none;
}
</style>
<script src="js/jquery-1.8.0.js"></script>
</head>
<body>
<div id="folder">
<div id="menus">
<ul>
<li id="newFolder">新建文件</li>
<li id="move">删除</li>
</ul>
</div>
<div id="folderAll">

</div>
<div id="input">
<input type="text" value="" />
</div>
</div>

<script>
// 调出右键菜单
var boo = false;
$("#folder").contextmenu(function (e) {
$("#menus").show();
var e = e || window.event;
var x = e.clientX +"px";
var y = e.clientY - $("#menus").height() + "px";
$("#menus").css({left: x , top: y})
return false; // 阻止默认行为
})
// 点击新建文件夹
$("#newFolder").click(function () {
boo = true;
$("#menus").hide();
$("#input input").val('新建文件');
$("#input").show();
$("#input input").focus();
var div = "<div class='addFolder'><img src='images/Folder.png'><p></p></div>"
$("#folderAll").prepend(div);
return false;
})
$("#folderAll").on("click", function () {
return false;
})
var arr = [];
$(document).click(function () {
$(".addFolder p:first").html($("#input input").val());
$("#input").hide();
if (boo) {
var obj = {};
obj.imgUrl = $(".addFolder img:first").attr("src");
obj.name = $(".addFolder p:first").html();
arr.push(obj);
localStorage.setItem("arr", JSON.stringify(arr)); // 本地存储上传的文件
}
})
// 本地存储上传的文件
$(function () {
if (JSON.parse(localStorage.getItem("arr"))) {
arr = JSON.parse(localStorage.getItem("arr"));
}

var oldFolder = "";
if (arr && arr.length > 0) {
for (var i = arr.length - 1 ; i >= 0 ; i--) {
oldFolder += "<div class='addFolder'><img src='" + arr[i].imgUrl + "'><p>" + arr[i].name + "</p></div>"
}
$("#folderAll").html(oldFolder);
}

})

</script>
</body>
</html>

阅读全文

0 0