仿soso搜索框
仿照soso搜索框，页面代码如下：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="search_box.aspx.cs" Inherits="search_box" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5 <title>xu_happy_you搜索</title>
6 <link href="css/search_box.css" rel="stylesheet" type="text/css" />
7 <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
8 <script src="js/search-box.js" type="text/javascript"></script>
9 </head>
10 <body>
11 <form id="form1" runat="server">
12 <div id="more"><a href="javascript:void(0)" id="news" class="a_link1">新闻</a> <a href="javascript:void(0)" id="product" class="a_link">产品</a> <a href="javascript:void(0)" id="datum" class="a_link">资料</a></div>
13 <div style="display:none;"><input id="type" value="news" type="hidden"/><asp:HiddenField ID="hfdVaule" Value="nokia" runat="server" /></div>
14 <div class="s_search_form">
15 <input type="text" id="txtSearch" class="search_input" />
16 <input type="button" id="btnSearch" runat="server" class="search_bt" />
17 </div>
18 </form>
19 </body>
20 </html>
样式文件如下：
1 body{margin:0 auto; padding:0px 0px 0px 0px; font-family:Arial; font-size:16px;}
2 .s_search_form, .search_input, .search_bt{background: url(../images/search_bt.jpg) no-repeat;}
3 .s_search_form{float: left;height: 33px;padding-left: 3px;background-position: -185px 0;overflow: hidden;zoom: 1;}
4 .search_input{width: 400px;height: 22px;line-height: 22px;padding: 6px 5px 5px;font-size: 16px;background-position: 0 -33px;background-repeat: repeat-x;border: none;float: left;}
5 .search_bt{height: 36px;float: left;cursor: pointer;border: none;text-indent: -9999px;margin-right: 5px;width: 95px;}
6 #more{width:506px;height:35px; line-height:35px;}
7 #more .a_link{color:#008ECA;text-decoration:underline;}
8 #more .a_link1{font-weight:bold;color:#000000;text-decoration:none;}
js文件如下：
1 /// <reference path="jquery-1.4.1-vsdoc.js" />
2 $(function() {
3 var hfdValue = $("#hfdVaule").val();
4 $("#txtSearch").attr("value", hfdValue);
5 $("#txtSearch").focus(function() { //搜索框失去焦点
6 var txt_value = $(this).val();
7 if (txt_value == hfdValue) {
8 $(this).val("");
9 }
10 });
11 $("#txtSearch").blur(function() { //搜索框得到焦点时
12 var txt_value = $(this).val();
13 if (txt_value == "") {
14 $(this).val(hfdValue);
15 }
16 });
17 $("#more a").click(function() {
18 var id = $(this).attr("id");
19 $("#more a").removeClass("a_link1").addClass("a_link");
20 $("#" + id).removeClass("a_link").addClass("a_link1");
21 $("#type").attr("value", id);
22 });
23 $("#btnSearch").click(function() {
24 var type = $("#type").val();
25 var txtsearch = $("#txtSearch").val();
26 var len = txtsearch.length;
27 if (len < 1) {
28 alert("请输入你要搜索的内容！");
29 }
30 else {
31 var url = "search_" + type + "_" + encodeURIComponent(txtsearch) + ".html";
32 top.location = url;
33 }
34 });
35 });
效果图如下：
js文件写得有点臃肿，如有更好，请给与提示，谢谢！初学Jquery，有问题请拍砖！
版权所有，转载请注明出处！
