ASPはgoogle suggestスタイルを真似てドロップダウンメニュー効果を実現
6821 ワード
今日は皆さんと一緒にASPを利用してGoogle suggestスタイルを実現したドロップダウンメニューを真似て、直接コードをアップします
1.フロントコード:
2.バックグラウンドasp非同期クエリーデータページsql文と表示するフィールドを自分のデータベース対応フォーマットに変更すればいいです.
以上、ASPがgoogle suggestスタイルを真似てドロップダウンメニューの効果を実現するコードで、皆さんの勉強に役立つことを願っています.
1.フロントコード:
var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
var flag=false;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function setflag(){
flag = true;
}
function DisSelect()
{
if(flag==false)
document.getElementById("popup").style.display="none";
}
function initVars() {
inputField = document.getElementById("frmchangshang");
nameTable = document.getElementById("name_table");
completeDiv = document.getElementById("popup");
nameTableBody = document.getElementById("name_table_body");
document.getElementById("popup").style.display="block";
}
function findNames() {
initVars();
if (inputField.value.length > 0)
{
createXMLHttpRequest();
var url = "search.asp?names=" + inputField.value;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
else
{
clearNames();
}
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200)
{
try
{
var name = xmlHttp.responseXML.getElementsByTagName("name")
[0].firstChild.data;
}
catch(e)
{
document.getElementById("popup").style.display="none";
clearNames();
}
setNames(xmlHttp.responseXML.getElementsByTagName("content"));
}
else if (xmlHttp.status == 204)
{
clearNames();
}
}
}
function setNames(the_names) {
clearNames();
var size = the_names.length;
setOffsets();
var row,cell,spans;
for (var i = 0; i < size; i++) {
//var nextNode = the_names[i].firstChild.data;
var e = the_names[i];
// ,
var nextNode=e.getElementsByTagName("name")[0].firstChild.data;
// tr,td,span
row =document.createElement("tr");
cell =document.createElement("td");
//spans=document.createElement("span");
// cell
cell.onmouseout = function() {this.className='mouseOver'; flag=false;};
cell.onmouseover = function() {this.className='mouseOut'; flag=true;};
cell.setAttribute("bgcolor","#FFFAFA");
cell.setAttribute("border","0");
//cell.setAttribute("onmouseover","setflag()");
cell.onclick = function() { populateName(this); };
// nextNode td
var txtName = document.createTextNode(nextNode);
cell.appendChild(txtName);
// span
row.appendChild(cell);
nameTableBody.appendChild(row);
}
}
function setOffsets() {
var end = inputField.offsetWidth;
var left = calculateOffsetLeft(inputField);
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
nameTable.style.width="400px";
}
function calculateOffsetLeft(field) {
return calculateOffset(field, "offsetLeft");
}
function calculateOffsetTop(field) {
return calculateOffset(field, "offsetTop");
}
function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
function populateName(cell) {
// web ,cell---->td
inputField.value = cell.firstChild.nodeValue;
clearNames();
}
//
function clearNames() {
var ind = nameTableBody.childNodes.length;
for (var i = ind - 1; i >= 0 ; i--) {
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
completeDiv.style.border = "none";
}
Untitled Document
: ,
,
2.バックグラウンドasp非同期クエリーデータページsql文と表示するフィールドを自分のデータベース対応フォーマットに変更すればいいです.
"
response.Write ""
do while not rs.eof
response.Write ""
response.Write ""&rs("lgmc")&" "
'response.Write ""&rs("userid")&" "
'response.Write ""&rs("startime")&" "
'response.Write ""&rs("endtime")&" "
response.Write " "
rs.movenext
loop
response.Write " "
rs.close
set rs=nothing
%>
以上、ASPがgoogle suggestスタイルを真似てドロップダウンメニューの効果を実現するコードで、皆さんの勉強に役立つことを願っています.