wnmj/GonghuiWeb/www/m/js/tab.js

window.AbstractTab = {};
AbstractTab.add = function( option ){
	// 如果已经存在,就激活该菜单
	if( this.isExist(option.id) ){
		this.click(option.id);
		$('#'+this.getFrameID(option.id)).attr('src', option.url);
		return false;
	}
	this.addTab(option);
	this.addFrame(option);
};

// 添加一个Tab
AbstractTab.addTab = function( option ){
	var _this = this;
	var id = option.id;
	var isLock = (option.lock ? true : false);
	var lock = option.lock ? this.lockClass : "";
	var active = this.activeClass;
	var title = option.title ? option.title : "";
	var name = this.getCutName(option.name);
	var args = {id:id,name:name,active:active,title:title,lock:lock,isLock:isLock};
	var html = this.getTabHtml(args);
	var element = jQuery(html);
	// 绑定选择事件并触发。
	element.click( function(){
		_this.click(this.id);
	}).click();
	// 绑定关闭按钮事件
	element.find(".closeTab").click( function(){
		_this.close(jQuery(this).parent().attr("id"));
		return false;
	});
	element.appendTo(this.tabs);
};

// 取得HTML
AbstractTab.getTabHtml = function( o ){
	var li = "<li lock='" + o.isLock + "' id='" + o.id + "' class='" + o.active + "'  title='" + o.title + "'> \n";
	li += "<a href=\"#\" class='li " + o.lock + "'> \n";
	li += "<span class=\"text\"><span>" + o.name + "</span></span> \n";
	li += "<a href='javascript:void(0)' class='closeTab'></a>\n";
	li += "</li> \n";
	return li;
};

// 点击标签
AbstractTab.click = function( id ){
	this.tabs.find("li").removeClass(this.activeClass);
	jQuery("#" + id).addClass(this.activeClass);
	this.loadFrame(id);
	jQuery("#lockids").val(id);//当前ID
};

// 判断标签是否存在
AbstractTab.isExist = function( id ){
	return jQuery("#" + id).size() > 0;
};
// 取得简短的名称
AbstractTab.getCutName = function( name ){
	var text = new String(name);
	//if(text.length > 5){
	//	return text.substring(0,5) + ".";
	//}
	return text;
};
// 添加Frame
AbstractTab.addFrame = function( option ){
	var url = option.url;
	var id = this.getFrameID(option.id);
	var frame = option.frame || {};
	var style = frame.style || "width:100%;height:100%";
	var name = frame.name || id;
	var frame = "<iframe id='" + id + "' name='" + name + "' frameborder='0' style='" + style + "' src='" + url + "'></iframe>";
	jQuery(frame).appendTo(this.frames);
	this.loadFrame(option.id);
};

// 加载Tab对应的Frame
AbstractTab.loadFrame = function( id ){
	var id = this.getFrameID(id);
	this.frames.find("iframe").hide();
	jQuery("#" + id ).show();
};

// 取得FrameID
AbstractTab.getFrameID = function( id ){
	return "Frame" + id;
};

// 关闭Tab
AbstractTab.close = function( id ){
	var activeClass = this.activeClass;
	var tab = jQuery("#" + id);
	var lock = tab.attr("lock");
	var isActive = tab.hasClass(activeClass);
	if(  lock != "true" ){
		var frame = jQuery("#" + this.getFrameID(id) );
		// 如果当前标签是激活状态,要不打开后一个，要不打开前一个
		if( isActive ){
			if( tab.next().is("li") ){
				tab.next().click();
			}else if( tab.prev().is("li") ){
				tab.prev().click();
			}
		}
		tab.remove();// 删除Tab
		frame.remove();// 删除IFrame
	}
};

// 关闭所有
AbstractTab.closeAll = function(){
	var _this = this;
	// 删除没有锁定的标签
	this.tabs.find("li[lock!='true']").each( function(){
		jQuery(this).remove();
		var id = _this.getFrameID(this.id);
		jQuery("#" + id).remove();
	});
	var activeClass = this.activeClass;
	// 如果没有激活的锁定的标签，那么激活最后一个锁定的标签。
	if( this.tabs.find("." + activeClass).size() == 0 ){
		this.tabs.find("li:last").click();
	}
};

// 锁定/解锁
AbstractTab.lock = function( id , lock ){
	var lockClass = this.lockClass;
	jQuery("#" + id).attr("lock",new String(lock));
	var a = jQuery("#" + id ).find("a");
	if( lock ){
		a.addClass(lockClass);
	}else{
		a.removeClass(lockClass);
	}
};

// 左移、右移动、重置
AbstractTab.move = function( option ){
	if( option.action == "left" ){
		this.tabs.find("li:hidden:last").show();
	}else if(option.action == "right"){
		this.tabs.find("li:visible:first").hide();
	}else if(option.action == "reset"){
		this.tabs.find("li").show();
	}
};

// 初始化
AbstractTab.init = function(){
	var _this = this;
	jQuery("#" + this.leftID ).click( function(){
		_this.move({action:'left'});
	});
	jQuery("#" + this.rightID ).click( function(){
		_this.move({action:'right'});
	});
	jQuery("#" + this.resetID ).click( function(){
		_this.move({action:'reset'});
	});
	jQuery("#" + this.closeID ).click( function(){
		_this.closeAll();
	});
	return this;
};

// 定义类型
window.FantasyTab = function( option ){
	var op = option || {}
	this.tabID = op.tabID || "Tabs";
	this.frameID = op.frameID || "Frames";
	this.activeClass = op.activeClass || "on";
	this.lockClass = op.lockClass || "locked";
	this.leftID = op.leftID || "Left";
	this.rightID = op.rightID || "Right";
	this.resetID = op.resetID || "Reset";
	this.closeID = op.closeID || "Close";
	this.tabs = jQuery("#" + this.tabID);
	this.frames = jQuery("#" + this.frameID);
};
// 继承 AbstractTab;
jQuery.extend(FantasyTab.prototype,AbstractTab);

//传说中的静态方法.......
window.FantasyTab.create = function( option ){
	var tab = new FantasyTab(option);
	return tab.init();
};