Halaman utama Jelajahi Bantuan
Masuk
chendeben
/
zheng
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

选项卡右键菜单管理

shuzheng 9 tahun lalu
induk
df0ae2dd01
melakukan
42dce7847e
8 mengubah file dengan 154 tambahan dan 47 penghapusan
Unified View Tampilkan Statistik Diff
  1. 1 0
      zheng-cms/zheng-cms-web/src/main/webapp/resources/1.html
  2. 1 0
      zheng-cms/zheng-cms-web/src/main/webapp/resources/2.html
  3. 9 1
      zheng-cms/zheng-cms-web/src/main/webapp/resources/css/admin.css
  4. 0 12
      zheng-cms/zheng-cms-web/src/main/webapp/resources/home.html
  5. 33 19
      zheng-cms/zheng-cms-web/src/main/webapp/resources/index.html
  6. 110 5
      zheng-cms/zheng-cms-web/src/main/webapp/resources/js/admin.js
  7. 0 10
      zheng-cms/zheng-cms-web/src/main/webapp/resources/js/admin_header.js
  8. 0 0
      zheng-cms/zheng-cms-web/src/main/webapp/resources/plugins/BootstrapMenu.min.js

+ 1 - 0
zheng-cms/zheng-cms-web/src/main/webapp/resources/1.html
Tampilan Berkas 

@@ -0,0 +1 @@
 
+1

+ 1 - 0
zheng-cms/zheng-cms-web/src/main/webapp/resources/2.html
Tampilan Berkas 

@@ -0,0 +1 @@
 
+2

+ 9 - 1
zheng-cms/zheng-cms-web/src/main/webapp/resources/css/admin.css
Tampilan Berkas 

@@ -31,7 +31,7 @@ a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none;}
 
 .dropdown-menu{box-shadow: 0 2px 10px rgba(0,0,0,.2);border: none;}
 
 .dropdown-menu{box-shadow: 0 2px 10px rgba(0,0,0,.2);border: none;}
 
 .dropdown-menu .divider{height:1px;margin:8px 0;overflow:hidden;background-color:rgba(0,0,0,.08)}
 
 .dropdown-menu .divider{height:1px;margin:8px 0;overflow:hidden;background-color:rgba(0,0,0,.08)}
 
 .dropdown-menu>li>a{display:block;clear:both;font-weight:400;color:#333;padding:10px 20px;font-size:13px;-webkit-transition:background-color;-o-transition:background-color;transition:background-color;-webkit-transition-duration:.3s;transition-duration:.3s}
 
 .dropdown-menu>li>a{display:block;clear:both;font-weight:400;color:#333;padding:10px 20px;font-size:13px;-webkit-transition:background-color;-o-transition:background-color;transition:background-color;-webkit-transition-duration:.3s;transition-duration:.3s}
 
-.dm-icon>li>a>.zmdi{line-height:100%;vertical-align:top;font-size:18px;width:28px}
 
+.dropdown li>a>.zmdi{line-height:100%;vertical-align:top;font-size:16px;width:28px}
 
 #header .skin-switch{padding:10px 0 2px;text-align:center;font-size:13px;}
 
 #header .skin-switch{padding:10px 0 2px;text-align:center;font-size:13px;}
 
 #search-form{margin: 6px 15px;}
 
 #search-form{margin: 6px 15px;}
 
 #keywords{min-width:150px}
 
 #keywords{min-width:150px}
 
@@ -125,6 +125,14 @@ a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none;}
 
 .content_tab>ul>li>a:after{content:"";position:absolute;bottom:0;left:50%;right:50%;width:0;border-bottom:3px solid #FFEB3B;transition:all linear .15s}
 
 .content_tab>ul>li>a:after{content:"";position:absolute;bottom:0;left:50%;right:50%;width:0;border-bottom:3px solid #FFEB3B;transition:all linear .15s}
 
 .content_tab>ul>.cur>a:after{left:0;bottom:1px;width:100%;opacity:1;transition:all linear .15s}
 
 .content_tab>ul>.cur>a:after{left:0;bottom:1px;width:100%;opacity:1;transition:all linear .15s}
 
 
 
+.content_main{height: calc(100% - 48px);}
 
+.content_main>.cur{display:block;}
 
+.iframe{height:100%;display:none;}
 
+
 
+
 
+#iframe_home{padding: 15px 30px; font-size: 13px;overflow:auto;}
 
+#iframe_home p{margin-bottom: 5px; line-height: 2em;}
 
+
 
 /* 底部 */
 
 /* 底部 */
 
 #footer {display:none;}
 
 #footer {display:none;}

+ 0 - 12
zheng-cms/zheng-cms-web/src/main/webapp/resources/home.html
Tampilan Berkas 

@@ -45,17 +45,5 @@
 
 <script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
 
 <script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
 
 <script src="plugins/waves-0.7.5/waves.min.js"></script>
 
 <script src="plugins/waves-0.7.5/waves.min.js"></script>
 
 <script src="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
 
 <script src="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
 
-
 
-<!-- Angular.js Libraries -->
 
-<script src="plugins/angular/angular-1.5.8/angular.min.js"></script>
 
-<script src="plugins/angular/angular-1.5.8/angular-animate.min.js"></script>
 
-<script src="plugins/angular/angular-1.5.8/angular-aria.min.js"></script>
 
-<script src="plugins/angular/angular-1.5.8/angular-messages.min.js"></script>
 
-
 
-<!-- Angular Material Library -->
 
-<link href="plugins/angular/angular-material-1.1.1/angular-material.min.css" rel="stylesheet"/>
 
-<script src="plugins/angular/angular-material-1.1.1/angular-material.min.js"></script>
 
-
 
-<script src="js/admin.js"></script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 33 - 19
zheng-cms/zheng-cms-web/src/main/webapp/resources/index.html
Tampilan Berkas 

@@ -11,7 +11,6 @@
 
 	<link href="plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
 
 	<link href="plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
 
 	<link href="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
 
 	<link href="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
 
 	<link href="css/admin.css" rel="stylesheet"/>
 
 	<link href="css/admin.css" rel="stylesheet"/>
 
-	<script src="js/admin_header.js"></script>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <header id="header">
 
 <header id="header">
 
@@ -128,42 +127,42 @@
 
 		<!-- 菜单区 -->
 
 		<!-- 菜单区 -->
 
 		<ul class="main-menu">
 
 		<ul class="main-menu">
 
 			<li>
 
 			<li>
 
-				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-home"></i> 首页</a>
 
+				<a class="waves-effect" href="javascript:Tab.addTab('首页', 'home');"><i class="zmdi zmdi-home"></i> 首页</a>
 
 			</li>
 
 			</li>
 
 			<li class="sub-menu">
 
 			<li class="sub-menu">
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 系统组织管理</a>
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 系统组织管理</a>
 
 				<ul>
 
 				<ul>
 
-					<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>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('系统注册', '1.html');">系统注册</a></li>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('组织管理', '2.html');">组织管理</a></li>
 
 				</ul>
 
 				</ul>
 
 			</li>
 
 			</li>
 
 			<li class="sub-menu">
 
 			<li class="sub-menu">
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 用户角色管理</a>
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 用户角色管理</a>
 
 				<ul>
 
 				<ul>
 
-					<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>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('用户管理', '3.html');">用户管理</a></li>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('角色管理', '4.html');">角色管理</a></li>
 
 				</ul>
 
 				</ul>
 
 			</li>
 
 			</li>
 
 			<li class="sub-menu">
 
 			<li class="sub-menu">
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 资源权限管理</a>
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 资源权限管理</a>
 
 				<ul>
 
 				<ul>
 
-					<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>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('资源管理', '5.html');">资源管理</a></li>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('权限管理', '6.html');">权限管理</a></li>
 
 				</ul>
 
 				</ul>
 
 			</li>
 
 			</li>
 
 			<li class="sub-menu">
 
 			<li class="sub-menu">
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 权限分配管理</a>
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 权限分配管理</a>
 
 				<ul>
 
 				<ul>
 
-					<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>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('角色权限', '7.html');">角色权限</a></li>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('用户权限', '8.html');">用户权限</a></li>
 
 				</ul>
 
 				</ul>
 
 			</li>
 
 			</li>
 
 			<li class="sub-menu">
 
 			<li class="sub-menu">
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> DEMO</a>
 
 				<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> DEMO</a>
 
 				<ul>
 
 				<ul>
 
-					<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>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('获取资源(DEMO)', '9.html');">获取资源(DEMO)</a></li>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('获取权限(DEMO)', '10.html');">获取权限(DEMO)</a></li>
 
+					<li><a class="waves-effect" href="javascript:Tab.addTab('单点登录(DEMO)', '11.html');">单点登录(DEMO)</a></li>
 
 				</ul>
 
 				</ul>
 
 			</li>
 
 			</li>
 
 			<li>
 
 			<li>
 
@@ -181,17 +180,31 @@
 
 			<div class="tab_right">
 
 			<div class="tab_right">
 
 				<a href="javascript:;"><i class="zmdi zmdi-chevron-right"></i></a>
 
 				<a href="javascript:;"><i class="zmdi zmdi-chevron-right"></i></a>
 
 			</div>
 
 			</div>
 
-			<ul>
 
-				<li class="cur">
 
+			<ul class="tabs">
 
+				<li id="tab_home" data-index="home" data-closeable="false" class="cur">
 
 					<a class="waves-effect waves-light" href="javascript:;">首页</a>
 
 					<a class="waves-effect waves-light" href="javascript:;">首页</a>
 
 				</li>
 
 				</li>
 
-				<li>
 
-					<a class="waves-effect waves-light" href="javascript:;">个人详情</a>
 
-				</li>
 
 			</ul>
 
 			</ul>
 
 		</div>
 
 		</div>
 
 		<div class="content_main">
 
 		<div class="content_main">
 
-			<iframe class="tab_iframe" src="home.html" width="100%" frameborder="0" scrolling="auto" onload="changeFrameHeight(this)"></iframe>
 
+			<div id="iframe_home" class="iframe cur">
 
+				<p><h4>通用用户权限管理系统</h4></p>
 
+				<p><b>演示地址</b>：<a href="http://www.zhangshuzheng.cn/upms" target="_blank">http://www.zhangshuzheng.cn/upms</a></p>
 
+				<p><b>系统简介</b>：本系统是基于RBAC授权和基于用户授权的细粒度权限控制通用平台，并提供单点登录、会话管理和日志管理。接入的系统可自由定义组织、角色、权限、资源等。</p><br/>
 
+				<p><h4>系统功能概述：</h4></p>
 
+				<p><b>系统组织管理</b>：系统和组织增加、删除、修改、查询功能。</p>
 
+				<p><b>用户角色管理</b>：用户和角色增加、删除、修改、查询功能。</p>
 
+				<p><b>资源权限管理</b>：资源和权限增加、删除、修改、查询功能。</p>
 
+				<p><b>权限分配管理</b>：提供给角色和用户的权限增加、删除、修改、查询功能。</p>
 
+				<p><b>单点登录(SSO)</b>：提供统一用户单点登录认证、用户鉴权功能。</p>
 
+				<p><b>用户会话管理</b>：提供分布式用户会话管理</p>
 
+				<p><b>操作日志管理</b>：提供记录用户登录、操作等日志。</p><br/>
 
+				<p><h4>对外接口概述：</h4></p>
 
+				<p><b>系统组织数据接口</b>、<b>用户角色数据接口</b>、<b>资源权限数据接口</b>、<b>单点登录(SSO)接口</b>、<b>用户鉴权接口</b></p><br/>
 
+				<p><h4>关于作者</h4></p>
 
+				<p><b>姓　　名</b>：张恕征</p>
 
+				<p><b>电子邮箱</b>：469741414@qq.com</p>
 
+			</div>
 
 		</div>
 
 		</div>
 
 	</section>
 
 	</section>
 
 </section>
 
 </section>
 
@@ -201,6 +214,7 @@
 
 <script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
 
 <script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
 
 <script src="plugins/waves-0.7.5/waves.min.js"></script>
 
 <script src="plugins/waves-0.7.5/waves.min.js"></script>
 
 <script src="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
 
 <script src="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
 
+<script src="plugins/BootstrapMenu.min.js"></script>
 
 
 
 <script src="js/admin.js"></script>
 
 <script src="js/admin.js"></script>
 
 </body>
 
 </body>

+ 110 - 5
zheng-cms/zheng-cms-web/src/main/webapp/resources/js/admin.js
Tampilan Berkas 

@@ -29,8 +29,12 @@ $(function() {
 
 	});
 
 	});
 
 	// 选项卡
 
 	// 选项卡
 
 	$(document).on('click', '.content_tab li', function() {
 
 	$(document).on('click', '.content_tab li', function() {
 
+		// 切换选项卡
 
 		$('.content_tab li').removeClass('cur');
 
 		$('.content_tab li').removeClass('cur');
 
 		$(this).addClass('cur');
 
 		$(this).addClass('cur');
 
+		// 切换iframe
 
+		$('.iframe').removeClass('cur');
 
+		$('#iframe_' + $(this).data('index')).addClass('cur');
 
 	});
 
 	});
 
 	// 控制选项卡滚动位置 
 	// 控制选项卡滚动位置 
 	$('.tab_left>a').click(function() {
 
 	$('.tab_left>a').click(function() {
 
@@ -49,12 +53,113 @@ $(function() {
 
 			$('.tab_left>a').addClass('active');
 
 			$('.tab_left>a').addClass('active');
 
 		}
 
 		}
 
 	});
 
 	});
 
-	// 初始化
 
+	// 初始化箭头状态
 
+	
+	// 选项卡右键菜单
 
+	var menu = new BootstrapMenu('.tabs li', {
 
+		fetchElementData: function(item) {
 
+			return item;
 
+		},
 
+		actionsGroups: [
 
+			['close', 'closeOther', 'closeAll'],
 
+			['closeRight', 'closeLeft'],
 
+			['refresh'],
 
+		],
 
+		actions: {
 
+			close: {
 
+				name: '关闭',
 
+				iconClass: 'zmdi zmdi-close',
 
+				onClick: function(item) {
 
+					Tab.closeTab($(item));
 
+				}
 
+			},
 
+			closeOther: {
 
+				name: '关闭其他',
 
+				iconClass: 'zmdi zmdi-arrow-split',
 
+				onClick: function(item) {
 
+					var index = $(item).data('index');
 
+					$('.content_tab li').each(function() {
 
+						if ($(this).data('index') != index) {
 
+							Tab.closeTab($(this));
 
+						}
 
+					});
 
+				}
 
+			},
 
+			closeAll: {
 
+				name: '关闭全部',
 
+				iconClass: 'zmdi zmdi-swap',
 
+				onClick: function() {
 
+					$('.content_tab li').each(function() {
 
+						Tab.closeTab($(this));
 
+					});
 
+				}
 
+			},
 
+			closeRight: {
 
+				name: '关闭右侧所有',
 
+				iconClass: 'zmdi zmdi-arrow-right',
 
+				onClick: function() {
 
+					
+				}
 
+			},
 
+			closeLeft: {
 
+				name: '关闭左侧所有',
 
+				iconClass: 'zmdi zmdi-arrow-left',
 
+				onClick: function() {
 
+					
+				}
 
+			},
 
+			refresh: {
 
+				name: '刷新',
 
+				iconClass: 'zmdi zmdi-refresh',
 
+				onClick: function(item) {
 
+					var index = $(item).data('index');
 
+					var $iframe = $('#iframe_' + index).find('iframe');
 
+					$iframe.attr('src', $iframe.attr('src'));
 
+				}
 
+			}
 
+		}
 
+	});
 
 });
 
 });
 
-var tab = {
 
+// 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) {
 
 	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);
 
+		var index = url.replace('.', '_');
 
+		// 如果存在选项卡，则激活，否则创建新选项卡
 
+		if ($('#tab_' + index).length == 0) {
 
+			// 添加选项卡
 
+			$('.content_tab li').removeClass('cur');
 
+			var tab = '<li id="tab_' + index +'" data-index="' + index + '" class="cur"><a class="waves-effect waves-light" href="javascript:;">' + title + '</a></li>';//<i class="zmdi zmdi-close"></i><
 
+			$('.content_tab>ul').append(tab);
 
+			// 添加iframe
 
+			$('.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);
 
+		} else {
 
+			$('#tab_' + index).click();
 
+		}
 
+	},
 
+	closeTab: function($item) {
 
+		var closeable = $item.data('closeable');
 
+		if (closeable != false) {
 
+			// 如果当前时激活状态则关闭后激活左边选项卡
 
+			if($item.hasClass('cur')) {
 
+				$item.prev().click();
 
+			}
 
+			// 关闭当前选项卡
 
+			var index = $item.data('index');
 
+			$('#iframe_' + index).remove();
 
+			$item.remove();
 
+		}
 
 	}
 
 	}
 
 }
 
 }

+ 0 - 10
zheng-cms/zheng-cms-web/src/main/webapp/resources/js/admin_header.js
Tampilan Berkas 

@@ -1,10 +0,0 @@
 
-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();
 
-}

File diff ditekan karena terlalu besar
+ 0 - 0
zheng-cms/zheng-cms-web/src/main/webapp/resources/plugins/BootstrapMenu.min.js


Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini