如何创建一个从数据库中抽取数据的ajax pop？

有人能告诉我如何创建一个像AJAX弹出一个不错的小工具提示？的情况是这样的，我从DB拉动$按行>标题，然后我提出它作为这样如何创建一个从数据库中抽取数据的ajax pop？

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

当随机用户点击该链接

一个链接，我希望它产生一个小的弹出窗口或工具提示，如东西，其中包含标题描述$ row-> description，当用户从中移动鼠标时，它将关闭。我知道它是可能的，但我不知道该怎么做。

来源

2010-02-11 sasori

你需要jQuery。将样式表添加到<头部> < /头部>和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插件..

来源

2010-02-15 08:01:06 Vladimir

但描述不能包含html标签秒。 – Vladimir 2010-02-15 12:29:49

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

来源

2010-02-11 18:51:30

像下面这样的东西？

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

（你也许可以侥幸逃脱那些2线使用this代替tipel）

来源

2010-02-12 08:54:05

如何创建一个从数据库中抽取数据的ajax pop？

回答

相关问题