实现基于 Ajax 的无限级菜单Word文档格式.docx
- 文档编号:17221826
- 上传时间:2022-11-29
- 格式:DOCX
- 页数:8
- 大小:18.52KB
实现基于 Ajax 的无限级菜单Word文档格式.docx
《实现基于 Ajax 的无限级菜单Word文档格式.docx》由会员分享,可在线阅读,更多相关《实现基于 Ajax 的无限级菜单Word文档格式.docx(8页珍藏版)》请在冰豆网上搜索。
//这是一个加载信息提示框,也可以不要!
document.getElementById("
load"
).style.visibility="
visible"
;
//加载相应页面的JS文件
if(js!
=null){
//加载JS文件
LoadJS(js);
//获取一个XMLHttpRequest实例
varreq=newXMLHttpRequest();
//设置用来从请求对象接收回调通知的句柄函数
varhandlerFunction=getReadyStateHandler(req,Tid);
req.onreadystatechange=handlerFunction;
//第三个参数表示请求是异步的
req.open("
POST"
url,true);
//指示请求体包含form数据
req.setRequestHeader("
Content-Type"
application/x-www-form-urlencoded"
//发送参数
req.send(parm);
functiongetReadyStateHandler(req,Tid){
//返回一个监听XMLHttpRequest实例的匿名函数
returnfunction(){
//如果请求的状态是“完成”
if(req.readyState==4){
//成功接收了服务器响应
if(req.status==200){
//下面一句是重点,这里显示了返回信息的内容部分,也可以加以修改。
进行其它处理
document.getElementById(Tid).innerHTML=req.responseText;
document.getElementById(Tid).style.visibility="
//这一句是实现加载信息提示框的隐藏,也可以不要。
hidden"
}else{
//有HTTP问题发生
alert("
HTTPerror:
"
+req.status);
//动态加载JS文件
functionLoadJS(file){
varhead=document.getElementsByTagName('
HEAD'
).item(0);
varscript=document.createElement('
SCRIPT'
script.src=file;
script.type="
text/javascript"
head.appendChild(script);
这就是基本的框架了,因为使用了request.responseText;
所以,可以直接请求一个页面jsp,servlet但在使用Struts框架的请求时要进行特殊处理,因为Form不支持异步请求。
建议在这些页面上不要加入标签,就像.net里的asxm文件!
而且在使用Struts框架时有点要注意的是,Mapping对象直接返回null就可以了,因为我们会在下面讲到并发多线程。
来处理这个问题的。
总的来看,有点像是积木搭建起来的。
这样方便文件的修改和扩展,互相之间并不影响,而且,实现了代码和标签分离。
在进行传统页面改版时,也不用重新编写全部代码。
只要修改一小部分就可以完美实现Ajax带来的无闪刷新快感。
以上代码均在IE,FireFox下测试过!
首先建立一个数据表menu
mId 菜单主键
name 菜单名称
url 菜单链接
father 低级菜单ID
sub 是否最底层菜单(用于判断是否还可以继续展开)
target 菜单链接目标(用ajax方式打开时作为显示id)
pa 菜单参数(这项用于ajax方式打开菜单)
制作一个菜单对象类
classMenu{
privateintmId;
privateStringname;
...//其它成员
publicgetMid(){
returnmId;
publicsetMid(intmId){
this.mId=mId;
....//其它成员的getset方法,
另一个是操作类
classMenuOpt(){
publicVectorgetMenus(intfather){
Vectorvector=newVector();
//这里是取得父级菜单ID为father的全部菜单
//并封装进Vector的一个对象中。
。
returnvector;
其次就是一般的jsp文件了。
但要注意以前说过的,不要包含标签!
menu.jsp:
%@pagecontentType="
text/html;
charset=GB2312"
%>
%@tagliburi="
prefix="
c"
jsp:
useBeanid="
menu"
scope="
page"
class="
ycoe.basic.MenuOpt"
/>
setPropertyname="
property="
father"
value="
${param.father}"
div>
c:
forEachvar="
m"
items="
${menu.vector}"
varStatus="
>
choose>
whentest="
${m.subeq'
Y'
}"
divonClick="
showMenu('
${m.mid}'
'
${m.url}'
${m.target}'
father=${m.mid}'
)"
imgsrc="
pic/menu0.gif"
id="
img${m.mid}"
alt="
style="
cursor:
hand;
ahref="
#"
text1"
${m.name}
/div>
divstyle="
display:
none;
tr${m.mid}"
padding-left:
12pt"
${m.mid}"
/c:
when>
otherwise>
divonclick="
openMenu('
${m.pa}'
pic/menu1.gif"
menu.js:
//operMenu(打开下拉菜单的ID,打开的地址,链接打开的目标,参数)。
//这是用在menu.jsp的方法
functionshowMenu(id,url,target,param){
vartrObj=document.getElementById("
tr"
+id);
vartdObj=document.getElementById(id);
//try{
if(document.getElementById("
+id).style.display=="
none"
//显示菜单
if(tdObj.innerHTML==null||tdObj.innerHTML=="
//提取数据
+id).style.display="
img"
+id).src="
pic/menu2.gif"
Bcandy(id,"
page/menu.jsp"
param,"
openMenu(url,target,param);
}else{
//如果里面有内容,直接显示
//Bcandy(target,url,param,"
//打开菜单链接
//隐藏菜单
//}catch(e){}
//打开菜单
functionopenMenu(url,target,param){
//这里不用我写了吧。
有好几种实现方法,建议使用ajax实现!
}
最后是显示页面:
%@pagecontentType="
%>
metahttp-equiv=Content-Typecontent="
charset=gb2312"
style>
.text1:
hover{border:
1px#999999solid;
background-color:
#CCCCCC;
height:
12px;
.text1{border:
1px#FFFFFFsolid;
functionini(){
Bcandy("
0"
"
menu.jsp"
id=0&
father=0"
menu.js"
bodyonload="
ini();
divid="
z-index:
1;
color:
#FF0000;
visibility:
hidden;
filter:
Alpha(opacity=85);
#FFFFFF;
left:
48%;
top:
BORDER-RIGHT:
#0000001pxsolid;
PADDING-RIGHT:
BORDER-TOP:
PADDING-LEFT:
PADDING-BOTTOM:
BORDER-LEFT:
LINE-HEIGHT:
22px;
PADDING-TOP:
BORDER-BOTTOM:
POSITION:
absolute;
imgsrc='
pic/loop.gif'
数据处理中,请稍候...
br>
align="
center"
可以看到,无论在哪个层面,都和传统的没什么分别,只有jsp部分除去文件头而已(其实不去掉也行的,呵呵),而且,还可以看到,一个页面,已经分成了好几部分。
就像之前说的那样,积木式的(这是网上看到一篇关于.net框架的结构时作者提出的一种结构,觉得不错,被我应用到JSP来了)。
在一些细节方面,我作了一些保留,请理解。
但大致框架都是经过IE和FireFox测试。
一些功能方面的扩展,自己想想了。
原理:
其实就是应用了页面递归!
就和一般的递归方法一下,不过用在页面上而已
tr${m.id}"
循环,将从封装进vector的对象逐一显示出来
for{
if(如果是最上层菜单sub=N){
divid="
t${m.id}"
onClick="
ShowMenu(${m.father....})"
显示菜单内容
divstyle="
td${m.id....}"
}else{
divonClick="
OpenMenu(${m.id})"
显示菜单内容
}
showMenu(father,id....)方法,将根据传入的father去服务器里取得数据后,再次调用这个页面。
而这时,是将页面的内容显示在新的ID里面。
这样,看起来就有和MSDN里的树菜单一样的效果了。
优点:
多级菜单多次获取,加快了反应速度,同时应用了ajax请求,让人感觉不到页面的闪烁,亲和力强。
再者,可以JS里加入了代码,让用户不用每次点击都去获取服务器数据,而是先判断有没有内容,没有再取。
同时,实现了菜单与页面的同步,在每打开一级菜单,都可以在相应的地方打开页面。
同样,这个operMenu()也可以采用ajax方式。
效果可以上看看:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实现基于 Ajax 的无限级菜单 实现 基于 无限 菜单