用AJAX实现气泡提示

 

这个效果的实现是以网站http://www.panic.com/coda/为模仿对象（选择Download可以看到气泡提示效果），然后重新用Rails中的prototype.js来实现。

HTML页面的代码：

    


 
   
     
     
     
   
   
     
     
          
   
   
     
     
     
   
 

	<%=o.content%>

CSS的代码（涉及到的相关图片：bubble.rar）：
/* Bubble pop-up */
.popup {
    position: absolute;
    z-index: 50;
    border-collapse: collapse;
       /* width:500px;
    visibility: hidden; */
}

.popup td.corner {height: 15px;    width: 19px;}
.popup td#topleft { background-image: url(/images/bubble-1.png); }
.popup td.top { background-image: url(/images/bubble-2.png); }
.popup td#topright { background-image: url(/images/bubble-3.png); }
.popup td.left { background-image: url(/images/bubble-4.png); }
.popup td.right { background-image: url(/images/bubble-5.png); }
.popup td#bottomleft { background-image: url(/images/bubble-6.png); }
.popup td.bottom { background-image: url(/images/bubble-7.png); text-align: center;}
.popup td.bottom img { display: block; margin: 0 auto; }
.popup td#bottomright { background-image: url(/images/bubble-8.png); }

.popup table.popup-contents {
    font-size: 12px;
    line-height: 1.2em;
    background-color: #fff;
    color: #666;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    }

table.popup-contents th {
    text-align: right;
    text-transform: lowercase;
    }
    
table.popup-contents td {
    text-align: left;
    }

然后给需要气泡提示的加上鼠标事件：
 ')" onmouseout="Element.hide('content_<%=o.id%>')"><%=article_link_to(o.title,o.id)%>


二、继续改进
气泡提示的外围HTML表格代码可以改由javascript来动态生成，这样可以缩小一些页面的总HTML大小。

HTML页面代码改为：
" style="display:none"><%=o.content%>其他想法：本来打算把文章内容（气泡显示的内容），直接传入javascript函数showPopup里。但由于其字符串较复杂，需要对一些特殊字符进行转义才可以当成字符串传入，而转义需要通写Rails方法来实现，大量的字符搜索替换恐怕会增加服务器的负担。所以这里还是用一个html元素暂存气泡内容。


然后给需要气泡提示的加上鼠标事件。
    ',event);" onmouseout="hidePopup()"><%=article_link_to(o.title,o.id)%>

CSS的代码不变。

写两个javascript函数：
function showPopup(element_id,event){
  var div = createElement("div");  
  div.id = "popup";
  //div.style.display="none";
  var popup = $(element_id);
  //取得鼠标的绝对坐标
  var evt = event ? event : (window.event ? window.event : null);  
  var x = Event.pointerX(evt)+5;
  var y = Event.pointerY(evt)+5;
  div.innerHTML='\
        \
          \
            \
              \
              \
              \
            \
            \
              \
              \
                \
                    \
                      ' + popup.innerHTML + '\
                    \
                \
              \
              \
            \
            \
              \
              \
              \
            \
          \
        ';
  document.body.appendChild(div);
  //Element.show("popup");
}

function hidePopup(){
  Element.remove("popup");
}

function createElement(element) {
    if (typeof document.createElementNS != 'undefined') {
        return document.createElementNS('http://www.w3.org/1999/xhtml', element);
    }
    if (typeof document.createElement != 'undefined') {
        return document.createElement(element);
    }
    return false;
}


在javascript中渐显Effect.Appear有一点问题，所以就没再用。

效果如下图所示：