用AJAX实现气泡提示

用AJAX实现气泡提示

                                    文/陈刚 www.chengang.com.cn （转载请注明）

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

HTML页面的代码：

<span id="content_<%=o.id%>" style="display:none">
    
<!-- Download Popup style=opacity: 0; visibility: hidden;-->
<table style="top:500px; left:600px;" class="popup">
  <tbody>
    <tr>
      <td class="corner" id="topleft"></td>
      <td class="top"></td>
      <td class="corner" id="topright"></td>
    </tr>
    <tr>
      <td class="left"></td>
      <td><table class="popup-contents">
        <tbody>
            <tr>
              <td><%=o.content%></td>
            </tr>
        </tbody>
      </table></td>
      <td class="right"></td>    
    </tr>
    <tr>
      <td id="bottomleft" class="corner"></td>
      <td class="bottom"><img src="/images/bubble-tail2.png" alt="popup tail" height="29" width="30"></td>
      <td class="corner" id="bottomright"></td>
    </tr>
  </tbody>
</table>
<!-- end download popup -->
</span>

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;
    }

然后给需要气泡提示的加上鼠标事件：

  < span  class = " l1 "  onmouseover = " Element.show('content_<%=o.id%>') "  onmouseout = " Element.hide('content_<%=o.id%>') " ><%= article_link_to(o.title,o.id) %></ span >

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

HTML页面代码改为：

< span id = " content_<%=o.id%> "  style = " display:none " ><%= o.content %></ span >

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


然后给需要气泡提示的加上鼠标事件。

     < span  class = " l1 "  onmouseover = " showPopup('content_<%=o.id%>',event); "  onmouseout = " hidePopup() " ><%= article_link_to(o.title,o.id) %></ span >

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 = '\
         < table style = " top:' + y + 'px; left:' + x + 'px; "  class = " popup " > \
           < tbody > \
             < tr > \
               < td class = " corner "  id = " topleft " ></ td > \
               < td class = " top " ></ td > \
               < td class = " corner "  id = " topright " ></ td > \
             </ tr > \
             < tr > \
               < td class = " left " ></ td > \
               < td >< table class = " popup-contents " > \
                 < tbody > \
                     < tr > \
                       < td > '  +  popup.innerHTML  +  ' </ td > \
                     </ tr > \
                 </ tbody > \
               </ table ></ td > \
               < td class = " right " ></ td > \
             </ tr > \
             < tr > \
               < td id = " bottomleft "  class = " corner " ></ td > \
               < td class = " bottom " ><!--< img src = " /images/bubble-tail2.png "  alt = " popup tail "  height = " 29 "  width = " 30 " >--></ td > \
               < td class = " corner "  id = " bottomright " ></ td > \
             </ tr > \
           </ tbody > \
         </ table > ';
  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有一点问题，所以就没再用。

效果如下图所示：