2010-05-03 77 views
1

我正在嘗試做一個搜索欄,眼下代碼如下:製作一個流暢的視覺流暢搜索欄,ASP.NET C#

 <asp:DropDownList ID="DropDownList1" runat="server" Height="25px"> 
      <asp:ListItem>Database</asp:ListItem> 
      <asp:ListItem>Engine</asp:ListItem> 
      <asp:ListItem>Pool</asp:ListItem> 
     </asp:DropDownList> 
     <asp:Button ID="Button1" runat="server" Text="Button" Height="25px" /> 
     <asp:TextBox ID="TextBox1" runat="server" Height="25px"></asp:TextBox> 
     <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> 

現在它看起來像廢話和犯規流量可言,我不知道我怎麼會去做出更好的視覺尋找搜索欄與所有需要的精密組件。謝謝。

例如:digg.com在那裏有圖片搜索欄。

編輯:基本上,我想這個圖像代碼:http://o.imm.io/qlQ.png

+0

護理定義您通過「流動」打算什麼?視覺?可用性?什麼? – Aren 2010-05-03 19:54:40

+0

編輯的問題,但我視覺。 – 2010-05-03 20:02:16

回答

1

我學到的最大教訓是,如果你有一個小的空間量和用戶有一些選項可供選擇(和理解)唐不使用標準的HTML控件。設計一個反對使用惱人的HTML元素的真正解決方案。

構建搜索區域的一個主要問題是下拉列表不是非常適合樣式。嘗試建立他們可以選擇的選項。您只有三個選項可以從單選按鈕列表中選擇,因爲用戶會看到所有選項。然後,您可以將過濾器應用到列表中,並使其成爲基於圖像的切換選項列表。

看到這裏的第一個例子中的其他選項(接口元素點播): http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/

alt text http://media.smashingmagazine.com/cdn_smash/images/web-applications-interface-techniques/kontain_search.png