改良后的boxover

tooltip 显示框 ，用ajax获取提示信息

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)" onclick="upgrade_info('msg1',<%=b.id%>);hideBox();showTooltip=0;" title="header=[<%=b.name%>] body[]" onmouseover="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.效果图


这个是 我开发一个游戏的时候 客户给的

评论

1 楼 nookiehuihui 2010-10-15  

能不能在boxover中添加function