为了完成根据输入内容动态弹出下拉窗口的实现,采用Ajax来实现.
javascript代码如下,需要导入prototype.js:
var inputField;
var nameTable;
var completeDiv;
var nameTableBody;
function initVars()
{
inputField = $("principalName"); //这里就是所要输入的文本框
nameTable = $("name_table");
completeDiv = $("popup");
nameTableBody = $("name_table_body");
}
function findPrincipals(url, evt) //这个就是事件的起点
{
evt = evt?evt:(window.event?window.event:null);
if (!checkKeyCode(evt.keyCode)) {
initVars();
var pars = "parameter=" + inputField.value;
var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onFailure: reportError, onComplete: showResponse});
}
}
function reportError(request)
{
}
function showResponse(request)
{
var content = request.responseXML;
try {
setNames(content.getElementsByTagName("principal"));
} catch(e) {
}
}
function setNames(the_names)
{
clearNames();
var size = the_names.length;
if (size > 0)
{
setOffsets(); //这个方法设置弹出窗口的具体位置.
var row, cell, txtNode;
for (var i=0; i<size; i++)
{
var nextNode = the_names[i].firstChild.data;
var principalOid = the_names[i].getAttribute("oid");
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {this.className="mouseOver";};
cell.onmouseover = function() {this.className="mouseOut";};
cell.setAttribute("align", "left");
cell.setAttribute("border", 0);
cell.setAttribute("oid",principalOid);
cell.onclick = function() {populateName(this);};
row.setAttribute("height", "20px");
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
nameTableBody.appendChild(row);
}
}
}
function clearNames()
{
var ind = nameTableBody.childNodes.length;
for (var i=ind - 1; i>=0; i--)
{
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
completeDiv.style.border = "none";
}
function populateName(cell)
{
inputField.value=cell.firstChild.nodeValue;
$("principalOid").value=cell.getAttribute("oid");
clearNames();
}
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 - 105 + "px";
completeDiv.style.top = top + 10 + "px";
nameTable.style.width = end - 10 + "px"
}
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 checkKeyCode(_keyCode)
{
if (_keyCode == 12 || _keyCode == 13) return true;
if (_keyCode >= 16 && _keyCode <= 20) return true;
if (_keyCode == 27) return true;
if (_keyCode >= 32 && _keyCode <= 45) return true;
if (_keyCode == 47) return true;
if (_keyCode >= 91 && _keyCode <= 93) return true;
if (_keyCode >=112 && _keyCode <=127) return true;
if (_keyCode ==144 || _keyCode ==145) return true;
if (_keyCode == 255) return true;
}
function mdown(evt) //这个方法用在最大层的onmousedown()事件, 目的是当鼠标点击别处时关闭下拉窗口
{
evt = evt?evt:(window.event?window.event:null);
if (window.event)
{
if (evt.srcElement.id == 'principalName') return;
try
{
for (var obj=evt.srcElement; obj.tagName != "DIV"; obj=obj.parentElement){}
}
catch(e){}
}
else
{
if (evt.target.id == 'principalName') return;
try
{
for (var obj=evt.target; obj.tagName != "DIV"; obj=obj.parentNode){}
}
catch(e){}
}
try
{
if (obj.id != 'popup') clearNames();
}
catch(e){}
}
对应的jsp代码,这里只贴出部分的:
<div class="input-div" onmousedown="mdown(event);"> //最外层的mdown
<s:textfield name="priceTable.principalName" id="principalName" size="30" maxlength="30" onkeyup="findPrincipals('findPrincipals.action',event);" /> //具体的文本框,这里我用的是struts2做的.
<div id="popup" style="position: absolute;">
<table id="name_table" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0"/>
<tbody id="name_table_body"></tbody>
</table>
</div> //这个就是显示出来的下拉窗口. 配合前面的JS就可以达到下拉窗口的实现.
下面是用到的两个样式:
.mouseOut
{
background:#426FD9;
color:#FFF;
}
.moustOver
{
background:#FFFFFF;
}
再下来是对应的action中的代码:
public String findPrincipals() {
try {
String parameter = this.getRequest().getParameter("parameter").trim();
PrincipalHolder principal = new PrincipalHolder();
principal.setPrincipalCode(parameter);
principal.setPrincipalName(parameter);
principal.setIsActive(VALUE_YES);
List<PrincipalHolder> principals = principalService_.findPrincipals(principal);
HttpServletResponse response = ServletActionContext.getResponse();
if (principals != null && principals.size() > 0) {
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "No-cache");
out.println("<response>");
for (int i=0; i<principals.size(); i++) {
principal = principals.get(i);
out.println("<principal oid='" + principal.getPrincipalOid() + "'>" + principal.getPrincipalName().trim()
+ " -- " + principal.getPrincipalCode().trim() + "</principal>");
}
out.println("</response>");
out.close();
} else {
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
}
} catch (Exception e) {
log.error("findPrincipals : ");
log.error("Error occured on find principal list ", e);
this.ticket = String.valueOf(DateUtil.getCurrentTimeStamp());
ErrorMsgHelper.logError(log, ticket, this.toString(), e);
}
return null;
}
里面有些内容是我具体项目中的,如果要用需要做相应的修改,包括js.
分享到:
相关推荐
磨叽了一下午的时间,终于把这个仿关机效果弹出式登录窗口给完成了……虽然还有一些些问题,比如浏览器不兼容……毕竟是用JS+AJAX+ASP.NET写得无刷新……是VS2005+ACCESS,解压缩后就可以运行…… 总之呢……我要个5...
本文将详细解析如何利用AJAX技术实现各种弹出窗口效果,帮助开发者更好地理解和应用这些技巧。 #### 基本原理:`window.open`方法 在HTML和JavaScript中,`window.open()`方法是最常用的创建新窗口或弹出窗口的...
总的来说,这个项目展示了如何结合Ajax、CSS和JavaScript创建一个不打断用户浏览的弹出式登录窗口,提高了网站的交互性和用户体验。通过对代码的深入理解,开发者可以进一步学习如何实现类似功能,并将其应用到其他...
接下来,我们讨论如何在右下角弹出提示窗口。这通常通过JavaScript或者CSS来实现,可以结合AjaxPro的数据返回来决定何时显示提示。例如,当服务器返回特定的状态或信息时,我们可以使用以下代码创建一个弹出框: ``...
9. **响应式设计**:考虑到不同设备和屏幕尺寸,弹出窗口应具备响应式布局,以适应移动设备和平板电脑。使用媒体查询(`@media queries`)和Bootstrap栅格系统可以实现这一目标。 以上知识点是"9种js弹出动态窗口的...
在ASP.NET中,实现弹出式窗口的方式有很多种。一种常见的是利用JavaScript库,如jQuery UI,配合HTML和CSS来创建。jQuery UI是一个强大的工具集,包含了多种交互元素和效果,其中包括弹出对话框(Dialog)功能,非常...
【标题】"诚优仿关机效果弹出式登录窗口(Asp.Net+Ajax+access)"涉及了几个...总的来说,"诚优仿关机效果弹出式登录窗口(Asp.Net+Ajax+access)"结合了Web开发的多种核心技术,实现了一个高效且用户体验良好的登录机制。
"jquery实现弹出登录窗口"这个主题,主要涉及如何利用jQuery创建一个交互式的弹出登录窗口,增强用户体验。下面将详细介绍实现这一功能的关键步骤和相关知识点。 首先,我们需要理解jQuery的基本用法。jQuery通过...
通过阅读和理解这些代码,可以加深对ASP.NET AJAX弹出窗口实现原理的理解。 总的来说,ASP.NET AJAX弹出窗口是提升Web应用用户体验的有效手段,它结合了C#的服务器端处理能力和JavaScript的客户端交互性。通过深入...
3. **创建弹出窗口**:弹出窗口的实现方式有很多种。一种常见的方式是使用HTML5的`<dialog>`元素,或者通过CSS创建一个模态框(modal)。这里我们用CSS和HTML创建一个简单的模态框: ```html ...
1. **Web开发**:在Web开发中,弹出下载窗口通常是通过JavaScript或AJAX实现的。JavaScript是一种广泛使用的客户端脚本语言,可以动态更新网页内容,而AJAX(异步JavaScript和XML)则用于在不刷新整个页面的情况下与...
在ASP.NET Web应用中,弹出式窗体通常通过JavaScript、jQuery或Ajax技术实现,因为Web应用的特性决定了窗口不能像桌面应用那样直接弹出。常见的实现方式有: 1. **JavaScript 弹窗**:使用window.alert(), window....
在本项目中,我们关注的是使用jQuery实现的弹出窗口,并且这个窗口具有灰色背景,以创建一种沉浸式的用户体验。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。 首先,...
在网页设计中,弹出式窗口是一种常见的交互元素,它可以在用户进行特定操作时显示额外的信息或功能。这里我们关注的是一个基于jQuery实现的弹出式DIV。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、...
MSN,全称Microsoft Network,是微软的一个在线服务,其早期的即时通讯软件MSN Messenger就以这种弹出式对话框作为特征之一。 在标题中提到的"ASP.NET类似MSN弹出提示窗口",我们可以理解为开发者希望通过ASP.NET...
本文将深入探讨如何在ASPx页面上实现弹出窗口,以增强用户体验并提供各种交互式功能。 首先,弹出窗口在Web应用中通常用于确认操作、显示详细信息或进行表单输入等场景。在ASPx页面上,我们可以利用JavaScript库如...
以下是一个简单的示例,展示了如何在 Intraweb 应用程序中实现弹出窗口: 1. 首先,创建一个 IWForm 对象,作为弹出窗口。在 Delphi 中,这可能看起来像这样: ```delphi type TIWPopupForm = class(TIWForm) ...
一、JavaScript实现弹出式页面 JavaScript是最常用的语言来创建弹出窗口,因为它可以动态地修改网页内容。一个简单的弹出框可能包含以下代码: ```javascript function popup() { var newWindow = window.open("...
【标题】:“仿关机效果弹出式登录窗口”是一个基于Asp.Net技术和Ajax实现的登录界面设计。这种登录窗口在用户尝试访问受保护的页面时会以类似于系统关机提示的方式弹出,增强了用户体验,同时也增加了网站的安全性...
标题中的“弹出层登录窗口ajax登录验证”指的是在网页设计中使用Ajax技术实现的弹出式登录窗口的验证功能。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许网页在不重新加载整个页面的...