Tuổi : 33 Posts : 2319 Points : 6889 Thanked : 77 10/12/2010 Birthday : 27/02/1991 Đến từ : Hải Phòng I'm : Status : DarkNo1<=> ClubTeen9x avatar-dulieu : 57,13100|50,11784|49,10840|64,12636|51,11465|48,12265|58,12156|66,11440 Admin Tuổi : 33 Posts : 2319 Points : 6889 Thanked : 77 10/12/2010 Birthday : 27/02/1991 Đến từ : Hải Phòng I'm : Status : DarkNo1<=> ClubTeen9xavatar-dulieu : 57,13100|50,11784|49,10840|64,12636|51,11465|48,12265|58,12156|66,11440
Thông tin thành viên : Click ! Posts : 2319
Points : 6889
Thanked : 77
10/12/2010
Birthday : 27/02/1991
Đến từ : Hải Phòng
I'm : Status : DarkNo1<=> ClubTeen9x
avatar-dulieu : 57,13100|50,11784|49,10840|64,12636|51,11465|48,12265|58,12156|66,11440
Tuổi : 33 Posts : 2319 Points : 6889 Thanked : 77 10/12/2010 Birthday : 27/02/1991 Đến từ : Hải Phòng I'm : Status : DarkNo1<=> ClubTeen9xavatar-dulieu : 57,13100|50,11784|49,10840|64,12636|51,11465|48,12265|58,12156|66,11440
Shop Avatar
Tiêu đề: [Fmvi-Group] Hướng dẫn thêm tooltip đầy đủ thông Wed Jan 04, 2012 7:41 am DarkNo1<=> ClubTeen9x
Tiêu đề: [Fmvi-Group] Hướng dẫn thêm tooltip đầy đủ thông --------------------------------------------------- Cho Ðiểm Chủ Ðề Này
Ghi chú: Thay vì sử dụng thống kê bài viết của baivong mới có tooltip đầy đủ thông tin. Bài này mình chỉ các bạn cài đặt tooltip đầy đủ thông tin vào trong bất cứ thống kê bài viết nào bạn muốn
.
Mình chỉ hướng dẫn 2 loại tooltip thông dụng hiện nay là tooltip mặc định của fm và dhtml tooltip. Hướng dẫn: Đọc kĩ và backup mod_recent_topics Display Templates Portal mod_recent_topics (Không đụng bất cứ cái gì ở giữa
<!-- BEGIN scrolling_row --> và
<!-- END scrolling_row --> )
Cho tất cả nội dung giữa <!-- BEGIN recent_topic_row --> và <!-- END recent_topic_row --> bằngCode:chọn nội dung <div class="newltopic">[nội dung ở giữa 2 cái trên]</div>
Tìm (Cái này dựa trên tiêu đề mặc định, ai mà cài tooltip vào tiêu đề thì nó sẽ khác) Code:chọn nội dung <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
Thay bằngTooltip mặc định của fm: Code:chọn nội dung <div onmouseover="show_tooltip(this.getElementsByTagName('div')[0].innerHTML);" onmouseout="hidetip();"><span class="ltitletopic" style="font-size:11px;font-weight:bold"><a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE} </a></span><div class="tooltipFMvi" style="display:none"><img src="https://i.servimg.com/u/f48/16/58/89/73/loadin10.gif" /> Loading</div></div>
Dhtml tooltip: Code:chọn nội dung <div onmouseover="showtip(this.getElementsByTagName('div')[0].innerHTML);" onmouseout="hidetip();"><span class="ltitletopic" style="font-size:11px;font-weight:bold"><a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE} </a></span><div class="tooltipFMvi" style="display:none"><img src="https://i.servimg.com/u/f48/16/58/89/73/loadin10.gif" /> Loading</div></div>
Tìm tiếpCode:chọn nội dung {classical_row.recent_topic_row.switch_poster.S_POSTER}
Thay bằngCode:chọn nội dung <span class="lpostertopic">{classical_row.recent_topic_row.switch_poster.S_POSTER}</span>
Tìm tiếpCode:chọn nội dung {classical_row.recent_topic_row.S_POSTTIME}
Thay bằng (Bỏ style="display:none" nếu không muốn ẩn thời gian) Code:chọn nội dung <span class="ltimetopic" style="display:none">{classical_row.recent_topic_row.S_POSTTIME}</span>
Bỏ code này ở dưới cuốiCode:chọn nội dung <script type="text/javascript"> $(function() {$(".newltopic").each(function(a) {$(this);$(this).attr("id", "newlast" + a);a = $(this).attr("id");$(this).find(".ltitletopic").next().attr("alt", a);$(this).find(".ltitletopic").attr("alt", a);$(this).find(".lpostertopic").attr("alt", a);$(this).find(".ltimetopic").attr("alt", a);var b = $(this).find(".ltitletopic[alt='" + a + "']").text(),tieude = $(this).find(".ltitletopic[alt='" + a + "']").text(),d = $(this).find(".ltimetopic[alt='" + a + "']").text(),thoigian = $(this).find(".ltimetopic[alt='" + a + "']").text(),e = b.replace(/ /gi, "+"),f = $(this).find(".ltitletopic[alt='" + a + "']").next();f.load("/search?mode=searchbox&search_keywords=" + e + '&show_results=topics tr.layemno:contains("' + b + '"):contains("' + d + '")', function() {var d = $(this).find("#tacgiamt a[href^='/u']").text(),e = $(this).find(".row3:first").text(),f = $(this).find(".row2:first").text(),g = $(this).find(".row2:last").text(),j = $(".lpostertopic[alt='" + a + "']").text();$(this).html('<b><span class="tipfont">Title:</span> ' + tieude + '</b><hr><span class="tipfont">Author:</span> ' + d + '<br><span class="tipfont">Last poster:</span> ' + j + '<br><span class="tipfont">Last post time:</span> ' + thoigian + '<hr><span class="tipfont">Category:</span> ' + e + '<br><span class="tipfont">Views:</span> ' + g + '<br><span class="tipfont">Replies:</span> ' + f + "<br>");})})}); </script>
Tooltip mặc định của fm là tooltip có sẵn trong những last topics của thuan007 ( đã hướng dẫn trong bài viết), dhtml tooltip là tooltip chinhphuc đang sử đụng
Hướng dẫn cài đặt tooltip (Lưu ý: Những ai đang xài last topics của thuan007 và c3zone thì khỏi cần cài Display Template overall_footer Cho code này vào cuốiTooltip mặc định của fm: Code:chọn nội dung <script src="https://illiweb.com/rs3/24/frm/admin/admin.js" type="text/javascript"></script>
Dhtml tooltip: Code:chọn nội dung <script src="http://en.fmvi.org/h4-tooltip" type="text/javascript"></script>
Display Color CSS [spoiler=Tooltip mặc định của fm]Code:chọn nội dung #tooltip { padding:0; max-width: 50% !important; color: #000; background: #cfe0fa none ; _background-image: none; border: 2px #fff solid; -moz-border-radius: 3px;border-radius: 3px; font-size:0.8em;text-align: left; } * html #tooltip { width: 30%; } #tooltip * { margin:2px 5px 2px 8px; } #tooltip ul { padding: 0px 0px 0px 20px; } #tooltip dl { clear:both; position:relative; margin-bottom: 10px; } #tooltip dt { float:left; border: medium none; padding-top: 3px; width: 50%; } #tooltip dd { margin-left: 50%; padding-left: 5px; vertical-align: top; } #tooltip p.header { margin:0; font-size:13px; color: green; padding: 1px 5px; background: #cfe0fa repeat; font-weight: bold; border-bottom:0px; } #tooltip p { padding: 6px; color: #666666; font-size:11px;text-align: left; } .title_small{padding: 2px; border-bottom: 1px #DBDBDB dashed; font-size: 10px; font-style: italic;}
Dhtml tooltip: Code:chọn nội dung #dhtmlpointer, #dhtmltooltip { z-index: 999; left: -300px;visibility: hidden; position: absolute; } #dhtmltooltip { border: #666 2.4px solid; -moz-opacity: 0.8; /* lam mo tooltip FF */ opacity: 0.8; /* lam mo tooltip Opera */ filter: alpha(opacity=80); /* lam mo tooltip IE */ -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 10px; font-size: 10pt; font-family: Arial; background-color: #fff; width: auto; max-width: 340px; /* chieu rong toi da cho FF */ width:expression( document.body.clientWidth > 340? "340px": "auto" ); /* chieu rong toi da cho IE */ text-align:left; }