增加操作选项卡事件

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

@@ -133,37 +133,37 @@
 			<li class="sub-menu">
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 系统组织管理</a>
 				<ul>
-					<li><a class="waves-effect" href="javascript:;">系统注册</a></li>
-					<li><a class="waves-effect" href="javascript:;">组织管理</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('系统注册', 'home.html');">系统注册</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('组织管理', 'home.html');">组织管理</a></li>
 				</ul>
 			</li>
 			<li class="sub-menu">
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 用户角色管理</a>
 				<ul>
-					<li><a class="waves-effect" href="javascript:;">用户管理</a></li>
-					<li><a class="waves-effect" href="javascript:;" ng-click="addTab('角色管理', 'typography.html')">角色管理</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('用户管理', 'home.html');">用户管理</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('角色管理', 'home.html');">角色管理</a></li>
 				</ul>
 			</li>
 			<li class="sub-menu">
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 资源权限管理</a>
 				<ul>
-					<li><a class="waves-effect" href="javascript:;">资源管理</a></li>
-					<li><a class="waves-effect" href="javascript:;">权限管理</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('资源管理', 'home.html');">资源管理</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('权限管理', 'home.html');">权限管理</a></li>
 				</ul>
 			</li>
 			<li class="sub-menu">
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 权限分配管理</a>
 				<ul>
-					<li><a class="waves-effect" href="javascript:;">角色权限</a></li>
-					<li><a class="waves-effect" href="javascript:;">用户权限</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('角色权限', 'home.html');">角色权限</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('用户权限', 'home.html');">用户权限</a></li>
 				</ul>
 			</li>
 			<li class="sub-menu">
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> DEMO</a>
 				<ul>
-					<li><a class="waves-effect" href="javascript:;">获取资源(DEMO)</a></li>
-					<li><a class="waves-effect" href="javascript:;">获取权限(DEMO)</a></li>
-					<li><a class="waves-effect" href="javascript:;">单点登录(DEMO)</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('获取资源(DEMO)', 'home.html');">获取资源(DEMO)</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('获取权限(DEMO)', 'home.html');">获取权限(DEMO)</a></li>
+					<li><a class="waves-effect" href="javascript:tab.addTab('单点登录(DEMO)', 'home.html');">单点登录(DEMO)</a></li>
 				</ul>
 			</li>
 			<li>
@@ -179,57 +179,12 @@
 				<a href="javascript:;"><i class="zmdi zmdi-chevron-left"></i></a>
 			</div>
 			<div class="tab_right">
-				<a class="active" href="javascript:;"><i class="zmdi zmdi-chevron-right"></i></a>
+				<a href="javascript:;"><i class="zmdi zmdi-chevron-right"></i></a>
 			</div>
 			<ul>
 				<li class="cur">
 					<a class="waves-effect waves-light" href="javascript:;">首页</a>
 				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">系统注册</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">新增标签</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">内容编辑</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">个人详情</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">系统注册</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">新增标签</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">内容编辑</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">个人详情</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">系统注册</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">新增标签</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">内容编辑</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">个人详情</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">系统注册</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">新增标签</a>
-				</li>
-				<li>
-					<a class="waves-effect waves-light" href="javascript:;">内容编辑</a>
-				</li>
 				<li>
 					<a class="waves-effect waves-light" href="javascript:;">个人详情</a>
 				</li>

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

@@ -28,8 +28,33 @@ $(function() {
 		}
 	});
 	// 选项卡
-	$('.content_tab li').click(function() {
+	$(document).on('click', '.content_tab li', function() {
 		$('.content_tab li').removeClass('cur');
 		$(this).addClass('cur');
 	});
-});
+	// 控制选项卡滚动位置 
+	$('.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');
+		}
+	});
+	$('.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');
+		}
+	});
+	// 初始化
+});
+var tab = {
+	addTab: function(title, url) {
+		$('.content_tab li').removeClass('cur');
+		var tab = '<li class="cur"><a class="waves-effect waves-light" href="javascript:;">' + title + '</a></li>';
+		$('.content_tab>ul').append(tab);
+	}
+}