`

值得收藏的带自动选项卡生成的后台管理界面

    博客分类:
  • js
阅读更多
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{font-size:12px;}
ul,li,h2{margin:0;padding:0;}
ul{list-style:none;}
#top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00}
#top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;}
#topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left}
#topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;}
#main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;}
#leftMenu{width:150px;height:500px;background-color:#009900;float:left}
#leftMenu ul{margin:10px;}
#leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;}
#leftMenu ul li a{color:#000000;text-decoration:none;}
#content{width:750px;height:500px;float:left}
.content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;}
#footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;}
.content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;}
</style>
<script type="text/javascript">
window.onload=function(){
function $(id){return document.getElementById(id)}
var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器
var tags=menu.getElementsByTagName("li");//顶部菜单
var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单
var j;
//点击左侧菜单增加新标签
for(i=0;i<ck.length;i++){
ck[i].onclick=function(){
$("welcome").style.display="none"//欢迎内容隐藏
//循环取得当前索引
for(j=0;j<8;j++){
if(this==ck[j]){
if($("p"+j)==null){
openNew(j,this.innerHTML);//设置标签显示文字
 }
clearStyle();
$("p"+j).style.backgroundColor="yellow";
clearContent();
$("c"+j).style.display="block";
   }
 }
return false;
  }
 }
//增加或删除标签
function openNew(id,name){
var tagMenu=document.createElement("li");
tagMenu.id="p"+id;
tagMenu.innerHTML=name+"   "+"<img src='http://www.tjdadi.com.cn/off.gif' style='vertical-align:middle'/>";
//标签点击事件
tagMenu.onclick=function(evt){
clearStyle();
tagMenu.style.backgroundColor="yellow";
clearContent();
$("c"+id).style.display="block";
}
//标签内关闭图片点击事件
tagMenu.getElementsByTagName("img")[0].onclick=function(evt){
evt=(evt)?evt:((window.event)?window.event:null);
if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;
this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签
var color=tagMenu.style.backgroundColor;
//设置如果关闭一个标签时,让最后一个标签得到焦点
if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释
if(tags.length-1>=0){
clearStyle();
tags[tags.length-1].style.backgroundColor="yellow";
clearContent();
var cc=tags[tags.length-1].id.split("p");
$("c"+cc[1]).style.display="block";
 }
else{
clearContent();
$("welcome").style.display="block"
   }
  }
}
menu.appendChild(tagMenu);
}
//清除标签样式
function clearStyle(){
for(i=0;i<tags.length;i++){
menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00";
  }
}
//清除内容
function clearContent(){
for(i=0;i<7;i++){
$("c"+i).style.display="none";
 }
}
}
</script>
</head>
<body>
<div id="top">
<h2>管理菜单</h2>
<div id="topTags">
<ul>
</ul>
</div>
</div>
<div id="main"> 
<div id="leftMenu">
<ul>
<li>个人资料</li>
<li>相册管理</li>
<li>日志管理</li>
<li>留言管理</li>
<li>风格管理</li>
<li>系统管理</li>
<li>帮助信息</li>
<li>再加一个</li>
</ul>
</div>
<div id="content">
<div id="welcome" class="content" style="display:block;">
  <div align="center">
    <p> </p>
    <p><strong>欢迎使用用户管理系统!</strong></p>
    <p> </p>
    </div>
</div>
<div id="c0" class="content">个人资料</div>
<div id="c1" class="content">相册管理</div>
<div id="c2" class="content">日志管理</div>
<div id="c3" class="content">留言管理</div>
<div id="c4" class="content">风格管理</div>
<div id="c5" class="content">系统管理</div>
<div id="c6" class="content">帮助信息</div>
</div>
</div>
<div id="footer">copyright for lalasxc </div>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>

 

 

效果:



 

 

 

 

来自:http://www.alixixi.com/Dev/HTML/jsrun/color/2008/2008050780183.html

  • 大小: 45.5 KB
分享到:
评论

相关推荐

    tab选项后台管理界面设计

    "tab选项后台管理界面设计"这个主题,聚焦于如何构建一个具有可生成和删除功能的选项卡系统,为后台操作提供便捷的导航和组织结构。选项卡设计在用户界面(UI)中扮演着重要角色,它允许用户在多个视图或功能之间...

    C#选项卡Listview自动生成需要的来看

    以上就是关于“C#选项卡Listview自动生成”的关键知识点,包括选项卡控件、ListView控件的使用,动态添加功能的实现,以及性能优化和代码组织策略。通过这些知识,你可以构建出功能丰富的用户界面,满足各种数据展示...

    axure后台管理系统原型rp.rar

    原型中这部分通常以选项卡或侧边栏的形式呈现。 在实现过程中,Axure的特性如动态面板、中继器、条件逻辑、函数等都将发挥重要作用。动态面板用于模拟页面间的跳转和状态切换;中继器则可实时显示数据列表,支持...

    asp.net选项卡

    如果选项卡的内容需要动态生成,如从数据库中获取,ASP.NET提供了强大的数据绑定机制,如`Repeater`或`ListView`控件,可以方便地绑定数据源并渲染成选项卡。 7. **异步更新**: 对于需要实时更新的选项卡,可以...

    网页选项卡实例.net

    - 示例代码:展示如何在.NET后台代码中实现选项卡功能。 通过研究这些文件,你可以学习到如何在.NET环境中构建功能完善的网页选项卡系统,同时掌握母版页和服务器端控件的使用技巧。这将有助于提升你的.NET开发技能...

    选项卡网页特效

    在Web开发中,选项卡(Tab)是一种常见的用户界面元素,用于组织和展示大量内容,让用户可以在多个独立的视图间切换,而无需加载新页面。这个“选项卡网页特效”压缩包提供了一些JavaScript实现的示例,对于学习和...

    ASP.NET漂亮的选项卡

    在实际应用中,我们可能会结合服务器端和客户端技术,比如在服务器端生成选项卡结构,然后在客户端进行交互处理。这种方法既能利用服务器端控件的便利性,又能利用客户端脚本提高性能。 在"选项卡"这个压缩包中,...

    asp.net TabControls 选项卡

    本文将深入探讨如何在ASP.NET中实现`TabControl`选项卡功能,特别是如何在后台动态生成这些选项卡。 首先,`TabControl`是ASP.NET Web Forms中的一个控件,属于`System.Web.UI.WebControls`命名空间。它允许开发者...

    第39章 后台管理界面--导航栏设计1

    `tabs`是EasyUI中的选项卡组件,它可以创建和管理多个标签页,提供分页浏览的功能。 总结来说,本章的学习重点是理解和实现后台管理界面的退出登录逻辑以及基于EasyUI的导航栏设计。退出登录确保了用户安全,导航栏...

    react-dyn-tabs:React动态选项卡,多个选项卡,多选项卡

    本项目“react-dyn-tabs”专注于提供一个React组件,实现动态选项卡功能,适用于那些需要根据用户操作或数据变化自动生成和管理选项卡的应用。 首先,让我们深入了解一下“动态选项卡”。在传统的网页设计中,选项...

    H+框架通过按钮新增选项卡功能

    H+框架是一个基于Bootstrap的响应式后台管理界面模板,它提供了丰富的UI组件和交互设计,以帮助开发者快速构建现代Web应用。 Bootstrap是一个流行的前端开发框架,它提供了栅格系统、组件和JavaScript插件,用于...

    代码简单功能强大的管理界面

    综上所述,这个项目提供了一种基于JavaScript、CSS和DOM的管理界面模板,特别是其横向标签卡功能,对于需要构建后台管理系统或提升用户界面体验的开发者来说,是一个值得参考和学习的资源。通过深入研究项目代码,...

    免费后台管理模板

    这个模板因其功能强大、灵活性高而备受推崇,它可以帮助开发人员快速搭建出功能丰富的后台界面,大大节省了时间和精力。 在描述中提到的“强大的让你吐血”,这可能是指该模板包含了一系列高级功能和组件,例如用户...

    android activity选项卡 listview 下拉刷新 仿新浪微博

    在Android应用开发中,"android activity选项卡 listview 下拉刷新 仿新浪微博"是一个常见的功能需求,它涉及到多个关键知识点,包括Activity管理、ListView的使用、下拉刷新(Pull-to-Refresh)机制以及模仿知名...

    使用layui实现的左侧菜单栏以及动态操作tab项(动态生成的菜单栏)

    layui是一款轻量级的前端框架,它提供了丰富的组件和便捷的API,广泛应用于后台管理系统开发。在本项目中,我们看到“使用...通过对layui布局、菜单和选项卡组件的熟练运用,开发者能够轻松实现功能丰富的后台界面。

    基于Springboot+Mybatis+ SpringMvc+springsecrity+Redis完整网站后台管理系统

    使用了layui的弹出层、菜单、文件上传、富文本编辑、日历、选项卡、数据表格等 表单数据采用bootstrapValidator校验,简单快捷方便 运行环境 jdk8+mysql+redis+IntelliJ IDEA+maven 项目技术(必填) Springboot+...

    自动生成word电脑配置修改.docx

    - **安全**:切换到“安全”选项卡,这里需要关注“启动和激活权限”、“访问权限”和“配置权限”。通常,为了使Word能正常运行并与其他应用和服务交互,你需要为“网络服务”(Network Service)和“IIS_IUSRS”...

    基于springmvc+easyui+权限控制的后台管理系统带数据库文件可直接运行

    1. **组件丰富**:EasyUI提供了各种常用的Web组件,如datagrid(数据网格)、treegrid(树形表格)、dialog(对话框)、tabs(选项卡)等,简化前端开发。 2. **主题支持**:EasyUI提供了多种预设主题,可以快速...

    asp.net+ajax实现选项卡

    ASP.NET与AJAX技术结合,可以创建出交互性更强、用户体验更优的选项卡功能。在Web开发中,选项卡通常用于将大量信息组织到有限的屏幕空间内,让用户能够轻松浏览和切换不同内容区域。下面我们将深入探讨如何利用C#...

Global site tag (gtag.js) - Google Analytics