Página Inicial>Tutorial de programação de redes>Tutorial ASP

Asp imita o google sugere estilo para alcançar o efeito do menu suspenso

Autor：Eve Cole Data da Última Atualização：2025-03-07 15:00:04

Este artigo apresenta principalmente o ASP para imitar o Google sugerir o estilo para obter o efeito do menu suspenso.

Hoje, usarei o ASP para imitar o menu suspenso do Google sugerir e carregar diretamente o código

1. Código de primeiro plano:

  1. <%@Idioma = javascriptCodePage = 936%>
  2. <!
  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. tamanho de fonte: 12px;
  12. Antecedentes:#708090;
  13. Cor: #fffafa;
  14. }
  16. .MouseOver
  17. {
  18. tamanho de fonte: 12px;
  19. Antecedentes: #fffafa;
  20. Cor:#000000;
  21. }
  22. ->
  23. </style>
  24. <scripttype = text/javascriptLanguage = javascript>
  25. varxmlhttp;
  26. varCompletediv;
  27. VariinputField;
  28. varnametable;
  29. Varnametable corpo;
  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. bandeira = true;
  43. }
  45. functionDisselect ()
  46. {
  47. if (sinalizador == false)
  48. document.getElementById (pop -up) .style.display = nenhum;
  49. }
  51. functionInitvars () {
  52. inputfield = document.getElementById (frmchangshang);
  53. nametable = document.getElementById (name_table);
  54. completEdiv = document.getElementById (pop -up);
  55. nametableBody = document.getElementById (name_table_body);
  56. document.getElementById (pop -up) .style.display = block;
  57. }
  59. functionFindNames () {
  60. initvars ();
  61. if (inputfield.value.length> 0)
  62. {
  63. createxmlHttPrequest ();
  64. varurl = search.asp? nomes =+inputfield.value;
  65. xmlhttp.open (get, url, true);
  66. xmlhttp.onreadyStatechange = retorno de chamada;
  67. xmlhttp.send (nulo);
  68. }
  69. outro
  70. {
  71. clearNames ();
  72. }
  73. }
  75. functionCallback () {
  76. if (xmlhttp.readyState == 4) {
  77. if (xmlhttp.status == 200)
  78. {
  79. tentar
  80. {
  81. Varname = xmlHttp.Responsexml.getElementsByTagName (nome)
  83. [0] .FirstChild.data;
  84. }
  85. captura (e)
  86. {
  87. document.getElementById (pop -up) .style.display = nenhum;
  88. clearNames ();
  89. }
  90. SetNames (xmlHttp.Responsexml.getElementsByTagName (Content));
  91. }
  92. elseif (xmlhttp.status == 204)
  93. {
  94. clearNames ();
  95. }
  96. }
  97. }
  99. funçõeseTNames (the_names) {
  100. clearNames ();
  101. varsize = the_names.length;
  102. setOffSets ();
  103. Varrow, célula, vãos;
  104. for (vari = 0; i <tamanho; i ++) {
  105. //varNextNode=The_NamesObily.firstchild.data;
  106. vare = the_names [i];
  107. // Obtenha o conteúdo da criança e recarregue -o em uma matriz
  108. varnextNode = e.getElementsByTagName (nome) [0] .FirstChild.data;
  109. // Crie TR, TD, Span Elements
  110. linha = document.createElement (tr);
  111. célula = document.createElement (td);
  112. //spans=document.createElement(span);
  113. // Defina propriedades de células
  114. Cell.onMouseOut = function () {this.className = 'mouseOver'; flag = false;};
  115. Cell.onMouseOver = function () {this.className = 'mouseout'; flag = true;};
  116. Cell.setAtattribute (BGColor,#ffffafa);
  117. Cell.setAtAttribute (borda, 0);
  118. //cell.setattribute (onMouseOver, setFlag ());
  119. Cell.OnClick = function () {Populatename (this);};
  120. // Adicione NextNode ao TD
  121. varartxtName = document.createTextNode (nextNode);
  122. Cell.AppendChild (txtName);
  123. // carrega dados ocultos para abranger elemento
  124. row.appendChild (célula);
  125. nametablebody.appendChild (linha);
  126. }
  127. }
  129. FunctionsToffSets () {
  130. varend = inputfield.offsetWidth;
  131. varleft = calcularoffsetLeft (InputField);
  132. Vartop = CalcularOffSetTop (InputField)+inputfield.offsetHeight;
  134. completEdiv.style.border = Black1pxSolid;
  135. completEdiv.style.left = esquerda+px;
  136. completEdiv.style.top = topo+px;
  137. nametable.style.width = 400px;
  138. }
  140. functionCalCulateOffsetLeft (campo) {
  141. returnCalCulateOffset (campo, offsetleft);
  142. }
  144. functionCalCulateOffSettop (campo) {
  145. returnCalCulateOffset (Campo, OffsetTop);
  146. }
  148. functionCalCulateOffset (campo, att) {
  149. varoffset = 0;
  150. while (campo) {
  151. deslocamento+= campo [att];
  152. field = field.offsetParent;
  153. }
  154. returnOffset;
  155. }
  157. functionpopulatename (célula) {
  158. // preenche os dados na página da web, célula ----> objeto TD
  159. inputfield.value = Cell.firstchild.nodEvalue;
  160. clearNames ();
  161. }
  162. // Limpe a matriz da lista
  163. functionClearNames () {
  164. varind = nametablebody.childnodes.length;
  165. for (vari = ind-1; i> = 0; i-) {
  166. nametableBody.RemoveChild (nametable corpos.Childnodes [i]);
  167. }
  168. completEdiv.style.border = nenhum;
  169. }
  170. </script>
  171. <head>
  172. <metahttp-equiv = content-typeContent = text/html; charset = gb2312/>
  173. <title> UntitledDocument </ititle>
  174. </head>
  176. <Body>
  177. <inputName = frmchangshangClass = inputTextId = frmchangshangStyle = width: 250px;
  179. onblur = Disselect (); OnKeyUp = findNames (); tamanho = 50MaxLength = 100>
  180. <Spanclass = Style1> Dica: digite palavras -chave e o programa corresponderá automaticamente a você da biblioteca
  182. Se o registro não estiver presente, preencha ele mesmo
  183. </span>
  184. <divstyle = posição: absoluto; topo: 0; esquerda: 0; id = pop -up>
  185. er
  187. CellPadding = 0>
  188. <tBodyID = name_table_body> </tbody>
  189. </tabela>
  190. </div>
  191. </body>
  192. </html>

2. Página de dados de consulta assíncrona

Basta alterar a instrução SQL e os campos a serem exibidos no formato correspondente do seu próprio banco de dados.

  1. <!-#incluir virtual = Conn.asp->
  2. <%
  3. Keyword = request.QueryString (nomes)
  4. sql = selectlgid, lgmcfromgwherelgmclike '%& keyword &%' orderbylgiddesc
  5. setrs = server.createObject (adodb.recordset)
  6. Rs.opensql, Conn, 1,1
  7. Response.ContentType = Texto/XML
  8. Response.Write <? Xmlversion = 1.0Encoding = GB2312?>
  9. Response.write <swermem>
  10. Dowhilenotrs.eof
  11. Response.Write <Content>
  12. Response.write <name> & rs (LGMC) & </name>
  13. 'Response.write <suserId> & rs (userID) & </suserId>
  14. 'Response.Write <Startime> & rs (startime) & </ startime>
  15. 'Response.Write <Edtime> & rs (Endtime) & </ndtime>
  16. Response.write </acest>
  17. rs.movenext
  18. laço
  19. Response.write </swermE>
  20. rs.close
  21. setrs = nada
  22. %>

O acima é o código para o ASP imitar o estilo do Google para obter o efeito do menu suspenso. Espero que seja útil para o aprendizado de todos.

Artigos Relacionados