Bo-Blog自定义搜索
可恶的 robots.tEasyTabs1.2让BLOG侧边栏变成菜单自动轮显效果 
2008-8-14 , 11:11
XPbox Skin 是单栏风格，所以要使用到此功能，这个是在国外一个网站找来的，和大家分享一下。
框架添加TAB标签菜单，利用JS调用出最新日志，最新评论等，完成了以上效果。
步骤：定义 EasyTabs -> 为页面加入 EasyTabs -> 做出符合 EasyTabs 所定义的框架 ->用CSS美化 EasyTabs
在这里我先介绍一下 EasyTabs ，它可以是JS调用，也可以直接放在里，代码如下：
var tablink_idname = new Array("tablink")
var tabcontent_idname = new Array("tabcontent")
var tabcount = new Array("3")
var loadtabs = new Array("2")
var autochangemenu = 1;
var changespeed = 3;
var stoponhover = 0;
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}
以上代码仅供参考，具体要对应你的网页进行相应设置，需要设置的项目如下：
var tablink_idname = new Array("tablink")
//设置标签标题的框架名字，即标题的DIV框架(不能以数字结尾)
var tabcontent_idname = new Array("tabcontent")
//设置主要内容的框架名字(不能以数字结尾)
var tabcount = new Array("3")
//设置标题的项目数量(一定要准确)
var loadtabs = new Array("2")
//设置开始时停留的标签
var autochangemenu = 1;
//设置你要自动轮显的框架编号(只有一个框架的只能设置1,不能为0)
var changespeed = 3;
//设置轮显的时间间隔，单位为秒
var stoponhover = 0;
//最后设置鼠标停留后是否停止轮显(0为否,1为是)
好了，设置就根据你的需要，现在我们来定义DIV框架(以下是为上面JS所做的DIV)：
<div id="tiaoyong">
<div class="EasyTab">
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1">最新日志</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2">最新评论</a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3">最新留言</a></li>
</ul>
</div>
<div id="tabcontent1"><!--global:{block_entries}--></div>
<div id="tabcontent2"><!--global:{block_replies}--></div>
<div id="tabcontent3"><!--global:{block_allnewsgb}--></div>
</div>
以上DIV框架是单个表格三个栏目菜单自动轮显，根据需要自己添加，但需要注意设置：
"easytabs('1', '1');" onfocus="easytabs('1', '1');"
//我们可以看到三个这样的顺序设置分别是：1号表格1号标题
id="tablink1" 、 id="tablink2" 、 id="tablink3"
//对应上面的var tablink_idname = new Array("tablink") [名字必须一致]
div id="tabcontent1" ...2...3
//对应上面的var tabcontent_idname = new Array("tabcontent") [名字必须一致]
/**/
//这是bo-blog的调用，输入你要显示内容
最后就是CSS部分了，根据你的皮肤不同进行设置，以下是我个人CSS样式：
#tiaoyong {
width: 333px;
height: 220px;
border:1px solid #3b3b3b;
}
.EasyTab {border-bottom:1px solid #3b3b3b; height:23px;width:100%;}
.EasyTab ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.EasyTab li {display:inline; line-height:23px;}
.EasyTab li a {color:#767676; text-decoration:none; padding:5px;}
.EasyTab li a.tabactive {background-color:#3b3b3b; font-weight:bold; position:relative;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4 {
width:100%; text-align:left;padding:6px 0px; font-size:12px; margin-bottom:5px;
}
#anothercontent1,#anothercontent2, #anothercontent3 {
width:100%; text-align:left;padding:6px 0px; font-size:12px; margin-bottom:5px;
}
这样整个框架菜单自动轮显就出来了，你可以参考下面几种不同数目的轮显菜单：
1.一个表格的：http://www.wdsxp.com/HTML/EasyTabs/Easytabs_one.html
2.二个表格的：http://www.wdsxp.com/HTML/EasyTabs/Easytabs_two.html
3.三个表格的：http://www.wdsxp.com/HTML/EasyTabs/Easytabs_three.html
对于参考，你可以把以上三个演示另存为或者查看源代码来参考；
另外EasyTabs也可以做成JS通过在HEAD里调用：
这里我把作者的原文件提供给大家下载，自己去研究研究，不懂的请评论回复！
下载文件 (已下载 228 次)
框架添加TAB标签菜单，利用JS调用出最新日志，最新评论等，完成了以上效果。
步骤：定义 EasyTabs -> 为页面加入 EasyTabs -> 做出符合 EasyTabs 所定义的框架 ->用CSS美化 EasyTabs
在这里我先介绍一下 EasyTabs ，它可以是JS调用，也可以直接放在里，代码如下：
var tablink_idname = new Array("tablink")
var tabcontent_idname = new Array("tabcontent")
var tabcount = new Array("3")
var loadtabs = new Array("2")
var autochangemenu = 1;
var changespeed = 3;
var stoponhover = 0;
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}
以上代码仅供参考，具体要对应你的网页进行相应设置，需要设置的项目如下：
引用
var tablink_idname = new Array("tablink")
//设置标签标题的框架名字，即标题的DIV框架(不能以数字结尾)
var tabcontent_idname = new Array("tabcontent")
//设置主要内容的框架名字(不能以数字结尾)
var tabcount = new Array("3")
//设置标题的项目数量(一定要准确)
var loadtabs = new Array("2")
//设置开始时停留的标签
var autochangemenu = 1;
//设置你要自动轮显的框架编号(只有一个框架的只能设置1,不能为0)
var changespeed = 3;
//设置轮显的时间间隔，单位为秒
var stoponhover = 0;
//最后设置鼠标停留后是否停止轮显(0为否,1为是)
好了，设置就根据你的需要，现在我们来定义DIV框架(以下是为上面JS所做的DIV)：
<div id="tiaoyong">
<div class="EasyTab">
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1">最新日志</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2">最新评论</a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3">最新留言</a></li>
</ul>
</div>
<div id="tabcontent1"><!--global:{block_entries}--></div>
<div id="tabcontent2"><!--global:{block_replies}--></div>
<div id="tabcontent3"><!--global:{block_allnewsgb}--></div>
</div>
以上DIV框架是单个表格三个栏目菜单自动轮显，根据需要自己添加，但需要注意设置：
引用
"easytabs('1', '1');" onfocus="easytabs('1', '1');"
//我们可以看到三个这样的顺序设置分别是：1号表格1号标题
id="tablink1" 、 id="tablink2" 、 id="tablink3"
//对应上面的var tablink_idname = new Array("tablink") [名字必须一致]
div id="tabcontent1" ...2...3
//对应上面的var tabcontent_idname = new Array("tabcontent") [名字必须一致]
/**/
//这是bo-blog的调用，输入你要显示内容
最后就是CSS部分了，根据你的皮肤不同进行设置，以下是我个人CSS样式：
#tiaoyong {
width: 333px;
height: 220px;
border:1px solid #3b3b3b;
}
.EasyTab {border-bottom:1px solid #3b3b3b; height:23px;width:100%;}
.EasyTab ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.EasyTab li {display:inline; line-height:23px;}
.EasyTab li a {color:#767676; text-decoration:none; padding:5px;}
.EasyTab li a.tabactive {background-color:#3b3b3b; font-weight:bold; position:relative;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4 {
width:100%; text-align:left;padding:6px 0px; font-size:12px; margin-bottom:5px;
}
#anothercontent1,#anothercontent2, #anothercontent3 {
width:100%; text-align:left;padding:6px 0px; font-size:12px; margin-bottom:5px;
}
这样整个框架菜单自动轮显就出来了，你可以参考下面几种不同数目的轮显菜单：
1.一个表格的：http://www.wdsxp.com/HTML/EasyTabs/Easytabs_one.html
2.二个表格的：http://www.wdsxp.com/HTML/EasyTabs/Easytabs_two.html
3.三个表格的：http://www.wdsxp.com/HTML/EasyTabs/Easytabs_three.html
对于参考，你可以把以上三个演示另存为或者查看源代码来参考；
另外EasyTabs也可以做成JS通过在HEAD里调用：
<script type="text/javascript" language="javascript" src="easytabs.js"></script>
这里我把作者的原文件提供给大家下载，自己去研究研究，不懂的请评论回复！
下载文件 (已下载 228 次)
收藏了~~
3Q