JSTAB选项卡

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="auther" content="fq" />
<title>tab</title>
<script type="text/javascript">
function addEvent(elem,type,fn){if(elem.nodeName==="A"&&type==="click"){elem.setAttribute("href","javascript:void(0)")};if(elem.addEventListener){elem.addEventListener(type,fn,false);return true;}else if(elem.attachEvent){elem['e'+type+fn]=fn;elem[type+fn]=function(){elem['e'+type+fn](window.event);}
elem.attachEvent("on"+type,elem[type+fn]);return true;}
return false;};function slide(o){var handle=o.handle,content=o.content,mode=o.mode||"moseover",myClass=o.current,speed=o.speed,fn=o.fn,flag=0,past,timer;for(var i=0;i<handle.length;i++){(function(i){addEvent(handle[i],mode,function(){clearTimeout(timer);show(i);});})(i);if(handle[i].className===myClass)past=i;}
function show(flag){var i=flag;handle[past].className="";content[past].style.display="none";past=flag;handle[i].className=myClass;content[i].style.display="block";if(handle[i].nodeName==="A")handle[i].blur();(flag+1)==handle.length?flag=0:flag++;if(speed){timer=setTimeout(function(){show(flag)},speed);addEvent(content[i],"mouseover",function(){clearTimeout(timer)});addEvent(content[i],"mouseout",function(){clearTimeout(timer);timer=setTimeout(function(){show(flag)},speed)});};if(fn)fn();}
if(speed)show(flag);}</script>
<style>
h2{ margin:0;}
ul{ padding:0; margin:0;}
.tab{ width:400px; margin:30px auto 0; font-size:12px; color:#555; border:1px solid #ccc;}
.tab h2{ width:100%; overflow:hidden; font-size:12px; font-weight:normal; background:#f2f2f2;}
.tab h2 span,
.tab h2 a{ float:left; width:50px; line-height:25px; background:#ddd; border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; cursor:pointer;}
.tab h2 .current{ background:#fff; font-weight:bold; border-bottom:1px solid #fff;}
.tab ul{ padding:25px;}
</style>
</head>
<body>
<div style=" width:80%; margin:20px auto; border:1px solid #ccc; background:#f2f2f2; padding:15px; font-size:14px; line-height:22px;">
  <b>选项卡解说：</b><br />
  1、支持一个页面多次引用；<br />
  2、一次引用实现多次切换；<br />
  3、点击/滑过等切换方式自定义；<br />
  4、自动播放+鼠标动作切换；<br />
  5、自动播放时鼠标移向内容区域暂停播放；<br />
  6、切换完成后回调函数。<br /><br />
  
  <b>函数引用说明：</b><br />
  slide({handle:elems, content:elems, current:"current", mode:"click", delay:5000, fn:function(){...} });<br /><br />
  引用基本格式 slide({...}); 中间的“...”所代表的就是参数内容。<br /><br />
  参数说明：<br />
  handle：表示选项卡分组名称的节点数组<br />
  content：表示与分组名称对应的内容的节点数组<br />
  current：表示当前分组名称的样式名称<br />
  mode：表示切换方式，支持“click/mouseover/...”等鼠标事件<br />
  delay：表示自动播放的间隔时间，有值则自动播放，单位毫秒<br />
  fn：表示切换完成一次后的回调函数
</div>
<div style="width:80%; margin:auto; text-align:left; font-size:12px;">
  <b>引用示例一：</b>
  <p>
  // 鼠标滑过显示  一次引用，实现多个切换<br />
  var slides = ["tab01", "tab02"];<br />
  for(var i=0; i&lt;slides.length; i++){<br />
  &nbsp; var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span");<br />
  &nbsp; var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul");<br />
  &nbsp; slide({ handle:elemTit, content:elemCon, current:"current", mode:"mouseover" });<br />
}</p></div>
<div class="tab" id="tab01">
  <h2>
    <span class="current">标题0</span>
    <span>标题1</span>
    <span>标题2</span>
    <span>标题3</span>
  </h2>
  <ul>滑过显示0</ul>
  <ul style="display:none">滑过显示1</ul>
  <ul style="display:none">滑过显示2</ul>
  <ul style="display:none">滑过显示3</ul>
</div>
<div class="tab" id="tab02">
  <h2>
    <span>标题0</span>
    <span>标题1</span>
    <span class="current">标题2</span>
    <span>标题3</span>
  </h2>
  <ul style="display:none">滑过显示0</ul>
  <ul style="display:none">滑过显示1</ul>
  <ul>滑过显示2</ul>
  <ul style="display:none">滑过显示3</ul>
</div>
<div style="width:80%; margin:auto; text-align:left; font-size:12px;">
  <b>引用示例二：</b>
  <p>// 鼠标点击显示<br />
  slide({ handle:document.getElementById("tab03").getElementsByTagName("h2")[0].getElementsByTagName("a"), content:document.getElementById("tab03").getElementsByTagName("ul"), current:"current", mode:"click" });</p></div>
<div class="tab" id="tab03">
  <h2>
    <a href="#">标题0</a>
    <a href="#" class="current">标题1</a>
    <a href="#">标题2</a>
    <a href="#">标题3</a>
  </h2>
  <ul style="display:none">点击显示0</ul>
  <ul>点击显示1</ul>
  <ul style="display:none">点击显示2</ul>
  <ul style="display:none">点击显示3</ul>
</div>
<div style="width:80%; margin:auto; text-align:left; font-size:12px;">
  <b>引用示例三：</b>
  <p>// 自动播放<br />
slide({<br />
&nbsp; handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"),<br />
&nbsp; content:document.getElementById("tab04").getElementsByTagName("ul"),<br />
&nbsp; current:"current",<br />
&nbsp; mode:"mouseover",<br />
&nbsp; speed:1000<br />
});</p></div>
<div class="tab" id="tab04">
  <h2>
    <a href="#" class="current">标题0</a>
    <a href="#">标题1</a>
    <a href="#">标题2</a>
    <a href="#">标题3</a>
  </h2>
  <ul>自动播放0</ul>
  <ul style="display:none">自动播放1</ul>
  <ul style="display:none">自动播放2</ul>
  <ul style="display:none">自动播放3</ul>
</div>
<div style="margin:50px auto 0; text-align:center; font-size:14px; font-weight:bold;">
  完整示例下载： <a href="http://www.imf7.com/code/tab/TAB.rar" target="_blank">完整版下载TAB.rar</a> <a href="http://www.imf7.com/code/tab/tab.full.rar" target="_blank">完整JS下载tab.full.rar</a> <a href="http://www.imf7.com/code/tab/tab.min.rar" target="_blank">压缩JS下载tab.min.rar</a>
  <br /><br />
  项目主页：<a href="http://www.imf7.com/code/tab/" target="_blank">http://www.imf7.com/code/tab/</a><br />
  博客介绍：<a href="http://www.imf7.com/archives/154" target="_blank">http://www.imf7.com/archives/154</a>
</div>
<script type="text/javascript">
// 鼠标滑过显示  一次引用，实现多个切换
var slides = ["tab01", "tab02"];
for(var i=0; i<slides.length; i++){
  var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span");
  var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul");
  slide({ handle:elemTit, content:elemCon, current:"current", mode:"mouseover" });
}
// 鼠标点击显示
slide({
  handle:document.getElementById("tab03").getElementsByTagName("h2")[0].getElementsByTagName("a"),
  content:document.getElementById("tab03").getElementsByTagName("ul"),
  current:"current",
  mode:"click"
});
// 自动播放
slide({
  handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"),
  content:document.getElementById("tab04").getElementsByTagName("ul"),
  current:"current",
  mode:"mouseover",
  speed:1000
});
// 如果您的页面引用了JQuery，那么这里的引用可以这样写
// slide({handle:$("#tab04 h2 a"), content:$("#tab04 ul"), current:"current", mode:"click"});
</script>
</body>
</html>

<!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>
<title>  </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html{margin:10px;padding:0;font-size:12px;font-family:Arial;font:12px/1 Tahoma, Arial;}
.fxTab{border:1px solid #999;width:400px;}
.fxTab ul,.fxTab li{margin:0;padding:0;list-style:none;}
.fxTab ul{padding:10px;border-bottom:1px solid #999;padding-bottom:0;background:#EFE0A5;overflow:hidden;_height:1%;}
.fxTab li{border:1px solid #999;border-bottom:1px solid #999;padding:5px;float:left;display:inline;margin-right:2px;position:relative;bottom:-1px;cursor:pointer;background:#eee;}
.fxTab li.hot{border-bottom:1px solid #fff;background:#fff;cursor:default;}
.tab_content{margin:5px;white-space:nowrap;overflow:hidden;width:390px;}
.tab_content div{display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;width:100%;overflow:hidden;white-space:auto;}
.tab_content img{vertical-align:middle;}
</style>

</head>
<body>
<div class="fxTab" id="" >
    <ul id="tab_nav"><li class="hot">最新更新</li><li>VIP小说</li><li>新书更新</li></ul>
    <div style="clear:both"></div>
    <div class="tab_content" id="tab_content">
        <div id=""><img src="http://gg.blueidea.com/2010/mianfeiwangzhan/homeNshop.gif" alt="" /></div>
        <div id=""><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /></div>
        <div id="">猎卡 第二卷 刺客联盟　第四十四章 烧钱之举 白斩堂04-15 22:51</div>
    </div>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
function fx(E) {
    var t=0,s=0,F=Function,qe=[].slice.call(arguments,1),hd,k,me=arguments.callee;
    var T={time:36,init:F,end:F,play:F,fx:F('l','return Math.pow(l,7)')};
    for(k in T)$[k]=T[k];for(k in E)$[k]=E[k];
    if(false===$.init())return F;hd = setInterval(each, 10);return clear;
    function $(f,t){return + f + (t - f) * s};
    function each(){s = $.fx(t++/$.time);if(false===$.play(s)||s==1)clear()};
    function clear(x) {if(false!==$.end(x)&&qe.length){me.apply(window,qe)};clearInterval(hd)}
}; 
function onToggle(opts){
  var ini={btns:[],bodys:[],init:function(){},on:function(){},hover:false,wait:0},prev,timer;
  for(var k in opts)ini[k]=opts[k];
  var hz=ini.hover?ini.wait:0,type=ini.hover?"onmouseover":"onclick";
  for(var i=0,l=ini.btns.length;i<l;i++){
      (function (btn,i){
          if(i==0){prev={btn:btn,body:ini.bodys[i],index:i};ini.init(prev)};
          btn[type]=function (){
              if(prev.btn===this)return;
              clearTimeout(timer);
              var $this=this,cur;
              timer=setTimeout(function (){
                  cur={btn:$this,body:ini.bodys[i],index:i};
                  ini.on(prev,cur);//user event
                  prev=cur
              },hz);
          };
          if(ini.hover)
              btn.onmouseout=function(){ clearTimeout(timer)}
      })(ini.btns[i],i)
  }
};
onToggle({
    btns:document.getElementById('tab_nav').getElementsByTagName('LI'),
    bodys:document.getElementById('tab_content').getElementsByTagName('div'),
    hover:true,
    on:function (a,b){
        this.f&&this.f();
        a.btn.className='';
        b.btn.className='hot';
        this.f=fx({
            init:function (){
               this.f=tab_content.scrollLeft;
               this.to=b.index*b.body.offsetWidth;
            },
            play:function (){
                tab_content.scrollLeft=this(this.f,this.to)
            }
        })
    }
})
 //]]>
</script>
</html>

posted @ 2012-07-27 18:02 赵小磊阅读(421) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

JSTAB选项卡

公告