`
leeqoo
  • 浏览: 123947 次
社区版块
存档分类
最新评论

仿 浏览器tab效果实现

    博客分类：
  • js
 
阅读更多
首先借用和分享下之前同学的成果呵呵 因为我认为他的比我的风骚

http://www.iteye.com/topic/652682  留作参考


自己写的一个页面，现在还是一个jsp页面因为时间原因暂时没做直接html测试页 ，使用时可以参考tab2.jpg 提示 frame出调用使用测试,待重新整理


<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<script src="<%=request.getContextPath() %>/js/noRefresh.js" type="text/javascript"></script>
<style>
.tab_li_active {float:left; background:url(img/tab/tab.gif); margin-left:3px; padding:7 3 1 3; cursor:hand; }
.tab_li_active span {margin:-2 8 0 8; font-family:"黑体"; font-size:12px; font-weight:600; color:#000000; vertical-align:text-top;}
.tab_li_hidden {float:left; background:url(img/tab/tab_a.gif); margin-left:3px; padding:7 3 1 3; cursor:hand; }
.tab_li_hidden span {margin:-2 8 0 8; font-family:"黑体"; font-size:12px; font-weight:600; color:#7D7D7D; vertical-align:text-top;}
.frameClass {width:100%; height:100%;}
A {
COLOR: #7D7D7D; TEXT-DECORATION: none;
}
A:hover {
COLOR: red;TEXT-DECORATION: none;
}
</style>
<script language="javascript">

var tabTagName = "li";  //TAB use tag type
var framesParentNodeId="content"; //TAB Pointing FRAME's parentNode id
var activeClassName="tab_li_active";    //curr active TAB use className
var hiddenClassNmae="tab_li_hidden";    //curr hidden TAB use className
var disBlock="block";                   //display
var disHidden="none";                   //hidden

/** If you need add a new TAB tag into this page,you can try do like this example:
function mzTab(id,content,link)
{
var targetObj = parent.mainFrame;

if(targetObj.mzFexistTab(id)==false)
{
if(targetObj.mzGetTabCount()<=8)
{
targetObj.document.getElementById('tid').innerHTML+="<li id='"+id+"' title='"+content+"'  onClick='mzFrameDis("+id+");' class='tab_li_active'><span>"+content+"<a href='#' title='关闭标签' onclick='mzDeleObj("+id+");'>&nbsp;&nbsp;X&nbsp;&nbsp;</a></span></li>";
//alert(targetObj.document.getElementById('tid').innerHTML);
}else{
alert('TAB显示数目已达上限，请关闭已打开TAB后继续操作');
return;
}

if(targetObj.mzFexistFrame(id)==false)
{
targetObj.document.getElementById('contents').innerHTML+="<iframe id='f"+id+"' class='frameClass' name='content' src='"+link+"' frameborder='0'></iframe>";
//alert(targetObj.document.getElementById('contents').innerHTML);
}
}

//Pointing the new TAB and new FRAME
targetObj.mzFrameDis(id);
}

// var targetObj = parent.mainFrame;
when you using method not in this page , so you should find relative path of 'main.jsp' from using page.

mail:404810628@qq.com
*/

function mzFrameDis(id){
if(mzFexistTab(id)==false)
{
alert('不存在选择项');
return;
}else{
//当前选择的TAB
mzGetActiveTab(id);
}

if(mzFexistFrame(id)==false)
{
alert('不存在选择项对应层');
return;
}else{
//当前选择FRAME
mzGetActiveFrame(id);
}
}

function mzGetTabCount()
{
return document.getElementsByTagName(tabTagName).length;
}

function mzGetActiveTab(id)
{
var lis    = document.getElementsByTagName(tabTagName);
for(var k=0 ; k <lis.length ; k++)
{
if(lis[k].id==id)
{
lis[k].className =activeClassName;
}else{
lis[k].className =hiddenClassNmae;
}
}
}

function mzGetActiveFrame(id)
{
var frames = document.getElementsByName(framesParentNodeId);
for(var i=0 ; i <frames.length; i++)
{
var fid = "f"+id;
if(frames[i].id==fid)
{
frames[i].style.display=disBlock;
}else{
frames[i].style.display=disHidden;
}
}
}

function mzFexistTab(id)
{
var obj = document.getElementById(id);
if(obj!=null)
{return true;}else{return false;}
}

function mzFexistFrame(id)
{
var obj = document.getElementById("f"+id);
if(obj!=null)
{return true;}else{return false;}
}

function mzDeleObj(id)
{
  var tab=document.getElementById(id);
  //获取上个兄弟节点
  var lastTabId=tab.previousSibling.id;
 
      if(tab)
      {
      tab.parentNode.removeChild(tab);
      }
      var frame = document.getElementById("f"+id);
      if(frame)
      {
        frame.parentNode.removeChild(frame);
      }
     
      if(mzFexistActiveTab()==false)
      {
      mzFrameDis(lastTabId);
      }
}

//是否存在activeTab
function mzFexistActiveTab()
{
var lis    = document.getElementsByTagName(tabTagName);
var flag =0;
for(var k=0 ; k <lis.length ; k++)
{
if(lis[k].className==activeClassName)
{
flag=1;
}
}
if(flag>0)
{
return true;
}else{
return false;
}
}

//TAB滚动
function mzScroll(flag)
{
var tabDivLen=document.getElementById('tid').offsetWidth;
//alert(document.getElementById('tid').innerHTML);
var innerLen = document.getElementById('tid').innerHTML.length;
//alert(document.getElementById('tid').firstChild.scrollLeft);
document.getElementById('tid').firstChild.scrollLeft+=10;
if(innerLen>=100)
{
if(flag)
{
document.getElementById('tid').firstChild.scrollLeft+=10;
}else{
document.getElementById('tid').scrollLeft+=10;
}
}
}

  var i=0;
function moveText(){

document.getElementById('tid').style.left = i;
i++;
//alert(document.getElementById('tid').clientWidth);
if(i > (parseInt(document.getElementById('tid').clientWidth)))i=1;
setTimeout("moveText()",10);
}

</script>
</head>

<body onload="moveText();" style="background-image:url(img/menu_border.gif); background-position:right; background-repeat:repeat-y;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0px;">
  <tr >
    <td height="25" colspan="2" background="img/main_title_bg.gif" style="overflow:hidden;">
<div style="margin:0p; overflow:hidden; border:thin dotted 0px red; width:100%; height:100%;">
<div id="tabDiv" style="float:left; margin:0px; overflow:hidden; border:thin dotted 0px red; width:90%; height:100%;">
<ul id="tid" style="list-style:none; float:left; margin-left:5px; margin-bottom:-5px;">
      <li id="0" onClick="mzFrameDis('0');" class="tab_li_active"><span  ><img style="vertical-align:top;" src="img/home.png">  首 页  </span></li>
    </ul>
</div>
</div>
</td>

  </tr>
 
  <tr >
    <td colspan="2" id="contents">
<iframe class="frameClass" name="content" id="f0"  src="<%=request.getContextPath()%>/main/content.jsp" frameborder="0"></iframe>
</td>
  </tr>
</table>
</body>
</html>


  • 大小: 29.5 KB
  • 大小: 48.5 KB
分享到：
| SyntaxHighlighter 代码高亮组件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Winform 高仿 Chrome 的 Tab页控件

    "Winform 高仿 Chrome 的 Tab页控件"正是这样一个实现，它旨在模拟Chrome浏览器的标签页行为，包括新增、删除、移动以及自适应宽度等功能，从而让桌面应用也能拥有类似浏览器的交互体验。 首先，我们要理解...

    QTabWidget+QToolBar实现浏览器标签页

    在编程实践中，为了实现标签页的下拉菜单效果，我们可能需要监听QTabWidget的信号，例如`currentChanged(int)`，并在信号触发时更新QToolBar上的按钮状态。同时，需要自定义一个下拉菜单（可能是QMenu），并将其关联...

    Android实现类似浏览器可以新增标签页，可以随意多个标签之间来回切换

    在Android平台上，构建一个类似浏览器的应用，实现多标签页切换是一项常见的需求。这涉及到对Android系统框架的理解，尤其是Activity管理、Fragment操作以及UI设计。以下将详细解析如何实现这一功能。 1. **...

    Android-使用Behavior高仿实现UC浏览器首页上下滑动效果

    "Android-使用Behavior高仿实现UC浏览器首页上下滑动效果"这个项目就是针对这一需求，通过使用Behavior这一Android Design Support Library中的组件，来模拟UC浏览器首页的滑动行为。Behavior是 CoordinatorLayout ...

    仿微信左右滑动的tab实现

    本项目提供的"仿微信左右滑动的tab实现"是基于Android平台的源码实现，确保能够完美运行，帮助开发者快速构建具有此类交互效果的应用。 首先，让我们了解核心概念和技术： 1. **ViewPager**: Android中的`...

    重写Tabcontrol控件仿浏览器选项卡源码.zip

    窗体后台管理系统通过点击treeview节点打开相应选项卡显示相应的内容，选项卡通过重写Tabcontrol控件实现仿浏览器效果，自定义标头、颜色或者图标，源码中标头图标已经隐藏，根据实际需求可以再次调出显示，源码中...

    仿QQ--tab切换动画实例

    总的来说，“仿QQ--tab切换动画实例”是一个学习和参考的好资料，它展示了如何在Android应用中实现类似QQ的Tab切换动画效果。通过深入研究和实践，开发者不仅可以掌握动画技术，还能提升自己的UI/UX设计能力。

    仿天猫tab切换标签

    在网页设计中，"仿天猫tab切换标签"是一种常见的交互元素，主要用于呈现多个相关但内容不同的区域，通过点击不同标签实现内容的切换，提供良好的用户体验。这种设计模式常见于电商平台，如天猫、京东等，用于商品...

    仿ES文件浏览器.zip

    "仿ES文件浏览器.zip"是一个源码包，很可能包含了用于创建一个类似ES文件浏览器的应用程序的源代码。ES文件浏览器是一款流行的安卓设备上的文件管理工具，它提供了多种功能，如浏览本地和网络文件，管理文件，支持...

    漂亮TAB网页选项卡仿淘宝效果

    在网页设计中，选项卡（Tab）是一种常见的交互元素，用于组织和展示大量内容，而“漂亮TAB网页选项卡仿淘宝效果”就是一种模仿淘宝网风格的美观且实用的选项卡设计。这种设计通常结合了CSS（层叠样式表）和...

    仿UC新闻导航tab滑动

    【标题】"仿UC新闻导航tab滑动"指的是在Android应用开发中实现的一种常见的用户界面设计，它模拟了UC浏览器或其他新闻阅读应用中的导航栏功能。这个功能通常包含多个标签（tab），每个标签代表一个不同的内容分类，...

    jquery选项卡插件多种tab标签切换效果

    本篇文章将深入探讨jQuery实现的多种Tab标签切换效果及其背后的原理。 首先，jQuery选项卡的基本结构通常包括HTML、CSS和JavaScript三个部分。HTML用于构建选项卡的布局，CSS负责样式设计，而JavaScript（在这里是...

    仿时刻事件TAB切换

    在本项目中，我们看到有以下文件：`index.html`（主页面文件）、`shike_bh.jpg`和`shike_wu.jpg`（可能作为TAB切换效果的背景图片）、`shike.js`（JS脚本文件，实现TAB切换逻辑）。 首先，我们需要理解HTML中的TAB...

    JS仿大旗网的大屏Tab式图文切换菜单效果.rar

    "JS仿大旗网的大屏Tab式图文切换菜单效果"是一个优秀的示例，展示了如何利用JavaScript来实现动态、吸引人的导航菜单，这种菜单尤其适用于数码产品类和门户类网站，能够帮助用户更直观、便捷地浏览网站内容。...

    一个仿淘宝的tab卡选框 jquery+css

    本项目“一个仿淘宝的tab卡选框”利用jQuery和CSS技术实现了这一功能，旨在提供类似淘宝网站的交互效果。下面我们将深入探讨这个项目所涉及的知识点。 首先，我们来了解jQuery。jQuery是一个轻量级的JavaScript库，...

    tab标签选项卡效果同一页n组(8种皮肤)

    在"tab.js"文件中，很可能包含了实现tab选项卡行为逻辑的代码，如切换内容、添加悬停效果等。 根据文件名称，我们可以推测每个HTML文件代表了一个不同的tab选项卡示例，例如"蓝色选项卡.html"可能是展示蓝色主题的...

    完美兼容Ie6 jquery仿凡客商城图片放大镜及Tab小图切换

    【标题】"完美兼容Ie6 jquery仿凡客商城图片放大镜及Tab小图切换" 描述了这个项目的核心功能，即使用jQuery实现一个与凡客诚品商城类似的图片查看功能，包括图片放大镜效果以及Tab小图切换，且特别强调了对Internet ...

    js雅虎tab标签效果.rar

    【标题】"js雅虎tab标签效果.rar"指的是一个使用JavaScript实现的仿雅虎风格的Tab切换效果的压缩包资源。这种效果常用于网页设计，能够有效地组织和展示信息，提高用户体验。 【描述】"js雅虎tab标签效果"表明这个...

Magicbox
Global site tag (gtag.js) - Google Analytics