只用前端easyui 写一个Windows资源管理器并可以实现页面相互跳转(不用后端)
时间: 2024-02-04 20:02:11 浏览: 28
你可以使用EasyUI和前端技术来实现一个简单的Windows资源管理器。以下是一个示例代码,展示了如何创建主页面和两个子页面,并实现页面之间的跳转。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Windows资源管理器</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/icon.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui/dist/jquery.easyui.min.js"></script>
</head>
<body>
<div id="mainPage" class="easyui-layout" style="width:100%;height:100%;">
<div data-options="region:'west',split:true" style="width:200px;">
<ul id="treeMenu" class="easyui-tree">
<li>
<span>文件夹1</span>
<ul>
<li><span onclick="openPage('页面1')">页面1</span></li>
<li><span onclick="openPage('页面2')">页面2</span></li>
</ul>
</li>
<li><span>文件夹2</span></li>
</ul>
</div>
<div id="content" data-options="region:'center'" style="padding:10px;">
欢迎使用Windows资源管理器!
</div>
</div>
<script type="text/javascript">
$(function() {
$('#treeMenu').tree();
});
function openPage(pageName) {
$('#content').html('正在加载 ' + pageName + '...');
setTimeout(function() {
$('#content').html(pageName + ' 加载完成!');
}, 1000);
}
</script>
</body>
</html>
```
在上述代码中,我们使用了EasyUI的布局组件来创建一个主页面(`mainPage`),其中包含了一个左侧的树形菜单(`treeMenu`)和一个右侧的内容区域(`content`)。树形菜单中有两个子菜单,分别对应两个页面(页面1和页面2)。
当点击树形菜单中的子菜单时,会触发 `openPage` 函数,该函数会将选中的页面名称显示在内容区域,并模拟加载过程(这里使用了一个简单的延时操作来模拟加载过程)。
你可以根据自己的需求修改页面布局和样式,并在 `openPage` 函数中添加对页面的具体操作。这只是一个简单的示例,可以帮助你理解如何使用EasyUI来实现页面之间的跳转。