后台管理基本页面框架（JS/CSS）资源-CSDN文库

共11个文件

html：8个

js：2个

css：1个

管理页面

后台管理

5星 · 超过95%的资源需积分: 9 77 浏览量 2012-04-11 15:50:50 上传评论收藏 40KB ZIP 举报

【后台管理基本页面框架（JS/CSS）】是一个自定义的管理后台系统的基础架构，主要由JavaScript和CSS技术构建，旨在提供一个高效、易用且具有可扩展性的平台，用于各种后台管理任务。这个框架包含了实现后台管理所需的基本页面元素和样式，能够快速搭建出功能齐全的后台系统。在描述中提到的几个关键页面类型： 1. **基本页**：这是后台系统的入口页面，通常包含登录和注销功能，以及导航菜单，为用户提供访问其他功能的起点。 2. **列表页**：这类页面用于展示数据列表，如用户列表、订单列表等，通常包含排序、筛选和分页功能，便于用户查看和管理大量数据。 3. **设置页**：用于配置系统或用户特定的参数，例如修改密码、更新个人信息、设置权限等。 4. **提示页**：这些页面用于显示操作结果或重要通知，如成功提示、错误警告、确认对话框等，确保用户了解他们的操作状态。从提供的压缩包子文件名称来看，我们可以推断出以下内容： - `setting.html`：这可能是设置页的代码，用户可以在此进行个人或系统设置。 - `images`：这是一个包含图像资源的文件夹，可能包含框架中使用的图标、背景图片和其他视觉元素。 - `content.html`：可能代表内容页，用于显示具体的信息或执行特定功能。 - `login.html`：登录页面的代码，用户在此输入凭证以访问后台系统。 - `index.html`：后台管理框架的主页面，可能包含导航结构和其他全局元素。 - `2.html`, `1.html`, `list.html`, `message.html`：这些可能是其他特定功能或页面的实例，如列表页、消息提示页等，具体内容需要查看源代码才能确定。这个框架的JS部分可能包括了页面交互逻辑、AJAX数据请求、表单验证等功能，而CSS部分则负责页面布局、样式设计和用户体验优化。使用这样的框架，开发者可以快速创建出符合企业需求的后台管理系统，节省时间和开发成本。同时，良好的代码组织和模块化设计也有利于后期的维护和升级。

资源推荐

资源详情

资源评论

收起资源包目录

admin-v1.0.zip （11个子文件）

setting.html 2KB

images

jquery.min.js 92KB

admin.js 48B

admin.css 2KB

content.html 767B

index.html 4KB

2.html 335B

list.html 2KB

1.html 333B

message.html 695B

<!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>管理中心 - 首页</title> </head> <style media="all" type="text/css"> html, body{ font-family:'宋体'; font-size:14px; } html, body, ul, li{ margin:0; padding:0; } ul{ list-style:none; } a{ text-decoration:none; } a:hover{ text-decoration:underline; } .fl{ float:left; } .fr{ float:right; } #top{ height:30px; overflow:hidden; background:#2D2D2D; position:fixed; left:0; top:0; right:0; z-index:100; } #top .fl{ padding-left:15px; } #top ul li{ display:block; height:30px; } #top .fl ul li{ float:left; margin-right:5px; } #top .fr ul li{ float:right; margin-left:5px; } #top a{ color:#D7D7D7; display:block; padding:7px 3px; clear:both; } #top a:hover{ background:#4B4B4B; text-decoration:none; color:#fff; } #top .fl ul li select{ position:relative; top:2px; } #title{ background:#F5F5F5; height:74px; overflow:hidden; border-bottom:#E5E5E5 1px solid; position:fixed; left:0; top:30px; right:0; z-index:100; } #subject{ padding:24px 10px; font-size:20px; color:#DD3B3B; } #side{ top:105px; left:0; width:200px; overflow:hidden; padding-top:25px; position:fixed; left:0; top:104px; right:0; } #side ul{} #side ul li{ height:30px; overflow:hidden; } #side ul li a{ padding-left:40px; display:block; border-left:5px #fff solid; color:#4B4B4B; height:30px; line-height:30px; font-size:12px; } #side ul li a.cur{ border-left:5px #DD3B3B solid; color:#DD3B3B; } #side ul li a:hover{ text-decoration:none; background:#F5F5F5; border-left:5px #F5F5F5 solid; } #side ul li a.cur:hover{ border-left:5px #DD3B3B solid; } #content{ position:absolute; left:220px; top:105px; right:0; } </style> <script language="javascript" src="images/jquery.min.js"></script> <script language="javascript"> $(document).ready(function(){ $("#side a").each(function(i){ if($(this).hasClass('cur')){ loadContent($(this).attr('href')); } //alert('d'); $(this).click(function(e){ var e = e || window.event; //alert(e); e.preventDefault(); e.stopPropagation() if(!$(this).hasClass('cur')){ $("#side a").each(function(i){ if($(this).hasClass('cur')){ $(this).removeClass('cur'); } }); $(this).addClass('cur'); } loadContent($(this).attr('href'), $(this).attr('target')); return false; }); }); if(document.getElementById('quickRequest')){ $("#quickRequest").change(function(){ var i = this.options.selectedIndex; var op = this.item(i); if($(op).attr('target') == '_blank'){ location.href = $(this).val(); }else{ loadContent($(this).val()); } }); } }); function resizeIframe(iframe){ iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px'; var title = ''; if(iframe.contentDocument.getElementById('subject')){ var title = iframe.contentDocument.getElementById('subject').innerHTML; } if(title.length > 4){ $("#subject").html(title); } } function loadContent(src, t){ if(t && t == '_top'){ window.top.location.href = src; }else{ $("#iframe").attr('src', src); } } </script> <body> <div id="top"> <div class="fl"> <ul> <li><select id="quickRequest"> <option>快速访问</option> <option value="1.html">1.html</option> <option value="2.html">2.html</option> </select></li> <li><a href="index.html">管理一</a></li> <li><a href="index.html">管理二</a></li> <li><a href="index.html">管理三</a></li> <li><a href="index.html">管理四</a></li> </ul> </div> <div class="fr"> <ul> <li><a href="index.html">退出</a></li> <li><a href="login.html">登录</a></li> </ul> </div> </div> <div id="title"> <div id="subject">操作标题</div> </div> <div id="side"> <ul> <li><a href="content.html" class="cur">正文页</a></li> <li><a href="list.html" class="">列表页</a></li> <li><a href="setting.html" class="">配置页</a></li> <li><a href="message.html" class="">提示消息</a></li> </ul> </div> <div id="content"> <iframe id="iframe" scrolling="no" src="about:blank" frameborder="0" width="800" height="0" onload="resizeIframe(this);"></iframe> </div> </body> </html>

评论收藏

内容反馈