ASPはGoogleを模倣して、ドロップダウンメニュー効果を達成するためにスタイルを提案します

この記事では、主にGoogleを模倣するスタイルを紹介して、それを参照することができます

今日、私はASPを使用してGoogleの提案スタイルドロップダウンメニューを模倣し、コードを直接アップロードします

1。前景コード：

1. <％@言語= javascriptcodepage = 936％>
2. <！doctypehtmlpublic - // w3c // dtdxhtml1.0transitional // en
4. http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
5. <htmlxmlns = http：//www.w3.org/1999/xhtml>
6. <styletype = text/css>
7. <！ -
8. .style1 {color：＃ff0000}
9. .Mouseout
10. {
11. フォントサイズ：12px;
12. 背景：＃708090;
13. 色：#fffafa;
14. }
16. .MouseOver
17. {
18. フォントサイズ：12px;
19. 背景：#fffafa;
20. 色：＃000000;
21. }
22. - >
23. </style>
24. <scriptType = text/javascriptlanguage = javascript>
25. varxmlhttp;
26. varcompletediv;
27. Variinputfield;
28. varnametable;
29. varnametablebody;
30. varflag = false;
32. functioncreatexmlhttprequest（）{
33. if（window.activexobject）{
34. xmlhttp = newactivexobject（microsoft.xmlhttp）;
35. }
36. elseif（window.xmlhttprequest）{
37. xmlhttp = newxmlhttprequest（）;
38. }
39. }
41. functionsetflag（）{
42. flag = true;
43. }
45. functiondisselect（）
46. {
47. if（flag == false）
48. document.getElementById（popup）.style.display = none;
49. }
51. functionitvars（）{
52. inputfield = document.getElementById（frmchangshang）;
53. nameTable = document.getElementById（name_table）;
54. Completeiv = document.getElementById（Popup）;
55. nameTableBody = document.getElementById（name_table_body）;
56. document.getElementById（popup）.style.display = block;
57. }
59. functionfindnames（）{
60. initvars（）;
61. if（inputfield.value.length> 0）
62. {
63. createxmlhttprequest（）;
64. varurl = search.asp？names =+inputfield.value;
65. xmlhttp.open（get、url、true）;
66. xmlhttp.onreadystatechange = callback;
67. xmlhttp.send（null）;
68. }
69. それ以外
70. {
71. ClearNames（）;
72. }
73. }
75. functioncallback（）{
76. if（xmlhttp.readystate == 4）{
77. if（xmlhttp.status == 200）
78. {
79. 試す
80. {
81. varname = xmlhttp.responsexml.getelementsbytagname（name）
83. [0] .firstchild.data;
84. }
85. キャッチ（e）
86. {
87. document.getElementById（popup）.style.display = none;
88. ClearNames（）;
89. }
90. setNames（xmlhttp.responsexml.getElementsByTagname（content））;
91. }
92. elseif（xmlhttp.status == 204）
93. {
94. ClearNames（）;
95. }
96. }
97. }
99. functionsetnames（the_names）{
100. ClearNames（）;
101. varsize = the_names.length;
102. setOffsets（）;
103. Varrow、セル、スパン;
104. for（vari = 0; i <size; i ++）{
105. //varnextnode = the_names [i] .firstchild.data;
106. vare = the_names [i];
107. //チャイルドノードのコンテンツを取得し、配列にリロードします
108. varnextNode = e.getElementsByTagname（name）[0] .firstchild.data;
109. // TR、TD、スパン要素を作成します
110. row = document.createelement（tr）;
111. cell = document.createelement（TD）;
112. //spans = document.createelement(span）;
113. //セルプロパティを設定します
114. cell.onmouseout = function（）{this.classname = 'mouseover'; flag = false;};
115. cell.onmouseover = function（）{this.classname = 'mouseout'; flag = true;};
116. cell.setattribute（bgcolor、＃fffafa）;
117. cell.setattribute（border、0）;
118. //cell.setattribute（onMouseover、setFlag（））;
119. cell.onclick = function（）{populatename（this）;};
120. // NextNodeをTDに追加します
121. vartxtname = document.createTextNode（nextNode）;
122. Cell.AppendChild（txtname）;
123. //非表示データをスパン要素にロードします
124. row.AppendChild（Cell）;
125. NameTableBody.AppendChild（row）;
126. }
127. }
129. functionsetoffsets（）{
130. varend = inputfield.offsetwidth;
131. varleft = calculateOffsetLeft（inputfield）;
132. vartop = calculateOffsettop（inputfield）+inputfield.offseTheight;
134. Completeiv.style.border = black1pxsolid;
135. Completeiv.style.left = left+px;
136. Completeiv.style.top = top+px;
137. nameTable.style.width = 400px;
138. }
140. functionCalculateOffsetLeft（field）{
141. ReturnCalculateOffset（field、offsetLeft）;
142. }
144. functionCalculateOffSettop（field）{
145. ReturnCalculateOffset（フィールド、オフセット）;
146. }
148. functionCalculateOffset（field、attr）{
149. varoffset = 0;
150. while（field）{
151. offset+= field [attr];
152. field = field.offsetparent;
153. }
154. リターンオフセット;
155. }
157. functionpopulatename（cell）{
158. //データをWebページ、Cell ---> TDオブジェクトに入力します
159. inputfield.value = cell.firstchild.nodevalue;
160. ClearNames（）;
161. }
162. //リスト配列をクリアします
163. functionclearnames（）{
164. varind = nametablebody.childnodes.length;
165. for（vari = ind-1; i> = 0; i-）{
166. nameTableBody.RemoveChild（nametablebody.childnodes [i]）;
167. }
168. Completeiv.style.border = none;
169. }
170. </script>
171. <head>
172. <metahttp-equiv = content-typecontent = text/html; charset = gb2312/>
173. <title> untitleddocument </title>
174. </head>
176. <body>
177. <inputname = frmchangshangclass = inputTextId = frmchangshangstyle = width：250px;
179. onblur = disselect（）; onkeyup = findnames（）; size = 50maxlength = 100>
180. <spanclass = style1>ヒント：キーワードを入力すると、プログラムはライブラリから自動的に一致します
182. レコードが存在しない場合は、自分で記入してください
183. </span>
184. <divstyle = position：absolute; top：0; left：0; id = popup>
185. <tableId = name_tablebgcolor =＃fffafaborder = 0cellspacing = 0
187. CellPadding = 0>
188. <tbodyid = name_table_body> </tbody>
189. </table>
190. </div>
191. </body>
192. </html>

2。バックエンド検索

SQLステートメントとフィールドを変更するフィールドを、独自のデータベースの対応する形式に変更するだけです。

1. <！ - ＃includevirtual = conn.asp->
2. <％
3. キーワード= request.querystring（names）
4. sql = selectlgid、lgmcfromwherelgmclike '％＆keyword＆％' orderbylgiddesc
5. setrs = server.createObject（adodb.Recordset）
6. rs.opensql、conn、1,1
7. Response.ContentType = text/xml
8. Response.Write <？xmlversion = 1.0Encoding = gb2312？>
9. Response.Write <Response>
10. dowhileenotrs.eof
11. respons.write <content>
12. respons.write <name>＆rs（lgmc）＆</name>
13. 'Response.Write <UserID>＆rs（userId）＆</userId>
14. 'Response.Write <Startime>＆rs（startime）＆</startime>
15. 'Response.Write <EndTime>＆rs（EndTime）＆</EndTime>
16. Response.Write </content>
17. rs.movenext
18. ループ
19. Response.Write </response>
20. rs.close
21. setrs =何もない
22. ％>

上記は、ドロップダウンメニュー効果を実現するために、Googleの提案スタイルを模倣するためのコードです。