完成选项卡

zheng-cms/zheng-cms-web/src/main/webapp/resources/css/admin.css

@@ -112,8 +112,10 @@ a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none;}
 
 /* 选项卡 */
 .content_tab{width:100%;height:48px;overflow:hidden;}
-.content_tab>ul{margin:0 40px;padding:0;font-size:0;display:block;white-space:nowrap;overflow:auto;}
-.tab_left,.tab_right{width:40px;height:48px;line-height:48px;color:#fff;text-align:center}
+.content_tab>ul{padding:0;font-size:0;display:block;white-space:nowrap;overflow:auto;}
+.scroll>ul{margin:0 40px;}
+.scroll>.tab_left,.scroll>.tab_right{display:block;}
+.tab_left,.tab_right{width:40px;height:48px;line-height:48px;color:#fff;text-align:center;display:none;}
 .tab_left{float:left;margin-right:-40px;}
 .tab_right{float:right;margin-left:-40px;}
 .tab_left>a,.tab_right>a{display:block;width:100%;color:rgba(255, 255, 255, 0.5);font-size:22px;}

zheng-cms/zheng-cms-web/src/main/webapp/resources/index.html

@@ -175,12 +175,12 @@
 	<section id="content">
 		<div class="content_tab">
 			<div class="tab_left">
-				<a href="javascript:;"><i class="zmdi zmdi-chevron-left"></i></a>
+				<a class="waves-effect waves-light" href="javascript:;"><i class="zmdi zmdi-chevron-left"></i></a>
 			</div>
 			<div class="tab_right">
-				<a href="javascript:;"><i class="zmdi zmdi-chevron-right"></i></a>
+				<a class="waves-effect waves-light" href="javascript:;"><i class="zmdi zmdi-chevron-right"></i></a>
 			</div>
-			<ul class="tabs">
+			<ul id="tabs" class="tabs">
 				<li id="tab_home" data-index="home" data-closeable="false" class="cur">
 					<a class="waves-effect waves-light" href="javascript:;">首页</a>
 				</li>

zheng-cms/zheng-cms-web/src/main/webapp/resources/js/admin.js

@@ -27,7 +27,24 @@ $(function() {
 			preventDefault: true
 		}
 	});
-	// 选项卡
+});
+// iframe高度自适应
+function changeFrameHeight(ifm) {
+	ifm.height = document.documentElement.clientHeight - 118;
+}
+function resizeFrameHeight() {
+	$('.tab_iframe').css('height', document.documentElement.clientHeight - 118);
+	$('md-tab-content').css('left', '0');
+}
+window.onresize = function() {
+	resizeFrameHeight();
+	initScrollShow();
+	initScrollState();
+}
+
+// ========== 选项卡操作 ==========
+$(function() {
+	// 选项卡点击
 	$(document).on('click', '.content_tab li', function() {
 		// 切换选项卡
 		$('.content_tab li').removeClass('cur');
@@ -38,20 +55,15 @@ $(function() {
 	});
 	// 控制选项卡滚动位置 
 	$('.tab_left>a').click(function() {
-		$('.content_tab>ul').animate({scrollLeft: $('.content_tab>ul').scrollLeft() - 300}, 200);
-		if ($('.content_tab>ul').scrollLeft() == 0) {
-			$('.tab_left>a').removeClass('active');
-		} else {
-			$('.tab_left>a').addClass('active');
-		}
+		$('.content_tab>ul').animate({scrollLeft: $('.content_tab>ul').scrollLeft() - 300}, 200, function() {
+			initScrollState();
+		});
 	});
+	// 向右箭头
 	$('.tab_right>a').click(function() {
-		$('.content_tab>ul').animate({scrollLeft: $('.content_tab>ul').scrollLeft() + 300}, 200);
-		if ($('.content_tab>ul').scrollLeft() == 0) {
-			$('.tab_left>a').removeClass('active');
-		} else {
-			$('.tab_left>a').addClass('active');
-		}
+		$('.content_tab>ul').animate({scrollLeft: $('.content_tab>ul').scrollLeft() + 300}, 200, function() {
+			initScrollState();
+		});
 	});
 	// 初始化箭头状态
 	
@@ -61,9 +73,9 @@ $(function() {
 			return item;
 		},
 		actionsGroups: [
-			['close', 'closeOther', 'closeAll'],
-			['closeRight', 'closeLeft'],
-			['refresh'],
+			['close', 'refresh'],
+			['closeOther', 'closeAll'],
+			['closeRight', 'closeLeft']
 		],
 		actions: {
 			close: {
@@ -97,15 +109,29 @@ $(function() {
 			closeRight: {
 				name: '关闭右侧所有',
 				iconClass: 'zmdi zmdi-arrow-right',
-				onClick: function() {
-					
+				onClick: function(item) {
+					var index = $(item).data('index');
+					$($('.content_tab li').toArray().reverse()).each(function() {
+						if ($(this).data('index') != index) {
+							Tab.closeTab($(this));
+						} else {
+							return false;
+						}
+					});
 				}
 			},
 			closeLeft: {
 				name: '关闭左侧所有',
 				iconClass: 'zmdi zmdi-arrow-left',
-				onClick: function() {
-					
+				onClick: function(item) {
+					var index = $(item).data('index');
+					$('.content_tab li').each(function() {
+						if ($(this).data('index') != index) {
+							Tab.closeTab($(this));
+						} else {
+							return false;
+						}
+					});
 				}
 			},
 			refresh: {
@@ -120,18 +146,7 @@ $(function() {
 		}
 	});
 });
-// iframe高度自适应
-function changeFrameHeight(ifm) {
-	ifm.height = document.documentElement.clientHeight - 118;
-}
-function resizeFrameHeight() {
-	$('.tab_iframe').css('height', document.documentElement.clientHeight - 118);
-	$('md-tab-content').css('left', '0');
-}
-window.onresize = function(){
-	resizeFrameHeight();
-}
-// 选项卡操作
+// 选项卡对象
 var Tab = {
 	addTab: function(title, url) {
 		var index = url.replace('.', '_');
@@ -145,6 +160,10 @@ var Tab = {
 			$('.iframe').removeClass('cur');
 			var iframe = '<div id="iframe_' + index + '" class="iframe cur"><iframe class="tab_iframe" src="' + url + '" width="100%" frameborder="0" scrolling="auto" onload="changeFrameHeight(this)"></iframe></div>';
 			$('.content_main').append(iframe);
+			initScrollShow();
+			$('.content_tab>ul').animate({scrollLeft: document.getElementById('tabs').scrollWidth - document.getElementById('tabs').clientWidth}, 200, function() {
+				initScrollState();
+			});
 		} else {
 			$('#tab_' + index).click();
 		}
@@ -161,5 +180,25 @@ var Tab = {
 			$('#iframe_' + index).remove();
 			$item.remove();
 		}
+		initScrollShow();
+	}
+}
+function initScrollShow() {
+	if (document.getElementById('tabs').scrollWidth > document.getElementById('tabs').clientWidth) {
+		$('.content_tab').addClass('scroll');
+	} else {
+		$('.content_tab').removeClass('scroll');
+	}
+}
+function initScrollState() {
+	if ($('.content_tab>ul').scrollLeft() == 0) {
+		$('.tab_left>a').removeClass('active');
+	} else {
+		$('.tab_left>a').addClass('active');
+	}
+	if (($('.content_tab>ul').scrollLeft() + document.getElementById('tabs').clientWidth) >= document.getElementById('tabs').scrollWidth) {
+		$('.tab_right>a').removeClass('active');
+	} else {
+		$('.tab_right>a').addClass('active');
 	}
 }