当前位置: 动力学知识库 > 问答 > 编程问答 >

php - how to create an ajax pop pulling a data from db?

问题描述:

can someone tell me how to create a nice small tooltip like ajax pop-up ?

the situation is like this,

I am pulling the $row->title from the db, and then I presented it as a link like this

 <?php foreach($task->result() as $row): ?>

<tr>

<td><a href=#><?php echo $row->title; ?></a></td>

</tr>

<?php endforeach; ?>

when a random user clicks that link, I want it to produce a small pop-up or tooltip like stuff that contains the title's description $row->description , and when user moves mouse from it,it closes. i know its possible, but i just don't know how to do it.

网友答案:

You need jQuery. Add stylesheet into <head></head> and javascript to any place in your page.

Sample style:

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

Change your code:

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

But the better way is to check out some good jQuery plugin..

网友答案:

Check out this jQuery plugin: http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/

网友答案:

something like the following?

AJAX to get the description and when you're received the response create the description 'box'

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

add it to the page

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

and position it like:

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

getting absolute coords of an element can be tricky, look for a fn online.

for closing the tip, a suggestion would be placing tipel just under the mouse pointer (you already know it's over the link "mytitleelement", just shift the tip a little in the lines above), and then add an onmouseout event function to tipel that:

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

(you might get away with using this instead of tipel in those 2 lines)

分享给朋友:
您可能感兴趣的文章:
随机阅读: