工作需求,写了个简单的文件管理界面,基于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 ;
}
js脚本代码:
/**
* 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