多标签页完成

safesite/static/safesite/mystatic/js/util.js

@@ -321,13 +321,28 @@ function isIntNum(val) {
 //     }
 // }
 function changehref(o) {
-
     _clickTab = $(o).attr('url');// 找到链接a中的targer的值
+    _title = $(o).attr('title');
 
     _value = $(o).attr('value');
 
     $("#main").attr('value', _value);
-    $("#main").panel({ href: _clickTab, title: $(o).attr('title') });
+
+    if ($('#tt').tabs('tabs').length > 10) {
+        alert('标签页过多,请先关闭')
+        return
+    }
+    if ($('#tt').tabs('exists', _title)) {
+        $('#tt').tabs('select', _title);
+        //var tab2 = $('#tt').tabs('getSelected');
+        //tab2.panel('refresh');
+    } else {
+        $('#tt').tabs('add', {
+            title: _title,
+            href: _clickTab,
+            closable: true,
+        });
+    }
     // $.ajax({
     //     type: "get",
     //     url: _clickTab,

safesite/templates/index.html

@@ -114,7 +114,7 @@
                 headimgurl="{{headimgurl}}" menus="{{menus}}" style="display:none;" />
 
             <button style="margin: 15px;background-color: transparent;border: 0;color: white;cursor: pointer;"
-                onclick="javascript:$('#main').panel({href:'mainhtml',title:'主页'})"><span
+                onclick="javascript:$('#tt').tabs('select',0)"><span
                     style="font-size:24px">{{companyname}}</span><br /><span
                     style="font-size:20px">安全生产管理系统</span></button>
         </div>
@@ -178,16 +178,11 @@
     <input type="hidden" id="in" show="" total="" target="" show2="" />
     <!-- <button type="hidden" id="getb" onclick="test()" /> -->
     
-<div id="rcmenu" class="easyui-menu">
+<!-- tab页的右键菜单 -->
-	<div id="closecur">
+<div id="home-tabs-menu" class="easyui-menu">
-		关闭
+    <div data-options="name:1">关闭</div>
-	</div>
+    <div data-options="name:2">关闭其他</div>
-	<div id="closeall">
+    <div data-options="name:3">关闭所有</div>
-		关闭全部
-	</div>
-	<div id="closeother">
-		关闭其他
-	</div>
 </div>
     <script>
         $(document).ready(function () {
@@ -198,6 +193,7 @@
                         var allTabs = $('#tt').tabs('tabs');
                         var selectTab = $('#tt').tabs('getSelected');
                         for (var i = 0; i < allTabs.length; i++) {
+                            if(allTabs[i]){
                                 if (allTabs[i].panel('options').title != selectTab.panel('options').title) {
                                 $('#tt').tabs('update', {
                                     tab: allTabs[i],
@@ -207,46 +203,31 @@
                                     });
                              }
                             }
-                        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);
-        }
                             
-	});
+                        }
-	//关闭所有标签页
+                        //selectTab.panel('refresh')
-	$("#closeall").bind("click",function(){
+                        // console.log(allTabs[0].panel('options').content)
-		var tablist = $('#tt').tabs('tabs');
+                },
-		for(var i=tablist.length-1;i>0;i--){
+                onContextMenu: function(e, title, index){
-			$('#tt').tabs('close',i);
+　　　　　　　//该方法通知浏览器不要执行与此事件关联的默认动作
+　　　　　　　//即屏蔽了浏览器在tab页上的鼠标右键事件
+            e.preventDefault();
+            var mm = $("#home-tabs-menu");
+            //显示右键菜单
+            mm.menu("show",{
+                top: e.pageY,
+                left: e.pageX
+            }).data("tabTitle",title);
+            //为右键菜单选项绑定事件
+            mm.menu({
+                onClick: function(item){
+                    closeTab(this, item.name);                    
                 }
             });
-	//关闭非当前标签页（先关闭右侧，再关闭左侧）
-	$("#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: '提示',
@@ -359,9 +340,9 @@
                     }
                     if ($('#tt').tabs('exists', title)) {
                         $('#tt').tabs('select', title);
-                        var tab2 = $('#tt').tabs('getSelected');
+                        //var tab2 = $('#tt').tabs('getSelected');
-                        var url = $(tab2.panel('options')).attr('href');
+                        // var url = $(tab2.panel('options')).attr('href');
-                        tab2.panel('refresh', url);
+                        //tab2.panel('refresh');
                     } else {
                         $('#tt').tabs('add', {
                             title: title,
@@ -382,6 +363,42 @@
         $.get('api/rights?a=have', function (res) {
             localStorage.setItem('data', JSON.stringify(res));
         })
+
+        function closeTab(menu, type){
+    var allTabs = $("#tt").tabs("tabs");
+    var allTabTitle = [];
+    $.each(allTabs, function(i, n){
+        var opt = $(n).panel("options");
+        if(opt.closable){
+            allTabTitle.push(opt.title);
+        }
+    });
+    var curTabTitle = $(menu).data("tabTitle");
+    switch(type){
+        case 1:
+            //关闭当前
+            $("#tt").tabs("close", curTabTitle);
+            return false;
+            break;
+        case 2:
+            //关闭其他
+            for(var i = 0; i < allTabTitle.length; i++){
+                if(curTabTitle != allTabTitle[i] && curTabTitle != '主页'){
+                    $("#tt").tabs("close",allTabTitle[i]);
+                }
+            }
+            $("#tt").tabs("select",curTabTitle);
+            break;
+        case 3:
+            //关闭所有
+            for(var i = 0; i < allTabTitle.length; i++){
+                if(curTabTitle != '主页'){
+                $("#tt").tabs("close",allTabTitle[i]);
+                }
+            }
+            break;
+    }
+}
     </script>
 
 </body>

safesite/templates/main.html

@@ -97,7 +97,7 @@ float: left;">
     font-weight: 300;
     font-size: 11px;
     color: #fff;
-    opacity: 0.7;height: 20px;cursor: pointer;" title="在线培训" onclick="changehref(this)">
+    opacity: 0.7;height: 20px;cursor: pointer;" title="线下培训" onclick="changehref(this)">
                     点击查看全部
                     <i style="background-position: -27px -10px;width: 14px;
     height: 14px;    vertical-align: top;background-repeat: no-repeat;margin-top: 4px;