1

application/index/view/global/frame_tpl.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Pagination.css">
     <link rel="stylesheet" href="/resource/css/bootstrap-theme.min.css">
     <link rel="stylesheet" href="/resource/css/bootstrap-datetimepicker.min.css">
+    <link rel="stylesheet" href="/resource/css/b-liu.tabs.css">
+    
     <title>同联商业</title>
     <style>
     	/*隐藏显示按钮(梯形)样式代码*/
@@ -78,7 +80,6 @@
 </div>
 
 <div id="wrapper" style="width:98% !important;float:right !important;display:inline">
-    {include file="global/navigation" /}
     {__CONTENT__}
     {include file="global/footer_tpl" /}
 </div>

application/index/view/performance_ranking/performance_ranking.html

 {layout name="global/frame_tpl" /}
+{include file="global/navigation" /}
 <input type="hidden" class="page-load" id="performance_ranking" />
 <style>
 	/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  

application/index/view/realtime/realtimePerformance.html

@@ -93,7 +93,7 @@
 }
 </style>
 
-<div id="page-content-wrapper">
+<div id="page-content-wrapper tab-content">
 	<div class="container">
 		<div class="row">
 			<div class="">

public/resource/css/b-liu.tabs.css

+@CHARSET "UTF-8";
+.bTabs{
+	margin-top: 10px;
+	height: 100%;
+}
+.bTabs button.navTabsCloseBtn {
+	font-size: 23px !important;
+	cursor: pointer;
+	
+	margin-left: 10px;
+	font-style: normal;
+	line-height: 20px;
+	font-family: inherit;
+	font-weight: normal;
+	
+	position: relative;
+    top: -2px;
+    color: #AAAAAA;
+    
+    -webkit-appearance: none;
+    padding: 0;
+    cursor: pointer;
+    background: 0 0;
+    border: 0;
+    
+	float: right;
+    line-height: 1;
+    text-shadow: 0 1px 0 #fff;
+}
+.bTabs button.navTabsCloseBtn:hover{
+	color: red !important;
+	font-weight: 700;
+}
+.bTabs .nav-tabs{
+	margin-bottom: 5px;
+	padding-left: 20px;
+}
+.bTabs .nav-tabs>li {
+	margin-right: 5px;
+}
+.bTabs .nav-tabs>li>a {
+	padding-top: 5px;
+	padding-bottom: 5px;
+	color: #666666;
+}
+.bTabs .nav-tabs li.active a {
+	color: #227AD7;
+	font-weight: bold;
+}
+.bTabs .nav-tabs li.active a button.navTabsCloseBtn{
+	color: #666666;
+}
+.bTabs div.tab-content {
+	height: 100%;
+	overflow-y: hidden;
+}
+.bTabs div.tab-content div.tab-pane {
+	height: 100%;
+}
\ No newline at end of file

public/resource/js/main.js

@@ -23,6 +23,10 @@ require.config ({
 		'blow-up': 'lib/js/blow-up',
 		'97datePicker': 'lib/js/my97datePicker/WdatePicker',
 		'photo-gallery': 'lib/js/jquery-photo-gallery/jquery.photo.gallery',
+		'b-liu-tabs': 'lib/js/b-liu.tabs',
+		'demo-liu': 'lib/js/demo-liu',
+		
+		
 
     },
     'shim': {
@@ -71,6 +75,14 @@ require.config ({
 		'photo-gallery': {
 			'deps': ['jquery'],
 			'exports': 'photo-gallery'
+		},
+		'b-liu-tabs': {
+			'deps': ['jquery'],
+			'exports': 'b-liu-tabs'
+		},
+		'demo-liu': {
+			'deps': ['jquery'],
+			'exports': 'demo-liu'
 		}
 
     },
@@ -83,4 +95,4 @@ require.config ({
     }
 });
 
-require(['require', 'jquery', 'doT', 'layer', "datetimepicker", 'bootstrapJs', 'pagination', 'paginationStart', 'checkLogin', 'photo-gallery', '97datePicker', 'app/public']);
\ No newline at end of file
+require(['require', 'jquery', 'doT', 'layer', "datetimepicker", 'bootstrapJs', 'pagination', 'paginationStart', 'checkLogin', 'photo-gallery','b-liu-tabs','demo-liu', '97datePicker', 'app/public']);
\ No newline at end of file

public/resource/lib/js/b-liu.tabs.js

+/**
+ * b.tabs.js
+ * base on Bootstrap Tab
+ * 
+ * 导航功能扩展，可动态添加，可关闭
+ * 使用后可将系统改造为以标签页来打开页面的模式
+ * 
+ * @author Terry
+ * created : 2016.03.17
+ * 
+ * changelog:
+ * 2017.07.21 - 重构代码
+ *              解决IE下关闭标签页后切换其它标签页不能获得焦点问题
+ *  
+ */
+!function ($) {
+	"use strict";
+	
+	var defaults = {
+		/**
+		 * 载入标签页内容，登录超时后跳转的链接
+		 */
+		'loginUrl' : '/',
+		/**
+		 * 自定义样式
+		 */
+		'className' : undefined,
+		/**
+		 * 浏览窗口尺寸发生变化时执行的回调
+		 */
+		'resize' : undefined
+	};
+	
+	/**
+	 * 常量
+	 */
+	var constants = {
+		closeBtnTemplate : '<button type="button" class="navTabsCloseBtn" title="关闭" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>',
+		//设置该样式的tab不会被关闭
+		noCloseClass : 'noclose',
+		prefixKey : 'bTabs_'
+	};
+	
+	var bTabs = function(box,p){
+		this.$container = box;
+		this.openTabs = new Array();
+		this.p = p;
+	};
+	/**
+	 * 版本
+	 */
+	bTabs.version = '1.0';
+	/**
+	 * 初始化
+	 */
+	bTabs.prototype.init = function(){
+		var self = this,c = constants, $tabs = this.$container, openTabs = this.openTabs, p = this.p;
+		
+		$($tabs).addClass('bTabs');
+		if(p.className) $($tabs).addClass(p.className);
+		
+		$('ul.nav-tabs a',$($tabs)).each(function(i,row){
+			var li = $(this).closest('li');
+			if(li && !$(li).hasClass(c.noCloseClass)) $(row).append(c.closeBtnTemplate);
+		});
+		$('div.tab-content div.tab-pane',$tabs).each(function(i,row){
+			openTabs.push($(this).attr('id'));
+		});
+		//为关闭图标绑定事件，并适用于动态新增的
+		$('ul.nav-tabs',$tabs).on('click','button',function(e){
+			var id = $(this).parent().attr('href').replace('#', '');
+			self.closeTab(id);
+		});
+		if(p && p.resize && $.isFunction(p.resize)){
+			$(window).off('resize.bTabs').on('resize.bTabs',function(e){
+				p.resize();
+			});
+		}
+	};
+	/**
+	 * 新增一个tab，但如果是已存在的tab则只是激活它，而不再新增
+	 * 
+	 * @param id {string} 模块ID 
+	 * @param title {string} 标题
+	 * @param url {string} 目标链接地址
+	 * @param loginCheck {function}可选参数，不传则直接使用iframe打开界面
+	 */
+	bTabs.prototype.addTab = function(id,title,url,loginCheck){
+		if(!id || !title || !url) console.error('新增tab时，id,title,url参数为必须传递参数！');
+		var c = constants, $tabs = this.$container, openTabs = this.openTabs, p = this.p;
+		var tabId = c.prefixKey + id;
+		if(openTabs && $.isArray(openTabs) && openTabs.length>0){
+			var exist = false;//是否已存在
+			$.each(openTabs,function(i,row){
+				if(row == tabId){
+					exist = true;
+					return false;
+				}
+			});
+			//若功能已存在，则直接切换
+			if(exist){
+				$('ul.nav-tabs a[href="#'+tabId+'"]',$tabs).tab('show');
+				return;
+			}
+		}else openTabs = new Array();
+		$('ul.nav-tabs',$tabs).append('<li><a href="#'+tabId+'" data-toggle="tab">'+title+c.closeBtnTemplate+'</a></li>');
+		var content = $('<div class="tab-pane" id="'+tabId+'"></div>');
+		$('div.tab-content',$tabs).append(content);
+		//切换到新增加的tab上
+		$('ul.nav-tabs li:last a',$tabs).tab('show');
+		openTabs.push(tabId);
+
+		var openIframe = function(){
+			$(content).append('<iframe frameborder="0" scrolling="yes" style="width:100%;height:100%;border:0px;" src="'+url+'"></iframe>');
+		};
+		//进行登录验证
+		if(loginCheck && $.isFunction(loginCheck)){
+			if(loginCheck()) openIframe();
+			else if(p && p.loginUrl) window.top.location.replace(p.loginUrl);
+		}else openIframe();
+	};
+	/**
+	 * 关闭tab
+	 * @param id
+	 */
+	bTabs.prototype.closeTab = function(id){
+		var c = constants, $tabs = this.$container, openTabs = this.openTabs;
+		var thisTab = $('#' + id);
+		//在移除标签页之前，先把iframe移除，解决在IE下，窗口上的输入控件获得不了焦点的问题
+		if($('iframe',$(thisTab)).size() > 0) $('iframe',$(thisTab)).remove();
+		//移除内容区
+		$(thisTab).remove();
+		var a = $('ul.nav-tabs a[href="#'+id+'"]',$tabs);
+		var li = $(a).closest('li');
+		//获得当前tab的前一个tab
+		var prevLi = $(li).prev();
+		//移除Tab
+		li.remove();
+		if(openTabs && $.isArray(openTabs) && openTabs.length>0){
+			var index = -1;
+			$.each(openTabs,function(i,d){
+				if(d == id){
+					index = i;
+					return false;
+				}
+			});
+			if(index != -1) openTabs.splice(index,1);
+		}
+		//激活被关闭Tab邻的Tab，若没有则不处理
+		if(prevLi.size() > 0 ) $('a',$(prevLi)).tab('show');
+	};
+	
+	/**
+	 * 插件初始化入口
+	 */
+	function Plugin(p){
+		return this.each(function(){
+			//参数合并时允许读取在html元素上定义的'data-'系列的参数
+			var $this = $(this),
+				data = $this.data('bTabs'),
+				params = $.extend({}, defaults, $this.data(), typeof p == 'object' && p);
+			if(!data) $this.data('bTabs', (data = new bTabs(this,params)));
+			data.init();
+		});
+	}
+	
+	/**
+	 * 新增标签页
+	 */
+	function bTabsAdd(id,title,url,loginCheck){
+		return this.each(function(){
+			if(!id || !title || !url) return;
+			var $this = $(this),data = $this.data('bTabs');
+			if(data) data.addTab(id,title,url,loginCheck);
+		});
+	}
+	/**
+	 * 关闭标签页
+	 */
+	function bTabsClose(id){
+		return this.each(function(){
+			if(!id || !title || !url) return;
+			var $this = $(this),data = $this.data('bTabs');
+			if(data) data.closeTab(id);
+		});
+	}
+	
+	var old = $.fn.bTabs;
+
+	$.fn.bTabs             = Plugin;
+	$.fn.bTabs.Constructor = bTabs;
+	$.fn.bTabsAdd          = bTabsAdd;
+	$.fn.bTabsClose        = bTabsClose;
+	
+	// 处理新旧版本冲突
+	// =================
+	$.fn.bTabs.noConflict = function () {
+		$.fn.bTabs = old;
+		return this;
+	};
+}(window.jQuery);
\ No newline at end of file

public/resource/lib/js/demo-liu.js

+$(function(){
+	//计算内容区域高度
+	var calcHeight = function(){
+		var browserHeight = $(window).innerHeight();
+		var topHeight = $('#mainFrameHeadBar').outerHeight(true);
+		var tabMarginTop = parseInt($('#mainFrameTabs').css('margin-top'));//获取间距
+		var tabHeadHeight = $('ul.nav-tabs',$('#mainFrameTabs')).outerHeight(true) + tabMarginTop;
+		var contentMarginTop = parseInt($('div.tab-content',$('#mainFrameTabs')).css('margin-top'));//获取内容区间距
+		var contentHeight = browserHeight - topHeight - tabHeadHeight - contentMarginTop;
+		$('div.tab-content',$('#mainFrameTabs')).height(contentHeight);
+	};
+	//菜单点击
+	$('a',$('#menuSideBar')).on('click', function(e) {
+		e.stopPropagation();
+		var li = $(this).closest('li');
+		var menuId = $(li).attr('mid');
+		var url = $(li).attr('funurl');
+		var title = $(this).text();
+		$('#mainFrameTabs').bTabsAdd(menuId,title,url);
+		
+		//计算Tab可用区域高度
+		calcHeight();
+	});
+	
+	//初始化
+	$('#mainFrameTabs').bTabs();
+});
\ No newline at end of file

public/resource/template/menu_template_tpl.html

@@ -12,7 +12,7 @@
                     <!--<img src="/resource/image/icon_more@2x.png" id=""/>-->
                 <ul class="dropdown-menu" role="menu">
                     [% for(var item_menu in it[item]["_child"]){ %]
-                        <li><a href="/[%= it[item]['_child'][item_menu]['name'] %]" target="_blank" class="menu-sub-alink"><span class="glyphicon-zhanwei"></span> <span class="span-list">[%= it[item]["_child"][item_menu]['title'] %]</span></a></li>
+                        <li funurl="users_list.html"><a href="/[%= it[item]['_child'][item_menu]['name'] %]" target="_blank" class="menu-sub-alink"><span class="glyphicon-zhanwei"></span> <span class="span-list">[%= it[item]["_child"][item_menu]['title'] %]</span></a></li>
                     [% } %]
                 </ul>
             [% }%]