Beranda>Tutorial Pemrograman Jaringan>tutorial ASP

ASP Meniru Google menyarankan gaya untuk mencapai efek menu drop-down

Penulis：Eve Cole Waktu Pembaruan：2025-03-07 15:00:04

Artikel ini terutama memperkenalkan ASP untuk meniru gaya Google Sarankan untuk mencapai efek menu drop-down.

Hari ini, saya akan menggunakan ASP untuk meniru menu drop-down gaya Google Saran dan langsung mengunggah kode

1. Kode latar depan:

  1. <%@Bahasa = 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. font-size: 12px;
  12. Latar belakang:#708090;
  13. Warna: #FFFAFA;
  14. }
  16. .Mouseover
  17. {
  18. font-size: 12px;
  19. Latar belakang: #FFFAFA;
  20. Warna:#000000;
  21. }
  22. ->
  23. </tyle>
  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. bendera = true;
  43. }
  45. functionDisselect ()
  46. {
  47. if (flag == false)
  48. document.geteLementById (popup) .style.display = tidak ada;
  49. }
  51. functionInitvars () {
  52. inputfield = document.getElementById (frmchangshang);
  53. nametable = document.getElementById (name_table);
  54. finishiv = 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. kalau tidak
  70. {
  71. clearnames ();
  72. }
  73. }
  75. functionCallback () {
  76. if (xmlhttp.readystate == 4) {
  77. if (xmlhttp.status == 200)
  78. {
  79. mencoba
  80. {
  81. varname = xmlhttp.responsexml.geteLementsbyTagname (nama)
  83. [0] .firstchild.data;
  84. }
  85. Tangkap (E)
  86. {
  87. document.geteLementById (popup) .style.display = tidak ada;
  88. clearnames ();
  89. }
  90. setNames (xmlhttp.responsexml.geteLementsbyTagname (konten));
  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, sel, rentang;
  104. untuk (vari = 0; i <size; i ++) {
  105. //varnextNode=the_names media Mirstchild.data;
  106. vare = the_names [i];
  107. // Dapatkan konten node anak dan muat ulang ke dalam array
  108. varnextNode = e.geteLementsByTagname (name) [0] .firstchild.data;
  109. // Buat tr, td, elemen span
  110. baris = document.createElement (tr);
  111. cell = document.createElement (TD);
  112. //spans=document.createelement(span);
  113. // Atur sifat sel
  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. // Tambahkan NextNode ke TD
  121. vartxtName = document.createTextNode (nextNode);
  122. Cell.AppendChild (TXTNAME);
  123. // Muat data tersembunyi untuk span elemen
  124. Row.AppendChild (sel);
  125. nametableBody.AppendChild (ROW);
  126. }
  127. }
  129. functionsetoffsets () {
  130. varend = inputfield.offsetWidth;
  131. varleft = CalculateOffsetLeft (InputField);
  132. vartop = calculateOffsettop (inputField)+inputfield.offsetHeight;
  134. flequv.style.border = black1pxsolid;
  135. flequv.style.left = kiri+px;
  136. flequv.style.top = Top+px;
  137. nametable.style.width = 400px;
  138. }
  140. functionCalculateOffsetLeft (bidang) {
  141. returnCalculateOffset (bidang, offsetleft);
  142. }
  144. functionCalculateOffsettop (bidang) {
  145. returnCalculateOffset (bidang, offsettop);
  146. }
  148. functionCalculateOffset (bidang, attr) {
  149. varoffset = 0;
  150. while (field) {
  151. offset+= bidang [attr];
  152. field = field.offsetParent;
  153. }
  154. kembali;
  155. }
  157. functionPopulateName (sel) {
  158. // Isi data ke halaman web, sel ----> objek TD
  159. inputfield.value = cell.firstchild.nodevalue;
  160. clearnames ();
  161. }
  162. // Bersihkan array daftar
  163. functionCleArnames () {
  164. varind = nametablebody.childnodes.length;
  165. untuk (vari = ind-1; i> = 0; i-) {
  166. nametablebody.removechild (nametablebody.childnodes [i]);
  167. }
  168. flequv.style.border = tidak ada;
  169. }
  170. </script>
  171. <head>
  172. <METAHTTP-EQUIV = Content-TypeContent = Teks/html; charset = GB2312/>
  173. <title> untitledDocument </iteme>
  174. </head>
  176. <body>
  177. <inputName = frmchangshangclass = inputTextId = frmchangshangstyle = lebar: 250px;
  179. OnBlur = Displect (); onceyup = findNames (); size = 50MaxLength = 100>
  180. <spanclass = style1> tip: masukkan kata kunci dan program akan secara otomatis cocok dengan Anda dari perpustakaan
  182. Jika catatan tidak ada, isi sendiri
  183. </span>
  184. <Divstyle = Posisi: Absolute; atas: 0; kiri: 0; id = popup>
  185. <tableId = name_tableBgColor =#fffafaBorder = 0cellspacing = 0
  187. CellPadding = 0>
  188. <tBodyId = name_table_body> </tbody>
  189. </boable>
  190. </div>
  191. </body>
  192. </html>

2. Backend Search.asp Halaman Data Kueri Asynchronous

Cukup ubah pernyataan SQL dan bidang yang akan ditampilkan ke format yang sesuai dari database Anda sendiri.

  1. <!-#includeVirtual = conn.asp->
  2. <%
  3. kata kunci = request.querystring (nama)
  4. sql = selectlgid, lgmcfromgwherelgmclike '%& kata kunci &%' orderbylgiddesc
  5. setRs = server.CreateObject (adodb.recordset)
  6. rs.opensql, Conn, 1,1
  7. Response.contentType = teks/xml
  8. response.write <? xmlversion = 1.0Encoding = GB2312?>
  9. Response.write <Respess>
  10. dowhilenotrs.eof
  11. Response.write <den konten>
  12. Response.write <name> & rs (lgmc) & </name>
  13. 'Response.Write <UserId> & rs (userId) & </userid>
  14. 'Response.Write <Tartime> & RS (Startime) & </Tegurime>
  15. 'Response.Write <endtime> & RS (EndTime) & </dtime>
  16. response.write </dontent>
  17. rs.movenext
  18. lingkaran
  19. Response.write </spesponse>
  20. rs.close
  21. setRs = tidak ada
  22. %>

Di atas adalah kode untuk ASP untuk meniru gaya Google Saran untuk mencapai efek menu drop-down.

Artikel Terkait