#93411 gửi bởi vianninhtoquoc
Ngày 08 Tháng 08 2011 , 04:24
Phần 1: Biếu 500đ hình ảnh
tooltip.jpg


Phần 2: Thực hành

Bước 1: Mở file footer.tpl trong themes/ten_theme/layout/ thêm vào trong thẻ <HTML> ... </HTML> (tốt nhất là nên đặt dưới cùng cho đỡ nhầm lần).

Và thêm đoạn:
Mã: Chọn hết
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
var tip = null;

$(".tooltip").hover(function(){

//Caching the tooltip and removing it from container; then appending it to the body
tip = $(this).find('.tip').remove();
$('body').append(tip);
tip.show(); //Show tooltip

}, function() {

tip.hide().remove(); //Hide and remove tooltip appended to the body
$(this).append(tip); //Return the tooltip to its original position

}).mousemove(function(e) {
//console.log(e.pageX)
if ( tip == null ) return;
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip

//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
var tipVisY = $(window).height() - (mousey + tipHeight);

if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
$(this).find('.tip').css({ top: mousey, left: mousex });
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
tip.css({ top: mousey, left: mousex });
} else {
tip.css({ top: mousey, left: mousex });
}
});
});
</script>


Bước 2: Mở file news.css trong mục themes/ten_theme/css/

Thêm đoạn:

Mã: Chọn hết
/*--Tooltip Styles--*/
.tip {
color: #000000;
background:#fffccc;
padding:8px;
position:absolute;
z-index:1000;
border: 1px solid #ffd800;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:320px;
}
.tooltip .tip { display:none; }
.tip .tooltip_img{
border:#ffe13b 1px solid;
background: #FFFFFF;
margin-top: 3px;
padding:2px;
}


Bước 3: Mở file muốn chèn đoạn chạy tooltip. trong mục themes/ten_theme/modules/news/

Ví dụ theo site của tôi thì tôi đặt vào file viewcat_main_bottom.tpl (Chủ đề, các tin khác nằm bên dưới).

Tìm đến đoạn:

Mã: Chọn hết
<!-- BEGIN: related -->
<hr />
<ul class="reset related">
<!-- BEGIN: loop -->
<li>
<a title="{OTHER.title}" href="{OTHER.link}">{OTHER.title}</a>
</li>
<!-- END: loop -->
</ul>
<!-- END: related -->


Thay bằng:

Mã: Chọn hết
<!-- BEGIN: related -->
<hr/>
<ul class="reset related">
<!-- BEGIN: loop -->
<li>
<a class="tooltip" href="{OTHER.link}">{OTHER.title}
<span class="tip">
<img class="tooltip_img margin-right_10 fl" src="{OTHER.imghome}" width="{IMGWIDTH}"/>
<p align="justify">{OTHER.hometext}</p>
</span>
</a>
</li>
<!-- END: loop -->
</ul>
<!-- END: related -->


Tương tự ở các vị trí khác (detail.tpl , các block ) các bạn tự thêm vào.
Chúc thành công

Demo (kèm quảng cáo :D) : http://vinacomin.net.vn
Đính kèm
(531.92 KB) Đã tải về 3.367 lần
#93420 gửi bởi nnhlinh
Ngày 08 Tháng 08 2011 , 05:44
=D> =D> =D> Rất cảm ơn tinh thần chia sẻ, Demo rất hay;
Đề nghị đội code nghiên cứu tối ưu vào code để dùng, mình thấy rất đẹp và Pro! :x

“To be or not to be, that's a question'' - Tồn tại hay không tồn tại ? - Tôi tư duy nghĩa là tôi tồn tại. Hamlet - Shakespeare Hasitec Co.Ltd : http://hasitec.vn & http://hasitec.com.vn
#93459 gửi bởi vianninhtoquoc
Ngày 08 Tháng 08 2011 , 13:09
xuanthao đã viết:Sao dùng FF 5 lại chẳng thấy gì ta, mà dưới footer lại thấy toàn lỗi????


Chèn đúng chỗ chưa đại ca? Tôi dùng FF5 vẫn chạy ngon. Có thể đại ca đặt đoạn script đó ngoài thẻ <HTML> code script </HTML> rồi
#93475 gửi bởi maolivn
Ngày 08 Tháng 08 2011 , 23:59
Thanks. Tooltip rất hay :D.
Nhưng cho mình hỏi 1 chút. Đó là khi mình bỏ tính năng "Kích hoạt toàn site" trong ACP thì tooltip chạy bình thường. Nhưng khi mình thêm xong và bật lại thì tooltip không thể hiện được, và nội dung bị nhảy lung tung.

www.nguoinhaque.com
#93476 gửi bởi vianninhtoquoc
Ngày 09 Tháng 08 2011 , 00:11
maolivn đã viết:Thanks. Tooltip rất hay :D.
Nhưng cho mình hỏi 1 chút. Đó là khi mình bỏ tính năng "Kích hoạt toàn site" trong ACP thì tooltip chạy bình thường. Nhưng khi mình thêm xong và bật lại thì tooltip không thể hiện được, và nội dung bị nhảy lung tung.


Mình bật chức năng đó dùng vẫn bình thường mà, bạn thử xóa sạch cache đi xem sao?
#93485 gửi bởi maolivn
Ngày 09 Tháng 08 2011 , 03:19
ViAnNinhToQuoc đã viết:
maolivn đã viết:Thanks. Tooltip rất hay :D.
Nhưng cho mình hỏi 1 chút. Đó là khi mình bỏ tính năng "Kích hoạt toàn site" trong ACP thì tooltip chạy bình thường. Nhưng khi mình thêm xong và bật lại thì tooltip không thể hiện được, và nội dung bị nhảy lung tung.


Mình bật chức năng đó dùng vẫn bình thường mà, bạn thử xóa sạch cache đi xem sao?


Thanks. Mình xoá cach và làm được rồi. :)
P/S: Ah mà bạn có thể chỉ mình cách làm cái headline giống trang của bạn được k :D.
Sửa lần cuối bởi maolivn vào Ngày 09 Tháng 08 2011 , 04:55, với tổng số 1 lần sửa.

www.nguoinhaque.com
#93488 gửi bởi taybac
Ngày 09 Tháng 08 2011 , 04:04
Làm như của bác , chỉ khác đoạn cuối mình sửa file viewcat_main_right.tpl , vậy mà không thấy hiển thị gì vậy ??

Theme modern Nukeviet 3.3 đấy : http://thuthuatvn.net Mời các bạn ghé thăm
#93495 gửi bởi vianninhtoquoc
Ngày 09 Tháng 08 2011 , 05:33
Taybac đã viết:Làm như của bác , chỉ khác đoạn cuối mình sửa file viewcat_main_right.tpl , vậy mà không thấy hiển thị gì vậy ??


Mình nghĩ bạn làm chưa chuẩn ở bước nào đó, hoặc có thể chưa xoá cache. :)