หน้าแรก>บทช่วยสอนการเขียนโปรแกรมเครือข่าย>กวดวิชา ASP

ASP เลียนแบบสไตล์ Google แนะนำเพื่อให้ได้เอฟเฟกต์เมนูแบบเลื่อนลง

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-03-07 15:00:04

บทความนี้ส่วนใหญ่แนะนำ ASP เพื่อเลียนแบบสไตล์ Google แนะนำเพื่อให้ได้เอฟเฟกต์เมนูแบบเลื่อนลง

วันนี้ฉันจะใช้ ASP เพื่อเลียนแบบเมนูแบบเลื่อนลงของ Google แนะนำและอัปโหลดรหัสโดยตรง

1. รหัสเบื้องหน้า:

  1. <%@language = 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 {สี:#FF0000}
  9. .MouseOut
  10. -
  11. ขนาดตัวอักษร: 12px;
  12. ความเป็นมา:#708090;
  13. สี: #fffafa;
  14. -
  16. .MouseOver
  17. -
  18. ขนาดตัวอักษร: 12px;
  19. ความเป็นมา: #FFFAFA;
  20. สี:#000000;
  21. -
  22. -
  23. </style>
  24. <scriptType = text/javascriptLanguage = JavaScript>
  25. varxmlhttp;
  26. Varcompletediv;
  27. VariInputfield;
  28. Varnametable;
  29. Varnametablebody;
  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. ธง = จริง;
  43. -
  45. functionDisselect ()
  46. -
  47. if (flag == false)
  48. document.getElementById (ป๊อปอัพ) .style.display = ไม่มี;
  49. -
  51. functionInitVars () {
  52. inputfield = document.getElementById (frmchangshang);
  53. nametable = document.getElementById (name_table);
  54. เสร็จสมบูรณ์ = document.getElementById (ป๊อปอัพ);
  55. nametablebody = document.getElementById (name_table_body);
  56. document.getElementById (ป๊อปอัพ) .style.display = บล็อก;
  57. -
  59. functionFindNames () {
  60. initvars ();
  61. if (inputfield.value.length> 0)
  62. -
  63. createxmlhttprequest ();
  64. varurl = search.asp? names =+inputfield.value;
  65. xmlhttp.open (รับ, url, true);
  66. xmlhttp.onreadystatechange = การโทรกลับ;
  67. XMLHTTP.SEND (NULL);
  68. -
  69. อื่น
  70. -
  71. Clearnames ();
  72. -
  73. -
  75. FunctionCallback () {
  76. if (xmlhttp.readystate == 4) {
  77. if (xmlhttp.status == 200)
  78. -
  79. พยายาม
  80. -
  81. varname = xmlhttp.responsexml.getElementsByTagname (ชื่อ)
  83. [0] .firstchild.data;
  84. -
  85. จับ (e)
  86. -
  87. document.getElementById (ป๊อปอัพ) .style.display = ไม่มี;
  88. Clearnames ();
  89. -
  90. setNames (xmlhttp.responsexml.getElementsByTagname (เนื้อหา));
  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, Cell, Spans;
  104. สำหรับ (vari = 0; i <size; i ++) {
  105. //varnextnode=the_names [ฉันเหมือนกัน. firstchild.data;
  106. vare = the_names [i];
  107. // รับเนื้อหาโหนดลูกและโหลดลงในอาร์เรย์
  108. varnextNode = e.getElementByTagname (ชื่อ) [0] .firstchild.data;
  109. // สร้าง TR, TD, Span Elements
  110. row = document.createElement (TR);
  111. cell = document.createElement (TD);
  112. //spans=document.createElement(Span);
  113. // ตั้งค่าคุณสมบัติของเซลล์
  114. cell.onmouseout = function () {this.className = 'mouseover'; flag = false;};
  115. cell.onMouseOver = function () {this.className = 'mouseout'; flag = true;};
  116. cell.setAttribute (bgcolor,#fffafa);
  117. cell.setAttribute (เส้นขอบ, 0);
  118. //cell.setAttribute (onMouseOver, setFlag ());
  119. cell.onclick = function () {populatename (this);};
  120. // เพิ่ม NextNode เป็น td
  121. vartxtName = document.createtextNode (nextNode);
  122. Cell.AppendChild (txtName);
  123. // โหลดข้อมูลที่ซ่อนอยู่เพื่อขยายองค์ประกอบ
  124. row.appendchild (เซลล์);
  125. nametablebody.appendchild (แถว);
  126. -
  127. -
  129. functionsetoffsets () {
  130. Varend = inputfield.offsetWidth;
  131. varleft = calculateOffsetLeft (inputfield);
  132. vartop = calculateOffSettop (inputfield)+inputfield.offSetheight;
  134. เสร็จสมบูรณ์ style.border = black1pxsolid;
  135. เสร็จสมบูรณ์ style.left = ซ้าย+px;
  136. เสร็จสิ้น style.top = top+px;
  137. nametable.style.width = 400px;
  138. -
  140. FunctionCalculateOffsetLeft (ฟิลด์) {
  141. returnCalculateOffset (ฟิลด์, Offsetleft);
  142. -
  144. FunctionCalculateOffSettop (ฟิลด์) {
  145. returnCalculateOffset (ฟิลด์, ออฟเซ็ตต์);
  146. -
  148. FunctionCalculateOffset (ฟิลด์, attr) {
  149. varoffset = 0;
  150. ในขณะที่ (ฟิลด์) {
  151. ออฟเซ็ต+= ฟิลด์ [attr];
  152. field = field.offsetParent;
  153. -
  154. returnoffset;
  155. -
  157. FunctionPopulatename (เซลล์) {
  158. // กรอกข้อมูลลงในหน้าเว็บ, เซลล์ ----> td object
  159. inputfield.value = cell.firstchild.nodevalue;
  160. Clearnames ();
  161. -
  162. // ล้างรายการอาร์เรย์
  163. functionclearNames () {
  164. varind = nametablebody.childnodes.length;
  165. สำหรับ (vari = ind-1; i> = 0; i-) {
  166. nametablebody.removechild (nametablebody.childnodes [i]);
  167. -
  168. เสร็จสมบูรณ์ style.border = ไม่มี;
  169. -
  170. </script>
  171. <head>
  172. <metahttp-equiv = content-typecontent = text/html; charset = gb2312/>
  173. <title> untitledDocument </title>
  174. </head>
  176. <body>
  177. <inputName = frMChangShangClass = inputTextId = frMChangShangStyle = ความกว้าง: 250px;
  179. onblur = disselect (); onkeyup = findNames (); size = 50MaxLength = 100>
  180. <spanclass = style1> เคล็ดลับ: ป้อนคำหลักและโปรแกรมจะจับคู่คุณโดยอัตโนมัติจากไลบรารี
  182. หากไม่มีการบันทึกให้เติมด้วยตัวเอง
  183. </span>
  184. <DivStyle = ตำแหน่ง: Absolute; Top: 0; ซ้าย: 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. หน้าข้อมูลการค้นหาแบบอะซิงโครนัส

เพียงเปลี่ยนคำสั่ง SQL และฟิลด์ที่จะแสดงเป็นรูปแบบที่สอดคล้องกันของฐานข้อมูลของคุณเอง

  1. <!-#includevirtual = conn.asp->
  2. -
  3. keyword = request.QueryString (ชื่อ)
  4. sql = selectlgid, lgmcfromgwherelgmclike '%& keyword &%' orderbylgiddesc
  5. setRs = server.createObject (adodb.recordset)
  6. Rs.opensql, Conn, 1,1
  7. Response.contentType = text/xml
  8. Response.write <? xmlversion = 1.0Encoding = GB2312?>
  9. Response.write <Surpase>
  10. dowhilenotrs.eof
  11. Response.write <SONTENT>
  12. response.write <name> & rs (LGMC) & </name>
  13. 'response.write <userId> & rs (userId) & </userId>
  14. 'response.write <Startime> & rs (startime) & </startime>
  15. 'response.write <DimTime> & rs (endtime) & </endtime>
  16. Response.write </stoment>
  17. Rs.Movenext
  18. วง
  19. Response.write </serponse>
  20. Rs.close
  21. setrs = ไม่มีอะไร
  22. -

ข้างต้นเป็นรหัสสำหรับ ASP เพื่อเลียนแบบสไตล์ Google แนะนำเพื่อให้ได้เอฟเฟกต์เมนูแบบเลื่อนลง

บทความที่เกี่ยวข้อง