1.載入
<script type="text/javascript" src="/javascripts/custom_boxover.js"></script>
<script type="text/javascript" src="/javascripts/prototype.js"></script>
<script src="/javascripts/castle/get_building_info.js" language="javascript"></script>
2.前臺顯示
<a id="b<%=b.id%>" href="javascript:void(0)" οnclick="upgrade_info('msg1',<%=b.id%>);hideBox();showTooltip=0;" title="header=[<%=b.name%>] body[]" οnmοuseοver="get_building_tooltip(this,<%=b.id%>)" displayed="0"></a>
displayed="0" 爲了只獲取一次信息 ,減少重複的請求。
3.js代碼
function get_building_tooltip(element,b_id){
var attributes=element.attributes;
var displayed=attributes.getNamedItem("displayed").value;
if(parseInt(displayed)==0){
b_id=parseInt(b_id);
new Ajax.Request('/test/index',{
method: 'get',
parameters: {overview_b_id: b_id},
onSuccess: function(transport){
var info=transport.responseText.split('#;#');
var header=info[0];
var body=info[1];
element.boBDY=body;
element.boHDR=header;
element.hasBox=1;
element.title='';
if(showTooltip)
showBox();
attributes.getNamedItem("displayed").value=1;
}
});
}
}
4.後臺ajax返回的數據
class TestController < ApplicationController
def index
render :text => 'aaaaaaa #;# bbbbbb'
end
end
5.效果圖
[img]http://dl.iteye.com/upload/attachment/171515/8f9d09a0-5a3e-3629-9a04-f556fae33013.jpg[/img]
這個是 我開發一個遊戲的時候 客戶給的