双行舌签导航条实现集成搜索

 

    舌签导航条很多见，比如新浪网（用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>

    转载请注明：炬源信息技术网（http://www.hugesoft.net）