操作系统课设之在线文档管理（2）_操作系统在线文档-优快云博客

本文介绍了一个文件管理界面的实现过程，使用HTML、CSS和JavaScript构建基本框架，通过jQuery UI增强交互体验。文章提供了完整的代码示例及部分效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次主要介绍代码界面，

由于需要先前学习过css和JavaScript的知识，并且添加注释工程量太大。

故希望能够自行学习，与了解。由于代码中会用到已经编写好的.js文件和.css文件，故如果想做这个程序的同学，可以联系本人来得到这些文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>lxs</title>
<link rel="stylesheet" href="cikonss.css"/>

<!-- javascript   -->
<script src="jquery-ui/js/jquery-1.10.2.js"></script>
<script src="jquery-ui/js/jquery-ui-1.10.4.custom.js"></script>
<script src="jquery-ui/js/jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="jquery-ui/css/ui-lightness/jquery-ui-1.10.4.custom.css"  type="text/css"/>


<!-- css  -->
<style type="text/css">
    <!--css样式表-->
    body,p,div,ul,ol,table,dl,dd,dt{
    	margin:0;
    	padding:0;
    }
    a{
    	text-decoration:none;
    }
    ul,li{
		list-style: none;
		float: left;
	}
    <!--导航栏-->
    #top{
		width:100%;
		height:48px;
		margin:0 auto;
		background: #E2E2E2;
	}
	#navi a{
		display: block;
		width:48px;
		height: 48px;
	}
    .small{
		width:25px;
		height:25px;
		border:0;
}
</style>
<script type="text/javascript">
	function show(dis){
		document.getElementById(dis).style.display="block";
	}
	function delFile(filename,path){
		if(confirm("确定删除吗？"))
		{
			location.href="index.php?act=delFile&filename="+filename+"&path="+path;
		}
	}
	function delFolder(dirname,path){
		if(window.confirm("您确定要删除嘛?")){
			location.href="index.php?act=delFolder&dirname="+dirname+"&path="+path;
		}
	}
	function showDetail(t,filename){
		$("#showImg").attr("src",filename);
		$("#showDetail").dialog({
			height:"auto",
			width:"auto",
			position:{my:"center",at:"center",collision:"fit"},
			modal:false,//是否模态对话框
			draggable:true,//是否能拖动
			resizable:true,
			title:t,
			show:"slide",
			hide:"explode"
		});
	}
	function goBack($back){
		location.href="index.php?path="+$back;
	}

</script>


</head>


<body>
<div id="showDetail" style="display: none"><img src="" id="showImg" alt=""/></div>
<h1>lxs文件管理</h1>

<!-- 导航栏 -->
<div id="top">	
	<ul id="navi">
		<li><a href="index.php" title="主目录"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-home"></span></span></a></li>
		<!-- href="#" 跳转到当前页面 -->
		<li><a href="#"  onclick="show('createFile')" title="新建文件" ><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-file"></span></span></a></li>
		<li><a href="#"  onclick="show('createFolder')" title="新建文件夹"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-folder"></span></span></a></li>
		<li><a href="#" onclick="show('uploadFile')"title="上传文件"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-upload"></span></span></a></li>
		
	</ul>

</div>


<form action="index.php" method="post" enctype="multipart/form-data"> <!-- 将数据传送到index.php enctype规定编码方式-->
<table width="100%" border="1" cellpadding="5" cellspacing="0" bgcolor="#ABCDEF" align="center">
<!-- 隐藏栏 -->
	<tr>
		<td>编号</td>
		<td>名称</td>
		<td>类型</td>
		<td>大小</td>
		<td>可读</td>
		<td>可写</td>
		<td>可执行</td>
		<td>创建时间</td>
		<td>修改时间</td>
		<td>访问时间</td>
		<td>操作</td>
	</tr>



</table>
</form>


</body>
</html>

效果图