db에서 데이터를 가져 오는 ajax pop을 만드는 방법은 무엇입니까?

Question

누군가 아약스 팝업과 같은 멋진 작은 툴팁을 만드는 방법을 말해 줄 수 있습니까? 상황이 은 내가 데시벨에서 $ 로우 -> 제목을 당기는하고 다음 나는 임의의 사용자가 해당 링크를 클릭이

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

같은 링크로 제시과 같이, 난에 원하는 제목 설명 $ row-> description을 포함하는 작은 팝업 또는 툴팁을 생성하고 사용자가 마우스를 움직이면 마우스가 닫힙니다. 나는 그것의 가능을 안다. 그러나 나는 단지 그것을하는 방법을 모른다.

Answer 1

당신은 jQuery이 필요합니다. 스타일 시트를 < 머리 > </머리 >에 추가하고 자바 스크립트를 페이지의 모든 위치에 추가하십시오.

샘플 스타일 :

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

자바 스크립트 :

코드

<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 온라인을 찾아보십시오.

끝을 폐쇄에 대한 제안은 다음에 onmouseout 이벤트 기능을 추가 (이미 바로 위의 라인에 약간의 팁을 이동, 그것은 링크 "mytitleelement"을 통해 알고) 단지 마우스 포인터 아래에 tipel을 배치 할 것 tipel 것을 :

가

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

(당신이 떨어져 그 2 개 라인 this를 사용하는 대신 tipel과 함께 얻을 수 있습니다)