TAB.rar

  • PUDN用户
    了解作者
  • Java
    开发工具
  • 4KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 0
    下载次数
  • 2014-12-21 15:39
    上传日期
在同一个页面应用多种TAB的综合实例,可在一个页面中同时布局选项卡,也布局滑动门,或者是二者兼顾。这个问题以前用户就提到过,不知如何在同一页面布置多个选项卡,你可以参考一下这个。    1、支持一个页面多次引用;    2、一次引用实现多次切换;    3、点击/滑过等切换方式自定义;    4、自动播放+鼠标动作切换;    5、自动播放时鼠标移向内容区域暂停播放;    6、切换完成后回调函数。
TAB.rar
  • TAB
  • js
  • tab.min.js
    1.3KB
  • tab.full.js
    2.2KB
  • tab.html
    5.8KB
内容介绍
<!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-Download by http://www.codefans.net</title> <script type="text/javascript" src="js/tab.min.js"></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 = [&quot;tab01&quot;, &quot;tab02&quot;];<br /> for(var i=0; i&lt;slides.length; i++){<br /> &nbsp; var elemTit = document.getElementById(slides[i]).getElementsByTagName(&quot;h2&quot;)[0].getElementsByTagName(&quot;span&quot;);<br /> &nbsp; var elemCon = document.getElementById(slides[i]).getElementsByTagName(&quot;ul&quot;);<br /> &nbsp; slide({ handle:elemTit, content:elemCon, current:&quot;current&quot;, mode:&quot;mouseover&quot; });<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(&quot;tab03&quot;).getElementsByTagName(&quot;h2&quot;)[0].getElementsByTagName(&quot;a&quot;), content:document.getElementById(&quot;tab03&quot;).getElementsByTagName(&quot;ul&quot;), current:&quot;current&quot;, mode:&quot;click&quot; });</p></div> <div class="tab" id="tab03"> <h2> <a href="#" rel='nofollow' onclick='return false;'>标题0</a> <a href="#" class="current" rel='nofollow' onclick='return false;'>标题1</a> <a href="#" rel='nofollow' onclick='return false;'>标题2</a> <a href="#" rel='nofollow' onclick='return false;'>标题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(&quot;tab04&quot;).getElementsByTagName(&quot;h2&quot;)[0].getElementsByTagName(&quot;a&quot;),<br /> &nbsp; content:document.getElementById(&quot;tab04&quot;).getElementsByTagName(&quot;ul&quot;),<br /> &nbsp; current:&quot;current&quot;,<br /> &nbsp; mode:&quot;mouseover&quot;,<br /> &nbsp; speed:1000<br /> });</p></div> <div class="tab" id="tab04"> <h2> <a href="#" class="current" rel='nofollow' onclick='return false;'>标题0</a> <a href="#" rel='nofollow' onclick='return false;'>标题1</a> <a href="#" rel='nofollow' onclick='return false;'>标题2</a> <a href="#" rel='nofollow' onclick='return false;'>标题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> <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>
评论
    相关推荐
    • tab.rar
      基于CSS3+JQuery制作实现的一款简单的Tab选项卡,采用圆滑边角的风格设计,既简洁又漂亮,且兼容IE8及以上浏览器,有需要网页选项卡的朋友不妨下载本源码。
    • tab.zip
      javascript仿浏览器页面标签切换的TAB选项卡代码
    • Tab.zip
      Tab 标签切换,可左右滑动切换视图。简单的方法实现的Tab配合ViewPager滑动。
    • TAB.rar
      CXTabCtrl an easier tab control for dialogs and forms
    • Tab.zip
      简单使用VC中的Tab控件,简单大方,思路清晰,看过之后,很快就会使用
    • tab.zip
      点击 TabBar 上的“更多”按钮时,会出现另外一条TabBar,显示更多隐藏的按钮。可用于TabBar上按钮过多的情况。
    • tab切换效果.rar
      android 页面切换例子(tab切换效果)
    • tab.rar
      tab栏切换效果,基于bootstrap,jq
    • TAB.rar
      完成不同功能的网页Tab,滑动门和选项卡,选项卡功能和使用说明:  1、支持一个页面多次引用;  2、一次引用实现多次切换;  3、点击/滑过等切换方式自定义;  4、自动播放+鼠标动作切换;  5、自动...
    • qpopper2.53.tar.Z
      pop3 server