db bir veri çekerek bir ajax pop oluşturmak nasıl?

3 Cevap php

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

rastgele bir kullanıcı bu linki tıkladığında, ben bu başlığın açıklaması $ row-> açıklamasını içeren şeyler gibi küçük bir pop-up ya da araç ipucunu üretmek isteyen, ve kullanıcı ondan fare hareket ettiğinde, o kapanır. i mümkün biliyorum, ama ben sadece bunu yapmak için nasıl bilmiyorum.

3 Cevap

İhtiyacınız jQuery. içine stil ekle ve sayfanızda herhangi bir yere javascript.

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

Kodunuzu değiştirin:

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

Ama daha iyi bir yol bazı iyi jQuery eklentisi kontrol etmektir ..

Bu jQuery eklentisi Çıkış: http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/

aşağıdaki gibi bir şey?

AJAX açıklama almak ve aldığınız yaparken tepki açıklaması 'kutu' yaratmak

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

sayfa eklemek

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

ve bu gibi konumlandırmak:

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

Bir elemanın mutlak coords almak zor olabilir, çevrimiçi bir fn arayın.

ucu kapatılması için, bir öneri, (zaten bu bağlantı üzerinden biliyorum "mytitleelement", yukarıdaki satırlarda Öneri biraz kayması) sadece fare işaretçisi altında tipel yerleştirerek olacaktır ve ardından tipel Bu bir onmouseout olay işlev eklemek:

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

(Bu 2 satır this yerine tipel kullanarak kaçabilirsiniz)

etiketler