JAVA涂鸦
关于JAVA的点点滴滴
posts - 50,  comments - 689,  trackbacks - 0

ajax确实是个很好的技术,在提高客户的体验度上面能做很多以前不能做或者不好做的事情。出现提示页面就是一个很好的示例。需要制作提示页面的地方其实很多,但以前大多是要求用户点击相关信息进入详细信息页面察看,然后返回,再点击其他的信息察看详细信息页面。这样就降低了客户的体验度,在没有ajax的时候,我们是劝导客户只能这么做。

现在用ajax就可以很轻松的解决这个问题了。
我的平台仍然是struts+spring+hibernate,但ajax打交道的主要仍是struts,至于后台的DAO怎么写,我就不贴了,因为比较简单。

我的实现方式是当鼠标移动到图片上时,就会出现提示信息,移开,提示信息就关闭。

效果:
鼠标没有移动到图片的效果
ts1.JPG

鼠标移动到图片上的效果
ts2.JPG

主要代码
jsp页面:

< td width = " 15% "  align = " center "   >
    
< a href = " javascript:btn_AddNewBlueprintOrCommentary('<bean:write name= " element "  property= " id.tbBlueprintId " />'); " >< font color = " green " > [说明书] </ font ></ a >
    
< img src = " ../images/task.gif "  onMouseOver = " btn_getCommentary(this,'<bean:write name= " element "  property= " id.tbBlueprintId " />'); "  onMouseOut = " btn_clearData(); " />
   
</ td >  

js代码:
function setData(commentaryData){
    btn_clearData();
    setOffsets();
    var xmlDoc
=commentaryData.documentElement;
    
    var val
=xmlDoc.getElementsByTagName('value')[0].firstChild.data;
    
if(val==1){
        var ID
=xmlDoc.getElementsByTagName('ID');
        var PLACE
=xmlDoc.getElementsByTagName('PLACE');
        var MEMO
=xmlDoc.getElementsByTagName('MEMO');
        
        
//alert(ID[0].firstChild.data);
        var row,row2,row3;
        var iddata,placedata,memodata;
        
//alert(dataDiv.innerHTML);
        for(var i=0;i<ID.length;i++){
            iddata
="说明书ID: "+ID[i].firstChild.data;
            placedata
="存放位置: "+PLACE[i].firstChild.data;
            
            row
=createRow(iddata);
            row2
=createRow(placedata);
            
            dataTableBody.appendChild(row);
            dataTableBody.appendChild(row2);
            
//alert(MEMO[i].firstChild.data);
            if(MEMO[i].firstChild.data!="1"){
                memodata
="备注: "+MEMO[i].firstChild.data;
                row3
=createRow(memodata);
                dataTableBody.appendChild(row3);
            }

        }

    }
else{
        iddata
="还没有记录! ";
        row
=createRow(iddata);
        
        dataTableBody.appendChild(row);
    }

}


var dataDiv;
var dataTable;
var dataTableBody;
var offsetEl;

function btn_clearData()
{
    var ind
=dataTableBody.childNodes.length;
    
for(var i=ind-1;i>=0;i--){
        dataTableBody.removeChild(dataTableBody.childNodes[i]);
    }

    dataDiv.style.border
="none";
}


function setOffsets()
{
    var end
=offsetEl.offsetWidth;
    var top
=calculateOffsetTop(offsetEl);
    dataDiv.style.border
="black 1px solid";
    dataDiv.style.left
=end+370+"px";
    dataDiv.style.top
=top+"px";
    
//alert(dataDiv.innerHTML);
}


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 createRow(data)
{
    var row,cell,txtNode;
    row
=document.createElement("tr");
    cell
=document.createElement("td");
    
    cell.setAttribute(
"bgcolor","#FFFAFA");
    cell.setAttribute(
"border",0);
    
    txtNode
=document.createTextNode(data);
    cell.appendChild(txtNode);
    row.appendChild(cell);
    
    
return row;
}

 

action代码:

 

/** 
     * 获得所有说明书
     
*/

    
public ActionForward doGetCommentary(
            ActionMapping mapping,
            ActionForm form,
            HttpServletRequest req,
            HttpServletResponse res)
{
        String blueprintID
=(String)req.getParameter("blueprintID");
        String folderID
=(String)req.getParameter("folderID");
        String fileboxID
=(String)req.getParameter("fileboxID");
        res.setContentType(
"text/xml;charset=GB2312");
        res.setHeader(
"Cache-Control","no-cache");
        String xml
="<?xml version=\"1.0\" encoding=\"GB2312\"?>";
        xml
+="<response>";
        logger.info(
"CommentaryAction_doGetCommentary_蓝图ID和文档ID和文档盒ID: "+blueprintID+";"+folderID+";"+fileboxID);
        List commlist
=commentaryService.getAllCommentary(blueprintID,folderID,fileboxID);
        
int i=commlist.size();
        
if(i==0){
            xml
+="<value>0</value>";
            xml
+="</response>";
        }
else{
            Iterator it
=commlist.iterator();
            
while(it.hasNext()){
                TbExponent te
=(TbExponent)it.next();
                xml
+="<ID>"+te.getId().getTbExponentFileId()+"</ID>";
                xml
+="<PLACE>"+te.getTbExponentPlace()+"</PLACE>";
                
if(!te.getTbExponentMemo().equals(""))
                    xml
+="<MEMO>"+te.getTbExponentMemo()+"</MEMO>";
                
else
                    xml
+="<MEMO>"+1+"</MEMO>";
                
//logger.info("CommentaryAction_doGetCommentary:"+xml);
            }

            xml
+="<value>1</value>";
            xml
+="</response>";
            logger.info(
"CommentaryAction_doGetCommentary:"+xml);
        }

        
        
try {
            res.getWriter().write(xml);
        }
 catch (IOException e) {
                        e.printStackTrace();
        }

        
return null;
    }

 

关键的代码已经贴出,希望对大伙有用。

参考书籍:《ajax基础教程》

posted on 2006-08-04 09:35 千山鸟飞绝 阅读(1641) 评论(0)  编辑  收藏 所属分类: Ajax

只有注册用户登录后才能发表评论。


网站导航:
 
正在阅读:



<2019年9月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

常用链接

留言簿(35)

随笔档案

文章分类

文章档案

好友的blog

我的其他blog

老婆的Blog

搜索

  •  

积分与排名

  • 积分 - 750297
  • 排名 - 50

最新评论

阅读排行榜

评论排行榜