Monday, May 20, 2013

Hiển thị 1 page khác lên tooltip

Để hiển thị thông tin từ 1 trang khác trong tooltip, ta làm như sau:
1) Download gói tooltip gồm 2 file: sticky.jssticky.css.
2) Nhúng 2 gói trên vào phần head của trang web.

<script src="tooltip/sticky.js"></script>
<link rel="stylesheet/css" href="tooltip/sticky.css">
3) Tạo hàm javascript hiển thị tooltip:

function showtooltip(trangxuly){
$('#sticky').html('<center>Loading...</center>');
$('#sticky').load(trangxuly);
}
4) Thêm thành phần có id là sticky vào trang HTML:

<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky" style="width:350px; vertical-align:top; padding:0"><center><img src='/image/loading.gif'></center></div>
</div>
</div>

5) Gắn thuộc tính:
<a data-tooltip='sticky' onMouseOver='showtooltip("tinchitiet.php")'>Xem thông tin chi tiết</a>

0 comments:

Post a Comment