改良後的boxover

[b]tooltip 顯示框 ，用ajax獲取提示信息 [/b]

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]

這個是 我開發一個遊戲的時候 客戶給的