舌签导航条很多见,比如新浪网(用javascript+div实现),集成搜索也很多。本文以Javascript+table实现双行舌签导航条,效果图如下:
原理很简单,一共3个tr,第1个和最后1个tr是舌签行,中间是搜索区。每一个舌签行由多个舌签td,加上2个修饰用的td组成,用td的onclick事件控制舌签图片(我用的是交错图片,要稍微复杂点,如果是方块状舌签要简单很多)和搜索区,代码比较简单,不在多说,完整源代码请下载附件(http://www.hugesoft.net/ContentPage.aspx?p1=010001&p2=238)。
<
script type
=
'
text/javascript
'
>
var ItemArray = new MyArray( 10 );
ItemArray[ 0 ] = " tdItem1 " ;
ItemArray[ 1 ] = " tdItem2 " ;
ItemArray[ 2 ] = " tdItem3 " ;
ItemArray[ 3 ] = " tdItem4 " ;
ItemArray[ 4 ] = " tdItemLast " ;
ItemArray[ 5 ] = " BtdItem1 " ;
ItemArray[ 6 ] = " BtdItem2 " ;
ItemArray[ 7 ] = " BtdItem3 " ;
ItemArray[ 8 ] = " BtdItem4 " ;
ItemArray[ 9 ] = " BtdItemLast " ;
var PrevSelectTd = 0 ;
var PrevSelectTdP =- 1 ;
function MyArray(len) ... {
this.length = len;
return this;
}
function OnTdSelect(param,param2)
... {
//没有新的选择
if(param==PrevSelectTd)
return;
//上次选择的非每一排的第一个
if(PrevSelectTdP!=-1)
...{
document.getElementById(ItemArray[PrevSelectTdP]).className=((PrevSelectTdP<5)?"":"B")+(((PrevSelectTdP%5)==4)?"TdLastItem":"TdItem");
PrevSelectTdP=-1;
}
if((param%5)!=0)
...{
//不是第一个
if((param-1)!=PrevSelectTd)
document.getElementById(ItemArray[PrevSelectTd]).className=((PrevSelectTd<5)?"":"B")+(((PrevSelectTd%5)==4)?"TdLastItem":"TdItem");
document.getElementById(ItemArray[param-1]).className=((param>5)?"B":"")+"TdItemSelectP";
PrevSelectTdP=param-1;
}
else
...{
document.getElementById(ItemArray[PrevSelectTd]).className=((PrevSelectTd<5)?"":"B")+(((PrevSelectTd%5)==4)?"TdLastItem":"TdItem");
}
document.getElementById(ItemArray[param]).className=((param<5)?"":"B")+(((param%5)==4)?"TdLastItemSelect":"TdItemSelect");
PrevSelectTd=param;
document.forms["form1"].action=param2;
var searchType=document.getElementById(ItemArray[param]).innerHTML;
if(searchType=="百度")
...{
document.getElementById("tdInputValue").innerHTML="<input name='tn' type='hidden' value='baidu'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="谷歌")
...{
document.getElementById("tdInputValue").innerHTML="<input type='hidden' name='ie' value='GB2312'/><input name='oe' type='hidden' value='GB2312'/><input name='hl' type='hidden' value='zh-CN'/><input type='text' name='q' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' name='btnG' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="雅虎")
...{
document.getElementById("tdInputValue").innerHTML="<input type='text' name='p' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' name='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="搜搜")
...{
document.getElementById("tdInputValue").innerHTML="<input type='text' name='w' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="搜狗")
...{
document.getElementById("tdInputValue").innerHTML="<input type='hidden' name='insite' value='http://www.hugesoft.net/'><input type='text' name='query' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' name='sogou_submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="新闻")
...{
document.getElementById("tdInputValue").innerHTML="<input name='tn' type='hidden' value='news'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="MP3")
...{
document.getElementById("tdInputValue").innerHTML="<input name='ct' type='hidden' value='134217728'/><input name='lm' type='hidden' value='-1'/><input name='tn' type='hidden' value='baidump3'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="图片")
...{
document.getElementById("tdInputValue").innerHTML="<input name='ct' type='hidden' value='201326592'/><input name='cl' type='hidden' value='2'/><input name='lm' type='hidden' value='-1'/><input name='pv' type='hidden' value=''/><input name='z' type='hidden' value='0'/><input name='tn' type='hidden' value='baiduimage'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="视频")
...{
document.getElementById("tdInputValue").innerHTML="<input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="地图")
...{
document.getElementById("tdInputValue").innerHTML="<input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
}
< / script>
var ItemArray = new MyArray( 10 );
ItemArray[ 0 ] = " tdItem1 " ;
ItemArray[ 1 ] = " tdItem2 " ;
ItemArray[ 2 ] = " tdItem3 " ;
ItemArray[ 3 ] = " tdItem4 " ;
ItemArray[ 4 ] = " tdItemLast " ;
ItemArray[ 5 ] = " BtdItem1 " ;
ItemArray[ 6 ] = " BtdItem2 " ;
ItemArray[ 7 ] = " BtdItem3 " ;
ItemArray[ 8 ] = " BtdItem4 " ;
ItemArray[ 9 ] = " BtdItemLast " ;
var PrevSelectTd = 0 ;
var PrevSelectTdP =- 1 ;
function MyArray(len) ... {
this.length = len;
return this;
}
function OnTdSelect(param,param2)
... {
//没有新的选择
if(param==PrevSelectTd)
return;
//上次选择的非每一排的第一个
if(PrevSelectTdP!=-1)
...{
document.getElementById(ItemArray[PrevSelectTdP]).className=((PrevSelectTdP<5)?"":"B")+(((PrevSelectTdP%5)==4)?"TdLastItem":"TdItem");
PrevSelectTdP=-1;
}
if((param%5)!=0)
...{
//不是第一个
if((param-1)!=PrevSelectTd)
document.getElementById(ItemArray[PrevSelectTd]).className=((PrevSelectTd<5)?"":"B")+(((PrevSelectTd%5)==4)?"TdLastItem":"TdItem");
document.getElementById(ItemArray[param-1]).className=((param>5)?"B":"")+"TdItemSelectP";
PrevSelectTdP=param-1;
}
else
...{
document.getElementById(ItemArray[PrevSelectTd]).className=((PrevSelectTd<5)?"":"B")+(((PrevSelectTd%5)==4)?"TdLastItem":"TdItem");
}
document.getElementById(ItemArray[param]).className=((param<5)?"":"B")+(((param%5)==4)?"TdLastItemSelect":"TdItemSelect");
PrevSelectTd=param;
document.forms["form1"].action=param2;
var searchType=document.getElementById(ItemArray[param]).innerHTML;
if(searchType=="百度")
...{
document.getElementById("tdInputValue").innerHTML="<input name='tn' type='hidden' value='baidu'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="谷歌")
...{
document.getElementById("tdInputValue").innerHTML="<input type='hidden' name='ie' value='GB2312'/><input name='oe' type='hidden' value='GB2312'/><input name='hl' type='hidden' value='zh-CN'/><input type='text' name='q' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' name='btnG' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="雅虎")
...{
document.getElementById("tdInputValue").innerHTML="<input type='text' name='p' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' name='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="搜搜")
...{
document.getElementById("tdInputValue").innerHTML="<input type='text' name='w' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="搜狗")
...{
document.getElementById("tdInputValue").innerHTML="<input type='hidden' name='insite' value='http://www.hugesoft.net/'><input type='text' name='query' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' name='sogou_submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="新闻")
...{
document.getElementById("tdInputValue").innerHTML="<input name='tn' type='hidden' value='news'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="MP3")
...{
document.getElementById("tdInputValue").innerHTML="<input name='ct' type='hidden' value='134217728'/><input name='lm' type='hidden' value='-1'/><input name='tn' type='hidden' value='baidump3'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="图片")
...{
document.getElementById("tdInputValue").innerHTML="<input name='ct' type='hidden' value='201326592'/><input name='cl' type='hidden' value='2'/><input name='lm' type='hidden' value='-1'/><input name='pv' type='hidden' value=''/><input name='z' type='hidden' value='0'/><input name='tn' type='hidden' value='baiduimage'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="视频")
...{
document.getElementById("tdInputValue").innerHTML="<input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
else if(searchType=="地图")
...{
document.getElementById("tdInputValue").innerHTML="<input type='text' name='word' size='28' class='TextBoxStyle'/>";
document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
}
}
< / script>
转载请注明:炬源信息技术网(http://www.hugesoft.net)