仿Firefox4 集成搜索框

为了学习css和js 仿的一个FF4的搜索框。

[img]http://dl.iteye.com/upload/attachment/470127/37f8c49f-2564-3ea6-9158-567df85a97b8.png[/img]

<script type="text/javascript">
	$(document).ready(function (){
		$("ul").find("a").click(function (){
			$("ul").find("a").removeClass("choose");
			$(this).addClass("choose");
			$("#search").attr("name",$(this).attr("id"));
			$("#img").attr("src",$(this).attr("name")+'.png');
		});
		$("#doSubmit").click(function (){
			var value = $("#search").val();
			var name = $("#search").attr("name");
			var addr = encodeURI('http://www.google.com/search?q='+value+'&newwindow=1');
			switch(name){
			case "google":
			addr=encodeURI('http://www.google.com/search?q='+value+'&newwindow=1');
			break;
			case "baidu_mp3":
			addr=encodeURI('http://mp3.baidu.com/m?f=ms&rf=idx&tn=baidump3&lf=&rn=&word='+value+'&lm=-1#1')
			break;
			case "google_pic":
			addr=encodeURI('http://www.google.com.hk/images?source=hp&newwindow=1&biw=1280&bih=856&gbv=2&aq=f&aqi=&oq=&q='+value+'&tbm=isch')
			}
			window.location = addr;
		});
	});
	</script>

	<style type="text/css">
	* {
	 margin:0;
	 padding:0;
	}
	img,ul,li,a,p{border:0; list-style-type:none;}

	.main {
		margin-left: auto;
  		margin-right: auto;
		width:560px;
		height:150px;
		border:1px solid #C4C2C2;
		margin-top:150px;
	}
	.title {
		position:relative;
		width:560px;
		height:30px;
	}
	.title ul li a{
		float:left;
		width:69px;
		height:25px;
		line-height:30px;
		text-align:center;
		font-weight:900;
		font-size:15px;
		color:#466BAE;
		background:url("background.png");
		text-decoration: none;
		border-left:1px solid #C4C2C2;
		border-bottom:#c4c2c2 1px solid;
	}

	.title .choose{
		color:#fff;
		height:30px;
		border:0;
		background:url("li_now.png");
	}
	.content {
		position:relative;
		width:552px;
		height:90px;
		padding-top:35px;
	}
	.search{
		position:relative;
		height:50px;
		margin-left:15px;
	}

	.search img {
		float:left;
		margin-right:10px;
	}
	.search input {
		float:left;
	}
	.search .text {
		width:350px;
		height:27px;
		line-height:27px;
	}
	.search .button {
		width:80px;
		height:30px;
	}
	.clear{
		clear:both;
	}
	</style>