Как создать AJAX-поп, извлекая данные из БД?

Question

Может кто-нибудь сказать мне, как создать хорошую маленькую подсказку, например, всплывающее окно ajax? ситуация такая, Я вытаскиваю заголовок $ row-> из базы данных, а затем представляю его в виде ссылки, подобной этой

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

когда случайный пользователь щелкает эту ссылку, я хочу, чтобы он создавал небольшой всплывающий элемент или всплывающую подсказку, содержащую описание заголовка $ row-> description, и когда пользователь убирает с нее мышь, он закрывается. я знаю, что это возможно, но я просто не знаю, как это сделать.

Answer 1

Вам нужно 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.

Answer 2

что-то вроде следующего?

AJAX, чтобы получить описание, и когда вы получите ответ, создайте описание 'box'

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 в этих двух строках)

Answer 3

Проверьте этот плагин jQuery: http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/