2013-10-04 2 views
1

qtip2 jquery 플러그인을 사용하여 내용이 담긴 작은 ips팁/풍선을 만들려고합니다. 여기 자신의 .js 및 .CSS 파일 :qtip2 풍선 및 PHP 테이블 : 각 행마다 풍선 내용이 다릅니 까?

http://qtip2.com/download

내가이 MySQL의에서 PHP에 의해 채워집니다 테이블에 대해 작업하고 싶다. 나는 다음과 같은 테이블을 만들고있다 :

<tbody> 
    <?php while($row = MySQL_fetch_array($result)): ?> 
     <tr> 
      <td title="lname" width="100px"> 
       <div style="width:100px; overflow:hidden;"> 
        <?php echo(htmlentities($row['last_name'])); ?> 
       </div> 
      </td> 
      <td title="fname" width="100px"> 
       <div style="width:100px; overflow:hidden;"> 
        <?php echo(htmlentities($row['first_name'])); ?> 
       </div> 
      </td>  
      <td width="100px"> 
       <div style="width:100px; overflow:hidden;"> 
        <?php echo(htmlentities($row['u_name'])); ?> 
       </div> 
      </td> 
      <td width="100px"> 
       <div style="width:150px; overflow:hidden;"> 
        <?php echo(htmlentities($row['skype_id'])); ?> 
       </div> 
      </td> 
     </tr> 
    <?php endwhile; ?> 
</tbody> 

모든보기 싫은 div는 더 정렬되어 보이게한다. 어쨌든 ... 여기 툴팁 스크립트가있다 :

 <script>$('td[title]').qtip({ 
        show:'click', 
        hide:'unfocus', 
        content: { 
         text: "<?php echo(htmlentities($row['last_name'])); ?>" 
        } 

       }); 
     </script> 

문제는 ... 난 단지는 '제목'과 모든 셀에 대해 동일한 길래 내용을 표시 할 수 있습니다. 풍선에 각 $ 행의 내용을 표시하고 싶습니다. 내가 어떻게이 일을 성취 할 수 있을지 생각해? documentation 당으로

답변

1

:

또한 각 연속 공연 이벤트를 실행하는 컨텐츠를 반환하는 기능을 지정할 수 있습니다. 이 함수는 정적 텍스트 콘텐츠 (텍스트 또는 HTML) 또는 지연 객체 (아래 참조)를 모두 반환 할 수 있습니다.이 함수는 대상 요소로 범위와 함께 실행되며 각각 이벤트 및 api 인수와 함께 과 함께 실행됩니다.

그래서 당신은이 작업을 수행 할 수 있습니다

content: { 
    text: function() {return $(this).closest("tr").find("[title=lname]").text();} 
} 

아이디어는 어떻게 든 툴팁의 텍스트를 생산하기 위해, 우리는 td[title] 알고 대상 요소 범위 (this)에서 시작된다. 마크 업에있는 해당 텍스트의 유일한 인스턴스가 td[title=lname] 안에 있기 때문에 코드는 해당 텍스트를 찾아 텍스트를 반환합니다.

+0

아하하. 좋아요 ... 풍선에서 원하는 내용이 mysql에서 나온 것이지만 테이블에 표시하고 싶지 않은 내용입니까? 내가 테이블에 내용을 검색하고 그 열에 대해 "display : none"을해야합니까? 또는 더 좋은 방법이 있습니까? – user2747609

+0

@ user2747609 : 데이터 속성에 넣으세요. ''. 이것은 유효한 HTML이며, 표시되지 않으며 여전히 $ (...). attr ("data-whatever")로 가져올 수 있습니다. 또는'var foo = '그리고 그것을 참조하지만 상황이 복잡하지 않으면 IMHO는 아무런 효과가 없다. – Jon

+0

이 간단한 예제가 왜 효과가 없는지 아십니까? http://jsfiddle.net/rNKbZ/ – user2747609