管理系统首页模版(20160519)

最新推荐文章于 2022-11-08 14:32:40 发布
最新推荐文章于 2022-11-08 14:32:40 发布
阅读量590 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/low584710047/article/details/51385982
版权 
<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<style>
			html,body{
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				min-width: 800px;
				min-height: 600px;
				background-color: #e7eff7;
			}
			.head{
				height: 40px;
				background-color: #536ea7;
			}
			.foot{
				height: 20px;
				background-color: #f5f5f5;
			}
			.content{
				position: relative;
			}
			.left-content{
				width: 200px;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			.right-content{
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
			}
			.left-content-tree{
				width: 199px;
				height: 100%;
				border-right: 1px solid #95B8E7;
			}
			.foot-content{
				height: 19px;
				line-height: 19px;
				border-top: 1px solid #95B8E7;
			}









			.EasyLib-Ctl-Tab-Title-Container{
				background-color: #E0ECFF;
				position: relative;
				top: 0;
				left: 0;
				border-bottom: 1px solid #95B8E7;
			}
			.EasyLib-Ctl-Tab-Title-Close{
				font-size: 12px;
				font-weight: 500;
				color: #8A2BE2;
				position: absolute;
				top: 8px;
				right: 20px;
			}
			.EasyLib-Ctl-Tab-Title-Close:hover{
				cursor: pointer;
			}
			.EasyLib-Ctl-Tab-Title{
				background-color: #e7eff7;
				display: inline-block;
				border: 1px solid #95B8E7;
				border-bottom-width: 0;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				height: 30px;
				line-height: 30px;
				padding: 0 5px;
				margin: 1px 1px 0 1px;
			}
			.EasyLib-Ctl-Tab-Title:hover{
				cursor: pointer;
			}
			.EasyLib-Ctl-Tab-Title-Select{
				background-color: #fff;
				border-bottom-style: none;
			}
			.EasyLib-Ctl-Tab-Content{
				background-color: #FFF5EE;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="head"></div>
		<div class="content">
			<div class="left-content">
				<div class="left-content-tree">
					<input type="button" class="btnTab" value="打开tab" />
				</div>
			</div>
			<div class="right-content"></div>
		</div>
		<div class="foot">
			<div class="foot-content"></div>
		</div>

		<script src="http://cloud.xingfa.com/Cloud/Statics/js/jquery-1.8.0.min.js"></script>
		<script>
			(function($) {
				$.fn.addTab = function(dict) {
					var config = {
						tabCT: "EasyLib-Ctl-Tab-Container",
						tabTitleCT: "EasyLib-Ctl-Tab-Title-Container",
						tabContentCT: "EasyLib-Ctl-Tab-Content-Container",
						tabTitle: "EasyLib-Ctl-Tab-Title",
						tabContent: "EasyLib-Ctl-Tab-Content",
						tabTitleClose: "EasyLib-Ctl-Tab-Title-Close",
						tabTitleSelect: "EasyLib-Ctl-Tab-Title-Select",
						tabContentSelect: "EasyLib-Ctl-Tab-Content-Select"
					}





					var _this = $(this);
					var tabIndex = 0;
					if(!_this.find("." + config.tabCT).length){
						tabIndex = 0;
					}
					else{
						var $tmp = _this.find("." + config.tabTitle);
						var maxNum = dict.maxNum ? dict.maxNum : 3;
						if($tmp.length >= maxNum){
							alert("已超出tab的最大数量,请先关闭部分tab再进行操作!");
							return;
						}
						tabIndex = Number($tmp.last().attr("data-index")) + 1;
					}
					if(!tabIndex){
						var str = [];
						str.push("<div class='" + config.tabCT + "'>");
						str.push("<div class='" + config.tabTitleCT + "'><div class='" + config.tabTitleClose + "'>[关闭tab]</div></div>");
						str.push("<div class='" + config.tabContentCT + "'></div>");
						str.push("</div>")
						_this.append(str.join(""));
					}

					$("." + config.tabTitleCT).append("<div class='" + config.tabTitle + "' data-index='" + tabIndex + "''>" + dict.title + "</div>");
					$("." + config.tabContentCT).append("<div class='" + config.tabContent + "' data-index='" + tabIndex + "''>" + dict.content + "</div>");

					var $tabTitle = _this.find("." + config.tabTitle);
					var $tabContent = _this.find("." + config.tabContent);

					var setWH = function(){
						$tabContent.css({
							"width": _this.width() + "px",
							"height":  _this.height() - _this.find("." + config.tabTitleCT).height() - 1 + "px"//titleCt border-bottom
						}).hide();
						$tabContent.last().show();

						$tabTitle.removeClass(config.tabTitleSelect);
						$tabTitle.last().addClass(config.tabTitleSelect);

						$tabContent.removeClass(config.tabContentSelect);
						$tabContent.last().addClass(config.tabContentSelect);
					};
					setWH();





					$(window).resize(function(){
						setWH();
					});





					$tabTitle.unbind("click").click(function(){
						$tabTitle.removeClass(config.tabTitleSelect);
						$(this).addClass(config.tabTitleSelect);

						$tabContent.hide();
						$tabContent.removeClass(config.tabContentSelect);
						var curIndex = $(this).index() - 1;
						$tabContent.eq(curIndex).show();
						$tabContent.eq(curIndex).addClass(config.tabContentSelect);
					});





					$("." + config.tabTitleClose).unbind("click").click(function(){
						$("." + config.tabTitleSelect).remove();
						$("." + config.tabContentSelect).remove();

						var $tabTitle = _this.find("." + config.tabTitle);
						var $tabContent = _this.find("." + config.tabContent);
						$tabTitle.last().addClass(config.tabTitleSelect);
						$tabContent.last().addClass(config.tabContentSelect);
						$tabContent.hide();
						$tabContent.last().show();

						if(!$tabTitle.length){
							_this.find("." + config.tabCT).remove();
						}
					});

					dict.success && dict.success();
				};
				$.fn.getTabWidth = function(){
					var _this = $(this);
					var $obj = _this.find(".EasyLib-Ctl-Tab-Title");
					var w = 0;
					for(var i=0; i<$obj.length; i++){
						var $tmp = $obj.eq(i);
						w += $tmp.width() + 4;
					}
					return w;
				};
			})(jQuery);





			(function(){
				$(function(){
					setH();
				});
				$(window).resize(function(){
					setH();
				});

				var TABINDEX = 0;
				$("body").on("click", ".btnTab", function(){
					var $obj = $(".right-content");
					var w = $obj.width();
					var tabW = $obj.getTabWidth();
					if(tabW >= w - 400){
						alert("已超出tab的最大数量,请先关闭部分tab再进行操作!");
						return;
					}
					$obj.addTab({
						maxNum: 100,
						title: "tab-" + (++TABINDEX),
						// content: "<iframe class='tabIframe' src='http://baidu.com' style='width:100%;height:100%;margin:0;padding:0;border-style:none;' frameborder='0'></iframe>"
						content: TABINDEX
					});
				});

				function setH(){
					var h = $(window).height();
					var minH = parseInt($("body").css("min-height"));//最小高度
					if(h < minH){
						h = minH;
					}
					$(".content").css({
						"height": h - $(".head").height() - $(".foot").height() + "px"
					});

					var w = $(window).width();
					var minW = parseInt($("body").css("min-width"));//最小宽度
					if(w < minW){
						w = minW;
					}
					$(".right-content").css({
						"width": w - $(".left-content").width() + "px"
					});
				};
			})();
		</script>
	</body>
</html>

继续去踢波
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
电商后台管理系统
zl960320的博客
07-10 1587
利用Vue.js实现电商后台管理系统 引言 刚学完Vue.js，现学现卖，着手做电商后台管理的项目，刚刚将首页中用户管理的用户列表写完，写这篇文章记录一下这个项目的思路以及做的过程中遇到的小问题。 一、项目初始化 采用cli3创建项目，在终端处输入vue create learnshop创建好项目，本人采用的是默认形式创建项目，路由或其他配置后续用到的时候在安装的。 创建好项目之后，安装路由，npm install vue-router --save，运行时依赖。安装好路由之后，将其放在src文件夹下面的
制作后台管理系统首页
li20020124的博客
05-18 3829
制作后台管理系统首页 （作者：李文成，撰写时间：2019年5月14日） 先看下成品 新建一个画布1366×768像素，然后使用矩形工具（U）颜色为：#2f323b；将顶部栏部分框选出来然后将一些后台网页中基本的设置放入顶部栏（也可以放到其他地方），字号的话是：30px；左上方是一个LOGO跟这个管理系统的名称，右上方的话是一个登录人员的头像和名称。 然后再做导航栏，左边导航栏部分也是使用矩形工具...
管理系统首页---可视化
每天都要努力学习哦~~
05-12 893
封装card组件 <slot name="footer"></slot> 留出具名插槽 使用 <template slot="footer"> <div>日销售额:6589</div> </template> <template> <div> <div class="card-header"> ...
bootstrap实现管理系统首页设计
weixin_52837547的博客
11-08 1292
bootstrap实现管理系统首页设计
后台管理系统——02首页布局
NanChen的博客
01-24 6515
续上01 layout.vue <template> <div class="home"> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> &l
HTML+CSS实现一个管理系统页面的制作
weixin_50815545的博客
11-01 2万+
1.先来看成品效果 2.html的源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="main.css"> <title>信息管理系统</title> </head> <body> <div class="head"> <div .
后台管理系统 - 页面布局设计
热门推荐
醉逍遥neo的博客
03-21 4万+
前端的中后台管理系统相比于其他普通项目，从开发设计的角度来说有几点比较特殊： 一个是权限设计，具体实现可参考：传送门。 一个是页面布局的设计，也是本文要说的。一个好的页面布局设计，无论是对于页面布局的稳定性，还是系统功能拓展的方便性，亦或是用户体验上，都有着重要的提升作用。 一、市面参考 先来看看市面上的一些优秀的开源系统项目的页面布局。 1、vue-element-admin vue-element-admin 是 vue 框架的一个优秀的后台管理系统开源项目，目前star数75k，也是我入行前端的启
Bootstrap扁平化设计的网站后台管理系统源代码下载
springmvc_springdata的专栏
05-29 4383
Bootstrap扁平化设计的网站后台管理系统源代码下载 源代码下载地址：http://www.zuidaima.com/share/1550463771626496.htm
axure最新后台管理系统模板原型.rp
06-25
2019年最新的 axure 后台管理系统原型rp。很实用。比较漂亮。 2019年最新的 axure 后台管理系统原型rp。很实用。比较漂亮。 2019年最新的 axure 后台管理系统原型rp。很实用。比较漂亮。 2019年最新的 axure 后台...
基于Vue的后台管理系统模板
02-18
基于Vue的后台管理系统模板
HTML漂亮的信息系统管理界面
03-22
HTML漂亮的信息系统管理界面； HTML CSS JQuery 信息系统 漂亮界面 UI
物业管理系统静态主页页面.rar
12-02
物业管理系统静态主页页面.rar
后台管理系统页面
12-11
自己写了一个javaweb网站 请大神门帮忙指点一下，本人自学javaweb，很多东西都是靠网上零散的资料学习 希望有大神帮忙指点，在这里谢谢大家 网站源码：http://download.csdn.net/detail/comeonjy/9513479 演示地址：www.comeonjy.top --------------------- 作者：comeonjy 来源：CSDN 原文：https://blog.csdn.net/comeonjy/article/details/51344946 版权声明：本文为博主原创文章，转载请附上博文链接！
各种好看的管理系统界面html源码
10-29
里面有10余种管理系统登录及其管理主界面，样式好看，可以根据自己的需要进行改写或直接取用。
基于vue + element UI 的后台管理系统模板
09-12
基于vue + element UI，实现登录页，系统主框架，动态路由的后台管理系统模板
vue电商网站后台管理系统模板
06-19
一款基于vue实现的电商网站后台管理系统模板，适合电子商务购物网站admin系统。界面使用tab选项卡的方式，无刷新效果很好。这套后台模板是github项目，请参考帮助文档。
员工信息管理系统后台HTML 模板
04-21
本模板适合用于管理系统，可以很好的实现靓丽页面【实例为员工信息管理系统，可以修改为其他的，用于借鉴哈】 本模板适合用于管理系统，可以很好的实现靓丽页面【实例为员工信息管理系统，可以修改为其他的，用于...
bootstrap 的自适应页面简单使用
继续去踢波的专栏
02-08 1万+
bootstrap 学习
jquery.flot.js 简单使用
继续去踢波的专栏
11-13 3641
折线图 $(function() { AlPriceQuery(); }); function AlPriceQuery(){ var result = { AvgPrice : [14030, 13980, 14060, 14000, 13930, 14030, 13980, 14060, 14000, 1393
vue + element ui 的后台管理系统首页模板
最新发布
07-25
Vue Element UI 后台管理系统首页模板是一个基于Vue.js和Element UI开发的后台管理系统的首页模板。它提供了丰富的UI组件和功能，帮助开发人员快速搭建和定制自己的后台管理系统。 该模板的特点是简洁、美观、易于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值