Inicio>Tutorial de programación de red>Tutorial ASP

ASP imita el estilo de Google Sugerir para lograr el efecto de menú desplegable

Autor：Eve Cole Fecha de actualización：2025-03-07 15:00:04

Este artículo presenta principalmente ASP para imitar el estilo de Google Sugerir para lograr el efecto de menú desplegable que lo necesitan puede referirse a él.

Hoy usaré ASP para imitar el menú desplegable de estilo de Google Sugerir y cargar directamente el código

1. Código de primer plano:

  1. <%@Idioma = javascriptCodePage = 936%>
  2. <! DoctypehtmlPublic-// w3c // dtdxhtml1.0transitional // es
  4. http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd>
  5. <htmlxmlns = http: //www.w3.org/1999/xhtml>
  6. <styletype = text/css>
  7. <!-
  8. .style1 {color:#FF0000}
  9. .
  10. {
  11. tamaño de fuente: 12px;
  12. Antecedentes:#708090;
  13. Color: #fffafa;
  14. }
  16. .
  17. {
  18. tamaño de fuente: 12px;
  19. Antecedentes: #fffafa;
  20. Color:#000000;
  21. }
  22. ->
  23. </style>
  24. <scriptType = text/javaScriptLanguage = javaScript>
  25. varxmlhttp;
  26. varCompletediv;
  27. variinputfield;
  28. varnametable;
  29. Varnametable;
  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. bandera = verdadero;
  43. }
  45. functionDisselect ()
  46. {
  47. if (flag == falso)
  48. document.getElementById (emergente) .style.display = none;
  49. }
  51. functionInitVars () {
  52. inputfield = document.getElementById (frmchangshang);
  53. nametable = document.getElementById (name_table);
  54. completariv = document.getElementById (emergente);
  55. nametableBody = document.getElementById (name_table_body);
  56. document.getElementById (emergente) .style.display = block;
  57. }
  59. functionFindNames () {
  60. initvars ();
  61. if (inputfield.value.length> 0)
  62. {
  63. createExmlhttprequest ();
  64. varurl = search.asp? Names =+inputfield.Value;
  65. xmlhttp.open (get, url, verdadero);
  66. xmlhttp.onreadyStateChange = llamado;
  67. xmlhttp.send (nulo);
  68. }
  69. demás
  70. {
  71. ClearNames ();
  72. }
  73. }
  75. functionCallback () {
  76. if (xmlhttp.readyState == 4) {
  77. if (xmlhttp.status == 200)
  78. {
  79. intentar
  80. {
  81. varname = xmlhttp.responsexml.getElementsBytagName (nombre)
  83. [0] .firstchild.data;
  84. }
  85. captura (e)
  86. {
  87. document.getElementById (emergente) .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, célula, tramos;
  104. para (vari = 0; i <size; i ++) {
  105. //varnextnode=the_names[ifont>.firstchild.data;
  106. VARE = ​​the_names [i];
  107. // Obtener el contenido del nodo infantil y volver a cargarlo en una matriz
  108. varNextNode = e.getElementsByTagName (nombre) [0] .firstchild.data;
  109. // Crear elementos TR, TD, SPAN
  110. fila = document.createElement (tr);
  111. celular = documento.createElement (TD);
  112. //spans=Document.CreateElement(Span);
  113. // Establecer propiedades de la celda
  114. celular.onmouseOut = function () {this.classname = 'mouseover'; flag = false;};
  115. celular.onmouseover = function () {this.classname = 'mouseout'; flag = true;};
  116. Cell.SetAttribute (bgcolor,#fffafa);
  117. Cell.SetAttribute (borde, 0);
  118. //cell.setAttribute (OnMouseOver, setFlag ());
  119. celular.OnClick = function () {populateName (this);};
  120. // Agregar NextNode a TD
  121. vartxtName = document.createTextNode (nextNode);
  122. Cell.AppendChild (txtname);
  123. // Cargar datos ocultos para abarcar el elemento
  124. fila.appendChild (celda);
  125. NametableBody.AppendChild (fila);
  126. }
  127. }
  129. functionsetOffSets () {
  130. varend = inputfield.OffSetWidth;
  131. varleft = calculateFoffSetleft (InputField);
  132. vartop = calculalOffSettop (inputfield)+inputfield.offsetheight;
  134. completadoiv.style.border = black1pxsolid;
  135. completadoiv.style.left = izquierda+px;
  136. completadoiv.style.top = top+px;
  137. nametable.style.width = 400px;
  138. }
  140. functionCalCulateOffSetleft (campo) {
  141. returnCalCalEffSet (campo, offsetLeft);
  142. }
  144. FunctionCalCulateOffSettop (Field) {
  145. returnCalCalAffSet (campo, offsettop);
  146. }
  148. functionCalCulateOffSet (campo, attr) {
  149. varoffset = 0;
  150. while (campo) {
  151. offset+= campo [attr];
  152. campo = field.OffSetParent;
  153. }
  154. Returnfoffset;
  155. }
  157. functionPopulateName (celular) {
  158. // Llenar datos a la página web, celda ----> objeto TD
  159. inputfield.value = cell.firstchild.nodeValue;
  160. ClearNames ();
  161. }
  162. // Borrar la matriz de la lista
  163. functClearNames () {
  164. varind = nametableBody.childNodes.length;
  165. for (vari = ind-1; i> = 0; i-) {
  166. nametable.removechild (nametableBody.childNodes [i]);
  167. }
  168. completadoiv.style.border = none;
  169. }
  170. </script>
  171. <Evista>
  172. <metahttp-oquiv = content-typeContent = text/html; charset = gb2312/>
  173. <title> UntitledDocument </title>
  174. </ablo)
  176. <Body>
  177. <inputName = frmchangshangclass = inputTextId = frmchangShangStyle = width: 250px;
  179. onblur = disselect (); onKeyUp = findNames (); size = 50MaxLength = 100>
  180. <spanclass = style1> consejo: ingrese palabras clave y el programa lo coincidirá automáticamente desde la biblioteca
  182. Si el registro no está presente, llénelo usted mismo
  183. </span>
  184. <DivStyle = Position: Absolute; Top: 0; Izquierda: 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.asp Página de datos de consultas asíncronas

Simplemente cambie la instrucción SQL y los campos que se mostrarán al formato correspondiente de su propia base de datos.

  1. <!-#includeVirtual = conn.asp->
  2. <%
  3. Palabra clave = request.QueryString (nombres)
  4. sql = selectlgid, lgmcFromgwherelgmclike '%& Keyword &%' OrderBylGidDesc
  5. setrs = server.createObject (ADODB.Recordset)
  6. Rs.opensql, Conn, 1,1
  7. Respuesta.contentType = text/xml
  8. Response.Write <? XmlVersion = 1.0Encoding = GB2312?>
  9. Respuesta.Write <Spuesta>
  10. dowhilenotrs.eof
  11. Response.Write <Centent>
  12. Response.Write <Name> & RS (LGMC) y </nombre>
  13. 'Response.Write <SerEDId> & RS (UserId) & </userId>
  14. 'Response.Write <StarTime> & RS (Startime) & </startime>
  15. 'Response.Write <Denttime> & rs (endtime) & </dtime>
  16. Response.write </tent content>
  17. Rs.Movenext
  18. bucle
  19. Response.Write </spuesta>
  20. rs.
  21. SETRS = nada
  22. %>

Lo anterior es el código para ASP para imitar el estilo de Google Sugerir para lograr el efecto de menú desplegable.

Artículos relacionados