Startseite>Tutorial zur Netzwerkprogrammierung>ASP-Tutorial

ASP imitiert Google vor, einen Stil zu erzielen, um Dropdown-Menüeffekte zu erzielen

Autor：Eve Cole Aktualisierungszeit：2025-03-07 15:00:04

In diesem Artikel wird ASP hauptsächlich eingeführt, um Google zu imitieren, um den Dropdown-Menü-Effekt zu erzielen.

Heute werde ich ASP verwenden, um das Dropdown-Menü Google Vorschläge zu imitieren und den Code direkt hochzuladen

1. Vordergrundcode:

  1. <%@Sprache = 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 {Farbe:#ff0000}
  9. .Mouseout
  10. {
  11. Schriftgröße: 12px;
  12. Hintergrund:#708090;
  13. Farbe: #fffafa;
  14. }
  16. .Mouseover
  17. {
  18. Schriftgröße: 12px;
  19. Hintergrund: #fffafa;
  20. Farbe:#000000;
  21. }
  22. ->
  23. </style>
  24. <scriptType = text/javaScriptLanguage = javaScript>
  25. varxMlhttp;
  26. varcompompletediv;
  27. Variinputfield;
  28. varnametable;
  29. varnametableBody;
  30. varflag = false;
  32. functionCreeRexMlhttprequest () {
  33. if (window.activeXObject) {
  34. xmlhttp = newActActXObject (microsoft.xmlhttp);
  35. }
  36. elseif (window.xmlhttprequest) {
  37. xmlhttp = newxMlHttprequest ();
  38. }
  39. }
  41. Funktionsetflag () {
  42. Flag = wahr;
  43. }
  45. functionDisSelect ()
  46. {
  47. if (flag == false)
  48. document.getElementById (popup) .style.display = none;
  49. }
  51. functionInitvars () {
  52. inputfield = document.getElementById (frmchangshang);
  53. nametable = document.getElementById (name_table);
  54. ferastiv = 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 = such.asp? names =+inputfield.Value;
  65. xmlhttp.open (get, url, true);
  66. xmlhttp.onReadyStatechange = callback;
  67. xmlhttp.send (null);
  68. }
  69. anders
  70. {
  71. Clearnames ();
  72. }
  73. }
  75. functionCallback () {
  76. if (xmlhttp.readystate == 4) {
  77. if (xmlhttp.status == 200)
  78. {
  79. versuchen
  80. {
  81. varname = xmlhttp.responsexml.getElementsByTagName (Name)
  83. [0] .Firstchild.data;
  84. }
  85. fangen (e)
  86. {
  87. document.getElementById (popup) .style.display = none;
  88. Clearnames ();
  89. }
  90. setNames (xmlhttp.Responsexml.getElementsByTagName (Inhalt));
  91. }
  92. elseif (xmlhttp.status == 204)
  93. {
  94. Clearnames ();
  95. }
  96. }
  97. }
  99. FunktionsetNames (the_names) {
  100. Clearnames ();
  101. varSize = the_names.length;
  102. setOffsets ();
  103. Varrow, Zelle, Spans;
  104. für (vari = 0; i <size; i ++) {
  105. //varnextnode=the_names · i]] .Firstchild.data;
  106. vare = the_names [i];
  107. // Holen Sie sich den Inhalt des untergeordneten Knotens und laden Sie ihn in ein Array neu.
  108. varnextNode = e.getElementsByTagName (Name) [0] .Firstchild.data;
  109. // TR, TD, Span -Elemente erstellen
  110. row = document.createelement (tr);
  111. cell = document.createelement (TD);
  112. //spans=document.createelement(span);
  113. // Zelleigenschaften festlegen
  114. cell.onmouseout = function () {this.className = 'mouseover'; Flag = false;};
  115. cell.onmouseover = function () {this.className = 'mausout'; Flag = true;};
  116. Cell.SetatTribute (BGColor,#fffafa);
  117. Cell.Setattribute (Grenze, 0);
  118. //cell.setattribute (Onmouseover, setflag ());
  119. cell.onclick = function () {populateName (this);};
  120. // NextNode zu TD hinzufügen
  121. vartxtName = document.CreateTextNode (NextNode);
  122. Cell.AppendChild (txtName);
  123. // Versteckte Daten in das Element laden
  124. Row.AppendChild (Zelle);
  125. NAMETABLEBODY.APPENDCHILD (ROW);
  126. }
  127. }
  129. FunktionsetOffsets () {
  130. varend = inputfield.Offsetwidth;
  131. varleft = calculateOffsetLeft (InputField);
  132. vartop = calculateOffsettop (Inputfield)+InputField.Offseteight;
  134. ferastiv.style.border = Black1pxSolid;
  135. ferastiv.style.left = links+px;
  136. ferastiv.style.top = top+px;
  137. nametable.style.width = 400px;
  138. }
  140. funktionscalculateOffsetLeft (field) {
  141. returncalculateOffset (Feld, OffsetLeft);
  142. }
  144. funktionscalculateOffsettop (field) {
  145. returncalculateOffset (field, offsettop);
  146. }
  148. funktionscalculateOffset (field, attr) {
  149. varoffset = 0;
  150. while (field) {
  151. offset+= field [attr];
  152. field = field.offsetParent;
  153. }
  154. returnOffset;
  155. }
  157. functionPopulateName (cell) {
  158. // Daten auf Webseite, Cell ----> TD-Objekt füllen
  159. inputfield.Value = cell.Firstchild.nodeDealue;
  160. Clearnames ();
  161. }
  162. // das Listenarray löschen
  163. FunktionClearNames () {
  164. varind = nametableBody.childnodes.length;
  165. für (vari = ind-1; i> = 0; i-) {
  166. nametableBody.removechild (nametableBody.childnodes [i]);
  167. }
  168. ferastiv.style.border = none;
  169. }
  170. </script>
  171. <kopf>
  172. <metahttp-äquiv = content-typecontent = text/html; charSet = gb2312/>
  173. <title> untitledDocument </title>
  174. </head>
  176. <body>
  177. <inputName = frmchangshangClass = InputTextID = frmchangshangStyle = Breite: 250px;
  179. onblur = disselect (); OnKeyUp = findNames (); size = 50maxLength = 100>
  180. <spanclass = style1> tipp: Geben Sie Schlüsselwörter ein und das Programm stimmt automatisch aus der Bibliothek überein
  182. Wenn der Datensatz nicht vorhanden ist, füllen Sie es selbst aus
  183. </span>
  184. <divStyle = Position: absolut; ober: 0; links: 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. Backend Search.speak Asynchrone Query -Daten Seite

Ändern Sie einfach die SQL -Anweisung und die Felder, die in das entsprechende Format Ihrer eigenen Datenbank angezeigt werden sollen.

  1. <!-#includevirtual = conn.asp->
  2. <%
  3. keyword = request.queryString (Namen)
  4. SQL = SELECTLGID, LGMCFROMGWHERELGMCLIKE '%& KEYWORD &%' OrderBylgiddesc
  5. setrs = server.createObject (adodb.recordset)
  6. Rs.opensql, Conn, 1,1
  7. Antwort.ContentType = text/xml
  8. response.write <xmlversion = 1.0encoding = gb2312?>
  9. response.write <Reaktion>
  10. dowhilenotrs.eof
  11. response.write <Content>
  12. Antwort.Write <Name> & RS (LGMC) & </name>
  13. 'response.write <UnterID> & rs (userID) & </userID>
  14. 'response.write <Startime> & rs (startime) & </startime>
  15. 'response.write <endtime> & rs (endzeit) & </endzeit>
  16. response.write </content>
  17. Rs.Movenext
  18. Schleife
  19. response.write </response>
  20. rs.close
  21. setrs = nichts
  22. %>

Das obige ist der Code für ASP, um den Google-Vorschlag für den Dropdown-Menü-Effekt zu imitieren.

Ähnliche Artikel