多tab页完成

safesite/static/safesite/easyui/themes/icon.css

@@ -206,6 +206,18 @@
 .icon-offence {
     background: url('icons/offence.png') no-repeat center center;
 }
+.icon-safelist {
+    background: url('icons/safelist.png') no-repeat center center;
+}
+.icon-dutylist {
+    background: url('icons/dutyist.png') no-repeat center center;
+}
+.icon-worklist {
+    background: url('icons/worklist.png') no-repeat center center;
+}
+.icon-feedbacklist {
+    background: url('icons/feedbacklist.png') no-repeat center center;
+}
 
 
 

safesite/templates/index.html

@@ -77,8 +77,8 @@
     <div id='Loading' class="loading">
         <font>加载中···</font>
     </div>
-    <div id="tt" class="easyui-tabs" data-options="region:'center',border:false">
-        <div title="主页" id='main' href="mainhtml" style="overflow-x:hidden;">
+    <div id="tt" region="center" class="easyui-tabs">
+        <div title="主页" href="/mainhtml" id="main">
         </div>
     </div>
     <div region="north" class="northDiv">
@@ -178,7 +178,76 @@
     <input type="hidden" id="in" show="" total="" target="" show2="" />
     <!-- <button type="hidden" id="getb" onclick="test()" /> -->
     
+<div id="rcmenu" class="easyui-menu">
+	<div id="closecur">
+		关闭
+	</div>
+	<div id="closeall">
+		关闭全部
+	</div>
+	<div id="closeother">
+		关闭其他
+	</div>
+</div>
     <script>
+        $(document).ready(function () {
+
+            $('#tt').tabs({
+                border: false,
+                onSelect: function (title) {
+                        var allTabs = $('#tt').tabs('tabs');
+                        var selectTab = $('#tt').tabs('getSelected');
+                        for (var i = 0; i < allTabs.length; i++) {
+                            if (allTabs[i].panel('options').title != selectTab.panel('options').title) {
+                                $('#tt').tabs('update', {
+                                    tab: allTabs[i],
+                                    options: {
+                                        content: 'Tab Body'
+                                    }
+                                    });
+                             }
+                        }
+                        selectTab.panel('refresh')
+                }
+            });
+            $(".tabs-header").bind('contextmenu',function(e){
+		e.preventDefault();
+		$('#rcmenu').menu('show', {
+			left: e.pageX,
+			top: e.pageY
+		});
+	});
+	//关闭当前标签页
+	$("#closecur").bind("click",function(){
+		var tab = $('#tt').tabs('getSelected');
+		var index = $('#tt').tabs('getTabIndex',tab);
+        if(index!=0){
+            $('#tab').tabs('close',index);
+        }
+		
+	});
+	//关闭所有标签页
+	$("#closeall").bind("click",function(){
+		var tablist = $('#tt').tabs('tabs');
+		for(var i=tablist.length-1;i>0;i--){
+			$('#tt').tabs('close',i);
+		}
+	});
+	//关闭非当前标签页（先关闭右侧，再关闭左侧）
+	$("#closeother").bind("click",function(){
+		var tablist = $('#tt').tabs('tabs');
+		var tab = $('#tt').tabs('getSelected');
+		var index = $('#tt').tabs('getTabIndex',tab);
+		for(var i=tablist.length-1;i>index;i--){
+			$('#tt').tabs('close',i);
+		}
+		var num = index-1;
+		for(var i=num;i>0;i--){
+			$('#tt').tabs('close',i);
+		}
+	});
+
+        });
         $.messager.show({
             title: '提示',
             msg: '每晚10点-11点为维护时间,请尽量不在此时间使用',
@@ -284,7 +353,7 @@
                     $("#main").attr('value', 'listall');
                     // $("#main").panel({ href: node.attributes, title: node.text });
                     let title = node.text
-                    if ($('#tt').tabs('tabs').length>7){
+                    if ($('#tt').tabs('tabs').length > 10) {
                         alert('标签页过多,请先关闭')
                         return
                     }
@@ -298,13 +367,13 @@
                             title: title,
                             href: node.attributes,
                             closable: true,
-                            tools:[{
-		iconCls:'icon-mini-refresh',
-		handler:function(){
-            var tab = $('#tt').tabs('getSelected');  // get selected panel
-            tab.panel('refresh');
-		}
-    }]
+                            // tools: [{
+                            //     iconCls: 'icon-mini-refresh',
+                            //     handler: function () {
+                            //         var tab = $('#tt').tabs('getSelected');  // get selected panel
+                            //         tab.panel('refresh');
+                            //     }
+                            // }]
                         });
                     }
                 },

safesite/templates/main.html

@@ -1,3 +1,4 @@
+<div style="margin-left: 10px;margin-right:10px;overflow: hidden;">
 <div style="width:100%;height:300px;padding: 20px;">
     <div id="map1div" style="width: 33%; height:100%;float:left;"></div>
     <div id="map2div" style="width: 66%; height:100%;float:left;"></div>
@@ -330,7 +331,7 @@ float: left;">
 <div id="panelx" class="easyui-panel"  data-options="iconCls:'fa-bar-chart'" >
     
 </div>
-
+</div>
 
 <script type="text/javascript">
    //首页总数统计