TAB.rar_Tabú_界面编程_Windows编程下载-pudn.com

<!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 = ["tab01", "tab02"];<br /> for(var i=0; i<slides.length; i++){<br />   var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span");<br />   var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul");<br />   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="#" 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 />   handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"),<br />   content:document.getElementById("tab04").getElementsByTagName("ul"),<br />   current:"current",<br />   mode:"mouseover",<br />   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>