JavaScript浏览器选项卡效果

有图如下:

代码如下:


代码如下:

/*
head html : <span></span>
body html : <iframe></iframe>
*/
var Tab = function(id,title,url,isClose){
this.id = id;
this.title = title;
this.url = url;
this.head = jQuery('<span class="tab-head">' + this.title +'</span>');
this.body = jQuery('<iframe name="ifm' + this.id +'" src="' + this.url +'" frameborder=0 class="tab-body"></iframe>').hide();
isClose && (this.close = jQuery('<span class="tab-head-closeBtn">×</span>'),this.closeBtn());
};
Tab.prototype = {
closeBtn : function(){
var self = this;
self.close.bind("mouseover",function(){
jQuery(this).addClass("tab-closeBtn-hover");
});
self.close.bind("mouseout",function(){
jQuery(this).removeClass("tab-closeBtn-hover");
});
self.head.append(self.close);
},
getFocus : function(){
this.head.addClass("tab-head-active");
this.body.show();
},
loseFocus : function(){
this.head.removeClass("tab-head-active");
this.body.hide();
},
destory : function(){
this.head.remove();
this.body.remove();
},
};
/*
head html : <div><span></span><span></span>...</div>
body html : <div><iframe></iframe><iframe></iframe>...</div>
*/
var TabView = function(container){
this.container = container;
this.head = jQuery('<div class="tabView-head"></div>');
this.body = jQuery('<div class="tabView-body"></div>');
this.tabs = [];
this.tabId = 0;
this.focusTab = null;
this.init();
};
TabView.prototype = {
init : function(){
this.container.append(this.head).append(this.body);
},
add : function(title,url,isClose){
var self = this;
var tab = new Tab(self.tabId,title,url,isClose);
self._tabEvents(tab);
(self.tabs.length==0) && (tab.getFocus(),self.focusTab=tab);
self.tabs.push(tab);
self.head.append(tab.head);
self.body.append(tab.body);
self.tabId++;
},
remove_ref : function(tab){
var self = this;
for(var i=0;i<self.tabs.length;i++){
if(tab.id===self.tabs[i].id){
tab.destory();
self.tabs.splice(i,1);
return i;
}
}
return -1;
},
destory : function(){
this.head.remove();
this.body.remove();
},
_tabEvents : function(tab){
var self = this;
tab.head.bind("click",function(){
if(self.focusTab.id != tab.id){
tab.getFocus();
self.focusTab.loseFocus();
self.focusTab = tab;
}
});
tab.close && tab.close.bind("click",function(){
tab.destory();
var i = self.remove_ref(tab);
if(tab.id==self.focusTab.id){//如果关闭的是当前的tab
if(self.tabs.length==0){//如果所有tab都已关闭
self.destory();
}else{
var nextIndex = self.tabs.length==i ? i-1 : i;
self.focusTab = self.tabs[nextIndex];
self.focusTab.getFocus();
}
}
});
},
};

赞 (0)

相关推荐

  • 利用js实现选项卡的特别效果的实例

    复制代码 代码如下: <html><head>    <meta charset="utf-8"/>    <style type="text/css">        *{margin:0;padding:0;border:0}        #main{width:300px;height:300px;background-color:green}        #head{height:50px;backgrou

  • 跨浏览器通用、可重用的选项卡tab切换js代码

    由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过

  • javascript渐变显示的雅虎中国选项卡效果代码

    y body { margin: 0; text-align: center; font-size: 12px; } .papanel, .pabd, .paft, .patop {width: 348px;} .papanel { background: #a5d0fd url("/article/upimages/pabg.gif") repeat-x; border-left: 1px solid #7bbdff; border-right: 1px solid #7bbdff;

  • 基于JavaScript实现通用tab选项卡(通用性强)

    选项卡在大量的网站都有应用,虽然形式各有不同,但是索要达成的目的都是一样的,一般都是为了进行分类或者节省网页空间只用,算是一件利器,下面就是一个选项卡的代码实例,通用性很强,下面就和大家分享一下. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb

  • 纯php打造的tab选项卡效果代码(不用js)

    1.根据get判断,获取get生成css 复制代码 代码如下: <style type="text/css"> <?php if(!isset($_GET['city_id'])) { $city_id = 12; } else { $city_id = $_GET['city_id']; } echo '.a'.$city_id.' { color:red; } '; for($i=12;$i<=16;$i++) { if($i != $city_id) {

  • jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例

    -1.右侧弹出导航菜单完整代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

  • javascript实现表现、结构、行为分离的选项卡效果！

    其特点是扩展方便,只要自己添加标题和内容即可,自动初始化. 无标题文档 window.onload=resetTab; function getTabTitle(tab) { var childNodesList=tab.childNodes; var titleNodes=new Array(); var j=0; var i; for (i=0;i 选项卡[1] 选项卡[2] 选项卡[3] 选项卡[4] 1经过前述的多个步骤,一个基本的CHM文件已制作完毕,在编译前还可进行一些完善功能的设置

  • js实现tab选项卡函数代码

    * { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b

  • js/jQuery简单实现选项卡功能

    第一种方法是用原生的js代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>简单选项卡</title>    <style type="text/css">    body,ul,li{margin:0;padding:0;}    body{font:12px/1.5 Ta

  • javascript横排竖排标准选项卡效果代码

    PRcss的选项卡 www.jb51.net 首页 嘿嘿,无视div原始class值. 测试 继续无视h3原始class值. 无聊 h3没有值也可以- 傻蛋 div没有值一样可以- 首页 嘿嘿,无视容器原始class值. 测试 继续无视h3原始class值. 无聊 h3没有值也可以- 傻蛋 div没有值一样可以- 首页 嘿嘿,无视h3原始class值. 测试 继续无视div原始class值. 无聊 h3没有值也可以- 傻蛋 class值相似一样也可以- 指定class后,即时再多一个div也行.

  • javascript实现tabs选项卡切换效果(自写原生js)

    javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

  • 用javascript实现的不错的一款网页选项卡

    这款选项卡效果,是我见过的一个不错的选项卡效果,不是最好,也是很好的 Javascript 标签页(TAB)浏览控件推介之:DOMTab - javascript, DOMTab, TAB, 标签页, /* DOMtab Version 3.1415927 Updated March the First 2006 written by Christian Heilmann check blog for updates: http://www.wait-till-i.com free to use

随机推荐