Question

有人能告诉我如何创建像ajax弹出窗口这样漂亮的小工具提示吗？情况是这样的，我从数据库中提取$ row-＆gt;标题，然后我将其显示为此链接

  <?php foreach($task->result() as $row): ?>
    <tr>
    <td><a href=#><?php echo $row->title; ?></a></td>
    </tr>
   <?php endforeach; ?>

当随机用户点击该链接时，我希望它生成一个小弹出窗口或工具提示，其中包含标题描述$ row-＆gt;描述的内容，当用户从中移动鼠标时，它会关闭。我知道它可能，但我只是不知道该怎么做。

Answer 1

您需要jQuery。将样式表添加到＆lt; head＆gt;＆lt; / head＆gt;和javascript到你网页的任何地方。

样本风格：

<style type="text/css">
  .description {
    visible: hidden;
    position: absolute;
    left: 0px;
    top: 0px;

    /* View */
    font-family: Arial,Tahoma,Verdana;
    font-size: 8pt;
    color: #bbb;
    background-color: #444;
    padding: 5px 7px;
    border: 1px solid #222;
  }
</style>

使用Javascript：

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // Add listener to links
  $(".some_class").click(function(e) {
    var description = $('<div class="description">'+ $(this).attr("description") +'</div>');
    $(this).append(description);
    description.css("left", e.pageX-4);
    description.css("top", e.pageY-4);
    description.animate({ opacity: 'toggle' }, 400, 'linear');
    // Remove description, if user moved the mouse cursor out description
    description.mouseout(function() {
      $(this).remove();
    });
    return false;
  });
});
</script>

更改您的代码：

<?php foreach($task->result() as $row): ?>
  <tr>
  <td><a href="#" class="some_class" description="<?php echo $row->description; ?>"><?php echo $row->title; ?></a></td>
  </tr>
<?php endforeach; ?>

但更好的方法是查看一些好的jQuery插件..

Answer 2

查看此jQuery插件：http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/

Answer 3

类似以下内容？

AJAX获取描述，当您收到回复时，创建描述'框'

var tipel = document.createElement('div');  
tipel.innerHTML = descr;`

将其添加到页面

var bodyel = document.getElementsByTagName('body').item(0);
bodyel.appendChild(tipel);`

并将其定位为：

tipel.style.position = "absolute";
tipel.style.top = newfntogetabsolutecoord_top(document.getElementById("mytitleelement"));
tipel.style.left = newfntogetabsolutecoord_left(document.getElementById("mytitleelement"));`

获得元素的绝对坐标可能很棘手，在网上寻找fn。

关闭提示，建议将tipel放在鼠标指针下方（您已经知道它在链接"mytitleelement"上方，只需将提示移到上面的一行中），并且然后将onmouseout事件函数添加到tipel：

tipel.style.display = "none"; //hides or
tipel.parentNode.removeChild(tipel); //removes it from the page

（您可能会在这两行中使用this代替tipel）

如何创建一个从db中提取数据的ajax pop？

3 个答案: