工作需求，寫了個簡單的文件管理界面，基於jquery，還有很大一部分沒有完善，需要的朋友自己完善吧。本人只是小菜鳥，有什麼好的想法或者建議都可以交流，彼此學習。
先看下最後的結果吧，粗略的放兩張圖：
新建文件夾：
修改文件夾名：
其它的話就不多說了，大多數的意思都在備註裏面，也比較簡單，直接上代碼吧：
測試主頁代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/fileManager.css"/>
<script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="js/fileManager.js"></script>
</head>
<body>
</body>
<div class="fileContent" id="testFileContent"></div>
</html>
<script>
$("#testFileContent").initFileManager({
"fileHead":false,
"contentMenu":[
{
"text":"新建文件夾",
"code":"1",//1非文件夾右鍵菜單//2文件夾右鍵菜單
"func":function(){
createFile("testFileContent");
}
}
]
});
/*
初始化參數
參數 默認值 作用
fileHead true 是否顯示文件管理的頭部操作按鈕（比較簡單，更具需求可以自己擴展）
contentMenu 新建，刪除，修改文件名 text:右鍵菜單顯示的文本，code右鍵類型，func:點擊執行方法
*/
</script>css樣式文件代碼：
body{
margin:0px;
padding: 0px;
}
.fileContent{
width: 100%;
height: 100%;
float: left;
border-style: solid;
border-width: thin;
border-color: red;
}
/*文件操作頭*/
.fileHeader{
width:100%;
}
/*文件操作按鈕*/
.fileHeader button{
width:100px;
height:30px;
margin: 10px;
border:none;
border-radius: 2px;
font-size: 15px;
background-color: #3399FF ;
color: white;
}
/*分割線*/
.fileDivision{
border-style: solid;
border-width: thin;
}
/*文件列表 ul*/
.fileList{
padding:0px;
list-style: none;
}
.fileContentDiv{
float: left;
}
/*文件夾*/
.fileList li{
overflow: hidden;
width: 100px;
height: 150px;
float:left;
margin-left:55px;
background:url(../images/file.png) center top no-repeat;
border:1px solid #fff;
position:relative;
transition:all 0.1s ease-in 0.1s;
}
/*鼠標移動到文件上面的時候*/
.fileList li:hover{
background:url(../images/file.png) center top no-repeat #f1f2fd;
border:1px solid #a7aae3;
}
/*文件中的div，也就是文件創建完之後的文件名顯示的div*/
.fileList li div{
position: relative;
top:85px;
text-align: center;
}
/*創建文件時候創建的輸入文本*/
.cleateInputFile{
width:90px;
position: relative;
top:85px;
text-align: center;
}
.fileList .selectFile{
background:url(../images/file.png) center top no-repeat #f1f2fd;
border:1px solid #a7aae3;
}
.menuDiv{
position: relative;
background-color: #CCCCCC;
width: 150px;
height: 100px;
}
.menuDiv ul{
position: absolute;
list-style: none;
margin: 0px;
padding: 0px;
}
.menuDiv ul li{
width: 150px;
text-align: center;
height: 30px;
border-bottom: dashed;
border-width: thin;
line-height: 30px;
cursor: pointer;
}
.menuDiv ul li:hover{
background-color: #66CCFF ;
}
/**
* Created by 周滎馬 on 2016/05/26.
*/
$.fn.extend({
initFileManager:function(opt){
if ( typeof opt != "object" ) {
alert('參數錯誤!');
return;
}
var fileManagerId = $(this).attr("id");
$.each(getInitFileManagerOption(fileManagerId),function(key,value){
if(opt[key]==null){
opt[key] = value;
}else if(key == "contentMenu"){
opt[key]=$.merge(value,opt[key]);
}
});
$("#"+fileManagerId).data("fileManagerOpt",opt);
initWithConment(fileManagerId);
setClickObjectMessage(fileManagerId);
}
});
function getInitFileManagerOption(fileManagerId){
var initOption={
"fileManagerId":fileManagerId,
"fileHead":true,
"contentMenu":[
{
"text":"新建",
"code":"1",//非文件夾右鍵菜單
"func":function(){
createFile(fileManagerId);
}
},
{
"text":"刪除",
"code":"2",//文件夾右鍵菜單
"func":function(){
deleteFile(fileManagerId);
}
},
{
"text":"重命名",
"code":"2",
"func":function(){
chengeFileName(fileManagerId);
}
}
]
};
return initOption;
}
function initWithConment(fileManagerId){
var initContentDiv = "";
var opt = $("#"+fileManagerId).data("fileManagerOpt");
if(opt.fileHead) {
initContentDiv += "<div class='fileHeader'>";
initContentDiv += "<button οnclick=createFile('"+fileManagerId+"')>創建文件夾</button><button οnclick=removeAllFile('"+fileManagerId+"')>清空文件夾</button><button οnclick=deleteFile('"+fileManagerId+"')>刪除文件夾</button>";
initContentDiv += "</div>";
initContentDiv += " <div class='fileDivision'></div>";
}
initContentDiv+="<div class='fileContentDiv'>";
initContentDiv+="<ul class='fileList'>";
//下面這兩句僅僅測試，刪除就好
initContentDiv+="<li><div>新建文件夾1</div></li>";
initContentDiv+="<li><div>新建文件夾2新建</div></li>";
initContentDiv+=" </ul>";
initContentDiv+="</div>";
$("#"+fileManagerId).append(initContentDiv);
}
/**
* zxm
* 作用:創建文件
*/
function createFile(fileManagerId){
//還需要添加寫入數據庫的代碼
$(".fileList").append("<li><input type='text' class='cleateInputFile' value='新建文件夾' autofocus='autofocus' οnfοcus='this.select()' οnblur='fileNameSuccess(this)'></li>")
setClickObjectMessage(fileManagerId);
}
/*失去焦點，也就是文件名輸入成功的時候*/
function fileNameSuccess(obj){
var parentObj=$(obj).parent();
var objValue = $(obj).val();
if(objValue==""||objValue==null){
alert("文件名不能爲空");
$(obj).focus();
return;
}
$(obj).remove();
$(parentObj).append("<div>"+objValue+"</div>")
}
/**
* zxm
* 作用:設置文件點擊事件
* @param fileManagerId 文件管理的根路徑
*/
function setClickObjectMessage(fileManagerId){
//文件上的點擊事件
$("#"+fileManagerId+" .fileContentDiv .fileList li").mousedown(function(e){
var clickObj = $("#"+fileManagerId).data("clickObj");
$(this).on('contextmenu', function(){
return false; //設置返回爲false，設置爲true則返回右鍵菜單，大家可以自己修改代碼試試
});
if(e.which==3){//右鍵點擊
if(clickObj!=null){
$(clickObj).removeClass("selectFile");
}
$(this).addClass("selectFile");
clickObj = this;
$("#"+fileManagerId).data("clickObj",clickObj);
var position = {
"X": e.clientX,
"Y": e.clientY
}
initWithConmentMenu(fileManagerId,position,"2");
}else if(e.which==1){//左鍵點擊
if(clickObj!=null){
$(clickObj).removeClass("selectFile");
}
$(this).addClass("selectFile");
clickObj = this;
$("#"+fileManagerId).data("clickObj",clickObj);
}
});
//文件外空白的點擊事件
$(".fileContent:not(li)").mousedown(function(e){
var isFile = false;
if(e.which==1) {
if($(e.target).attr('class')!="menu") {
removeMenu(fileManagerId);
}
}
if(e.which==3) {
if($(e.target).attr('class')!="selectFile"){
$(this).on('contextmenu', function(){
return false; //設置返回爲false，設置爲true則返回右鍵菜單，大家可以自己修改代碼試試
});
var position = {
"X": e.clientX,
"Y": e.clientY
}
initWithConmentMenu(fileManagerId,position,"1");
}
}
});
}
/**
* zxm
* 作用：刪除文件
* @param fileManagerId
*/
function deleteFile(fileManagerId){
if(confirm("確認要刪除？"))
{
var clickObj = $("#" + fileManagerId).data("clickObj");
if (clickObj != null) {
$(clickObj).remove();
} else {
alert("沒有選擇的文件，請選擇要刪除的文件！");
}
}
}
/**
* zxm
* 作用：移除所有的文件
* @param fileManagerId
*/
function removeAllFile(fileManagerId){
$("#"+fileManagerId +" .fileList").html("");
}
/**
* zxm
* 作用：初始化右鍵菜單
* @param fileManagerId
*/
function initWithConmentMenu(fileManagerId,position,code){
//alert(position.X+","+position.Y);
var menuLiNimber = 0;
var opt = $("#"+fileManagerId).data("fileManagerOpt");
removeMenu(fileManagerId);
var menuData ="";
menuData+="<div class='menuDiv' id='"+fileManagerId+"_menuDiv'>";
menuData+="<ul>";
for(var i = 0; i<opt.contentMenu.length;i++){
if(code==opt.contentMenu[i].code) {
menuLiNimber++;
menuData += "<li class='menu' οnclick= dofuntionWithMenu('"+fileManagerId+"','"+i+"')>"+opt.contentMenu[i].text+"</li>"
}
}
menuData+="</ul>";
menuData+="</div>";
$("#"+fileManagerId).append(menuData);
var X = position.X+10;
var Y=0;
if(opt.fileHead) {
Y = position.Y - 60;
}else{
Y = position.Y;
}
$("#"+fileManagerId+"_menuDiv").css({"top":Y,"left":X});
var height = menuLiNimber*30;
$("#"+fileManagerId+"_menuDiv").css("height",height);
}
/**
* zxm
* 作用：移除菜單
* @param fileManagerId 文件管理id
*/
function removeMenu(fileManagerId){
var menuObj = $("#"+fileManagerId+"_menuDiv");
if(menuObj!=null){
menuObj.remove();
}
}
/**
* zxm
* 作用：執行menu中的方法函數
* @param fileManagerId 文件管理id
* @param menuContentId 菜單所在的位置
*/
function dofuntionWithMenu(fileManagerId,menuContentId){
var opt = $("#"+fileManagerId).data("fileManagerOpt");
removeMenu(fileManagerId);
opt.contentMenu[menuContentId].func();
}
/**
* zxm
* 作用：更改文件名
* @param fileManagerId 文件管理id
*/
function chengeFileName(fileManagerId){
var clickObj = $("#"+fileManagerId).data("clickObj");
if(clickObj!=null){
var divValue = $(clickObj).children("div").html();
$(clickObj).children("div").remove();
$(clickObj).append("<input type='text' class='cleateInputFile' value='"+divValue+"' autofocus='autofocus' οnfοcus='this.select()' οnblur='fileNameSuccess(this)'>");
}else{
alert("沒有選擇的文件，請選擇要修改文件名的文件！");
}
removeMenu(fileManagerId);
}程序已經打包在百度網盤上：http://pan.baidu.com/s/1eSCvJe6