ASP имитирует стиль Google, чтобы получить эффект раскрывающегося меню

Автор：Eve Cole Время обновления：2025-03-07 15:00:04

Эта статья в основном представляет ASP, чтобы подражать стилю Google, чтобы добиться эффекта раскрывающегося меню.

Сегодня я буду использовать ASP, чтобы подражать раскрывающемуся меню Google STYLE и напрямую загружать код

1. Код на переднем плане:

<%@Language = javascriptcodepage = 936%>
<! Doctypehtmlpublic-// w3c // dtdxhtml1.0transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<htmlxmlns = http: //www.w3.org/1999/xhtml>
<styletype = text/css>
<!-
.style1 {color:#ff0000}
.mouseout
{
размер шрифта: 12px;
Фон:#708090;
Цвет: #fffafa;
}
.mouseover
{
размер шрифта: 12px;
Фон: #fffafa;
Цвет:#000000;
}
->
</style>
<scripttype = text/javascriptlanguage = javascript>
varxmlhttp;
varcompletediv;
variinputfield;
обмен;
оборудование для тела;
varflag = false;
functionCreatexmlhttprequest () {
if (window.activexobject) {
xmlhttp = newAcatexObject (microsoft.xmlhttp);
}
elseif (window.xmlhttprequest) {
xmlhttp = newxmlhttprequest ();
}
}
functionSetFlag () {
flag = true;
}
functionDisselect ()
{
if (flag == false)
document.getElementbyId (POPUP) .STYLE.DISPLAY = NONE;
}
functionInitvars () {
inputfield = document.getElementById (frMChangshang);
nametable = document.getElementById (name_table);
reflectiv = document.getElementbyId (всплывающее окно);
nametablebody = document.getElementById (name_table_body);
document.getElementbyId (POPUP) .STYLE.DISPLAY = block;
}
functionFindNames () {
initVars ();
if (inputfield.value.length> 0)
{
createxmlhttprequest ();
varurl = search.asp? names =+inputfield.value;
xmlhttp.open (get, url, true);
xmlhttp.onreadystateChange = обратный вызов;
xmlhttp.send (null);
}
еще
{
clearNames ();
}
}
functionCallback () {
if (xmlhttp.readystate == 4) {
if (xmlhttp.status == 200)
{
пытаться
{
varname = xmlhttp.responsexml.getelementsbytagname (name)
[0] .firstchild.data;
}
поймать (e)
{
document.getElementbyId (POPUP) .STYLE.DISPLAY = NONE;
clearNames ();
}
setNames (xmlhttp.responsexml.getelementsbytagname (content));
}
elseif (xmlhttp.status == 204)
{
clearNames ();
}
}
}
functionSetNames (the_Names) {
clearNames ();
varsize = the_names.length;
setoffsets ();
Варроу, ячейка, пролета;
for (vari = 0; i <size; i ++) {
//varnextnode=the_names®.firstchild.data;
vare = the_names [i];
// Получите содержание узлов дочернего узла и перезагрузите его в массив
varnextnode = e.getelementsbytagname (имя) [0] .firstchild.data;
// Создать TR, TD, SPAN Elements
row = document.createElement (tr);
cell = document.createElement (TD);
//spans=document.createElement(span);
// Установить свойства ячейки
cell.onmouseout = function () {this.classname = 'mouseover'; flag = false;};
cell.onmouseover = function () {this.classname = 'mouseout'; flag = true;};
cell.setattribute (bgcolor,#fffafa);
cell.setattribute (граница, 0);
//cell.setattribute (onmouseover, setflag ());
cell.onclick = function () {populateName (this);};
// Добавить NextNode в TD
vartxtname = document.createTextNode (nextNode);
cell.appendchild (txtname);
// загружать скрытые данные в элемент SPAN
row.appendchild (cell);
nametablebody.appendchild (ряд);
}
}
functionSetOffSets () {
varend = inputfield.offsetwidth;
varleft = countulationoffsetleft (inputfield);
vartop = CalculateOffSettop (inputfield)+inputfield.offsetheight;
reflectiv.style.border = black1pxsolid;
reflediv.style.left = Left+PX;
reflectiv.style.top = top+px;
nametable.style.width = 400px;
}
functionCalculateOffSetleft (Field) {
returncalculateoffset (Field, offsetSetleft);
}
functionCalculateOffSettop (Field) {
returnCalculateOffset (Field, OffSetTep);
}
functionCalculateOffSet (Field, ATTR) {
varoffset = 0;
while (Field) {
Offset+= Field [attr];
Field = field.offsetParent;
}
returnoffset;
}
functionPopulateName (cell) {
// заполнить данные на веб-странице, ячейка ----> TD объект
inputfield.value = cell.firstchild.nodevalue;
clearNames ();
}
// очистить массив списков
functionClearnames () {
varind = nametablebody.childnodes.length;
for (vari = ind-1; i> = 0; i-) {
nametablebody.removechild (nametablebody.childnodes [i]);
}
reflediv.style.border = нет;
}
</script>
<голова>
<metahttp-equiv = content-typecontent = text/html; charset = gb2312/>
<title> UntitledDocument </title>
</head>
<тело>
<inputName = frmChangShangClass = inputeTxtId = frMChangShangStyle = ширина: 250px;
onblur = diselect (); onkeyup = findnames (); size = 50maxlength = 100>
<spanclass = style1> tip: введите ключевые слова, и программа автоматически соответствует вам из библиотеки
Если запись не присутствует, заполните ее сами
</span>
<divstyle = позиция: абсолют; верх: 0; слева: 0; id = opup>
<tableId = name_tablebgcolor =#fffafababorder = 0cellSpacing = 0
CellPadding = 0>
<tboyId = name_table_body> </tbody>
</table>
</div>
</body>
</html>

2. Страница данных Backend Search.asp Асинхронное запрос

Просто измените оператор SQL и поля, которые будут отображаться в соответствующий формат вашей собственной базы данных.

<!-#includevirtual = conn.asp->
<%
Ключевое слово = request.querystring (имена)
SQL = SELECTLGID, LGMCFROMGWHERELGMCLIKE '%& Keyword &%' orderbylgiddesc
setrs = server.createObject (adodb.recordset)
Rs.opensql, Conn, 1,1
Response.contenttype = text/xml
response.write <? xmlversion = 1.0coding = gb2312?>
response.write <ответ>
Dowhilenotrs.eof
response.Write <SOTED>
response.write <mame> & rs (lgmc) и </name>
'response.write <userId> & rs (userId) и </userId>
'response.write <startime> & rs (startime) и </startime>
'response.write <Endtime> & rs (EndTime) и </endtime>
response.write </content>
Rs.movenext
петля
response.write </response>
Rs.close
setrs = ничего
%>

Приведенное выше код для ASP подражать стилю Google предложения, чтобы достичь раскрывающегося меню.