angularjs tab 实现
angularjs tab 功能实现
功能要求
点击菜单的时候,新增一个tab页面,当关闭一个页面的时候,显示旁边的tab页面
当一个tab页面是从之前的tab打开,例如是一个查询页面的tab页面,打开一个新增页面的时候,当新增页面提交成功后,需要关闭当前页面,并刷新原来的查询页面
实现
通过iframe方式实现
每个tab页面就是一个iframe,不会互相影响功能
各个tab里面的iframe 通过window.top. 方法进行调用下来的几个方法,例如:window.top.openTab
function openTab(id,name,url,params){
var appElement = document.querySelector('[ng-controller=mainCtrl]');
var scope=angular.element(appElement).scope();
scope.myTab.openWithParent(id,name,url,params);
scope.$apply();
}
//在一个tab里面关闭一个页面并回到父页面
function closeToParentTab(){
var appElement = document.querySelector('[ng-controller=mainCtrl]');
var scope=angular.element(appElement).scope();
scope.myTab.closeToParentTab();
scope.$apply();
}
//只是关闭页面
function close(){
var appElement = document.querySelector('[ng-controller=mainCtrl]');
var scope=angular.element(appElement).scope();
scope.myTab.close();
scope.$apply();
}
commonApp.directive('myTab',['commonService',function(commonService){
var myTab = {};
myTab.restrict="AE";
myTab.compile=function(element,attrs,$scope){
var objName=attrs.name;
if(objName == undefined){
objName="myTab";
}
var tab = {
list:[],
getCurrentOpenId:function(){
var currentTab=this.getCurrentTab();
if(currentTab!=undefined){
return currentTab.id;
}
},
getCurrentTab:function(){
for(var index=0;index<this.list.length;index++ ){
if(this.list[index].type=="show"){
return this.list[index];
}
}
},
//打开一个tab,如果该tab已经存在,就显示,如果没有,新开一个
open:function(id,name,url){
if(!this.changeTab(id)){
var elm={};
elm.id=id;
elm.parentId="";
elm.name=name;
elm.url=url;
elm.type="show";
this.list.push(elm);
}
},
/**
* id 新开页面的id
* name 新开页面的名称
* url 新开页面的地址
* params 表示要传入新开页面的参数
*/
openWithParent:function(id,name,url){
var parentId=this.getCurrentOpenId();
var childId=parentId+"_"+id;
if(!this.changeTab(childId)){
var elm={};
elm.id=childId;
elm.parentId=parentId;
elm.name=name;
elm.url=url;
elm.type="show";
this.list.push(elm);
}
},
//把所有tab页面变成不可显示
hideAll:function(){
for(var index=0;index<this.list.length;index++ ){
this.list[index].type="hide";
}
},
//切换tab页面
changeTab:function(id){
this.hideAll();
for(var index=0;index<this.list.length;index++ ){
if(this.list[index].id==id){
this.list[index].type="show";
return true;
}
}
return false;
},
cleanAll:function(){
this.list=[];
},
closeToParentTab:function(){
var currentTab=this.getCurrentTab();
if(currentTab!=undefined){
//关闭当前的页面
for(var index=0;index<this.list.length;index++ ){
if(this.list[index].id==currentTab.id){
this.list.splice(index,1);
break;
}
}
//切换到父页面
this.changeTab(currentTab.parentId);
}
}
};
var template=
'<ul id="tags" class="subnav" ng-show="'+objName+'.list.length>0">'
+'<li id="dh1" ng-class="{\'hover\':obj.type==\'show\'}" ng-repeat="obj in '+objName+'.list" ><a href="javascript:void(0)" ng-click="'+objName+'.changeTab(obj.id)" class="a1">{{obj.name}}</a><i class="subnav_icon icon"><a ng-click="'+objName+'.close(obj.id)" href="javascript:void(0)" class="gone"></a></i></li>'
+'</ul>'
+'<div ng-repeat="obj in '+objName+'.list" ng-show="obj.type==\'show\'" ><iframe frameborder="0" style="height:100%;visibility:inherit; width:100%;z-index:1;" ng-src="{{obj.url}}" scrolling="yes" id="tab_id_{{obj.id}}" ></iframe></div>';
element.html(template);
return function($scope,element,attrs){
tab.close=function(id){
var index=0;
for(;index<this.list.length;index++ ){
if(this.list[index].id==id){
this.list.splice(index,1);
break;
}
}
if(this.list.length==0){
$scope.loadIndex();
}else{
var showTabIndex=0;
if(index-1>0){
showTabIndex=index-1;
}
this.list[showTabIndex].type="show";
}
};
eval("$scope."+objName+"=tab");
};
};
return myTab;
}]);
猜你喜欢
转载自liyiye.iteye.com/blog/2293555
今日推荐
周排行