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:
- <%@Idioma = javascriptCodePage = 936%>
- <!
- http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
- <htmlxmlns = http: //www.w3.org/1999/xhtml>
- <styleType = text/css>
- <!-
- .style1 {color:#ff0000}
- .MouseOut
- {
- tamanho de fonte: 12px;
- Antecedentes:#708090;
- Cor: #fffafa;
- }
- .MouseOver
- {
- tamanho de fonte: 12px;
- Antecedentes: #fffafa;
- Cor:#000000;
- }
- ->
- </style>
- <scripttype = text/javascriptLanguage = javascript>
- varxmlhttp;
- varCompletediv;
- VariinputField;
- varnametable;
- Varnametable corpo;
- varflag = false;
- functionCreatexmlHttPrequest () {
- if (window.activexObject) {
- xmlHttp = newActivexObject (Microsoft.xmlHttp);
- }
- elseif (window.xmlhttprequest) {
- xmlHttp = newxmlHttPrequest ();
- }
- }
- Functionsetflag () {
- bandeira = true;
- }
- functionDisselect ()
- {
- if (sinalizador == false)
- document.getElementById (pop -up) .style.display = nenhum;
- }
- functionInitvars () {
- inputfield = document.getElementById (frmchangshang);
- nametable = document.getElementById (name_table);
- completEdiv = document.getElementById (pop -up);
- nametableBody = document.getElementById (name_table_body);
- document.getElementById (pop -up) .style.display = block;
- }
- functionFindNames () {
- initvars ();
- if (inputfield.value.length> 0)
- {
- createxmlHttPrequest ();
- varurl = search.asp? nomes =+inputfield.value;
- xmlhttp.open (get, url, true);
- xmlhttp.onreadyStatechange = retorno de chamada;
- xmlhttp.send (nulo);
- }
- outro
- {
- clearNames ();
- }
- }
- functionCallback () {
- if (xmlhttp.readyState == 4) {
- if (xmlhttp.status == 200)
- {
- tentar
- {
- Varname = xmlHttp.Responsexml.getElementsByTagName (nome)
- [0] .FirstChild.data;
- }
- captura (e)
- {
- document.getElementById (pop -up) .style.display = nenhum;
- clearNames ();
- }
- SetNames (xmlHttp.Responsexml.getElementsByTagName (Content));
- }
- elseif (xmlhttp.status == 204)
- {
- clearNames ();
- }
- }
- }
- funçõeseTNames (the_names) {
- clearNames ();
- varsize = the_names.length;
- setOffSets ();
- Varrow, célula, vãos;
- for (vari = 0; i <tamanho; i ++) {
- //varNextNode=The_NamesObily.firstchild.data;
- vare = the_names [i];
- // Obtenha o conteúdo da criança e recarregue -o em uma matriz
- varnextNode = e.getElementsByTagName (nome) [0] .FirstChild.data;
- // Crie TR, TD, Span Elements
- linha = document.createElement (tr);
- célula = document.createElement (td);
- //spans=document.createElement(span);
- // Defina propriedades de células
- Cell.onMouseOut = function () {this.className = 'mouseOver'; flag = false;};
- Cell.onMouseOver = function () {this.className = 'mouseout'; flag = true;};
- Cell.setAtattribute (BGColor,#ffffafa);
- Cell.setAtAttribute (borda, 0);
- //cell.setattribute (onMouseOver, setFlag ());
- Cell.OnClick = function () {Populatename (this);};
- // Adicione NextNode ao TD
- varartxtName = document.createTextNode (nextNode);
- Cell.AppendChild (txtName);
- // carrega dados ocultos para abranger elemento
- row.appendChild (célula);
- nametablebody.appendChild (linha);
- }
- }
- FunctionsToffSets () {
- varend = inputfield.offsetWidth;
- varleft = calcularoffsetLeft (InputField);
- Vartop = CalcularOffSetTop (InputField)+inputfield.offsetHeight;
- completEdiv.style.border = Black1pxSolid;
- completEdiv.style.left = esquerda+px;
- completEdiv.style.top = topo+px;
- nametable.style.width = 400px;
- }
- functionCalCulateOffsetLeft (campo) {
- returnCalCulateOffset (campo, offsetleft);
- }
- functionCalCulateOffSettop (campo) {
- returnCalCulateOffset (Campo, OffsetTop);
- }
- functionCalCulateOffset (campo, att) {
- varoffset = 0;
- while (campo) {
- deslocamento+= campo [att];
- field = field.offsetParent;
- }
- returnOffset;
- }
- functionpopulatename (célula) {
- // preenche os dados na página da web, célula ----> objeto TD
- inputfield.value = Cell.firstchild.nodEvalue;
- clearNames ();
- }
- // Limpe a matriz da lista
- functionClearNames () {
- varind = nametablebody.childnodes.length;
- for (vari = ind-1; i> = 0; i-) {
- nametableBody.RemoveChild (nametable corpos.Childnodes [i]);
- }
- completEdiv.style.border = nenhum;
- }
- </script>
- <head>
- <metahttp-equiv = content-typeContent = text/html; charset = gb2312/>
- <title> UntitledDocument </ititle>
- </head>
- <Body>
- <inputName = frmchangshangClass = inputTextId = frmchangshangStyle = width: 250px;
- onblur = Disselect (); OnKeyUp = findNames (); tamanho = 50MaxLength = 100>
- <Spanclass = Style1> Dica: digite palavras -chave e o programa corresponderá automaticamente a você da biblioteca
- Se o registro não estiver presente, preencha ele mesmo
- </span>
- <divstyle = posição: absoluto; topo: 0; esquerda: 0; id = pop -up>
- er
- CellPadding = 0>
- <tBodyID = name_table_body> </tbody>
- </tabela>
- </div>
- </body>
- </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.
- <!-#incluir virtual = Conn.asp->
- <%
- Keyword = request.QueryString (nomes)
- sql = selectlgid, lgmcfromgwherelgmclike '%& keyword &%' orderbylgiddesc
- setrs = server.createObject (adodb.recordset)
- Rs.opensql, Conn, 1,1
- Response.ContentType = Texto/XML
- Response.Write <? Xmlversion = 1.0Encoding = GB2312?>
- Response.write <swermem>
- Dowhilenotrs.eof
- Response.Write <Content>
- Response.write <name> & rs (LGMC) & </name>
- 'Response.write <suserId> & rs (userID) & </suserId>
- 'Response.Write <Startime> & rs (startime) & </ startime>
- 'Response.Write <Edtime> & rs (Endtime) & </ndtime>
- Response.write </acest>
- rs.movenext
- laço
- Response.write </swermE>
- rs.close
- setrs = nada
- %>
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.