You are not connected. Please login or register

  1. ☆SimonFounder

    avatar
    Giới tính :
    Nam
    Số bài viết :
    205
    Tham gia :
    20/01/2012
    ]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 Twisted Evil. 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 --><!-- END scrolling_row -->)
    1. Cho tất cả nội dung giữa <!-- BEGIN recent_topic_row --><!-- END recent_topic_row --> bằng
      Code:
      <div class="newltopic">[nội dung ở giữa 2 cái trên]</div>
    2. 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:
      <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
      Thay bằng
      Tooltip mặc định của fm:
      Code:
      <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="http://i48.servimg.com/u/f48/16/58/89/73/loadin10.gif" /> Loading</div></div>
      Dhtml tooltip:
      Code:
      <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="http://i48.servimg.com/u/f48/16/58/89/73/loadin10.gif" /> Loading</div></div>
    3. Tìm tiếp
      Code:
      {classical_row.recent_topic_row.switch_poster.S_POSTER}
      Thay bằng
      Code:
      <span class="lpostertopic">{classical_row.recent_topic_row.switch_poster.S_POSTER}</span>
    4. Tìm tiếp
      Code:
      {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:
      <span class="ltimetopic" style="display:none">{classical_row.recent_topic_row.S_POSTTIME}</span>
    5. Bỏ code này ở dưới cuối
      Code:

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

    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
    1. Display >> Template >> overall_footer >> Cho code này vào cuối
      Tooltip mặc định của fm:
      Code:
      <script src="http://illiweb.com/rsc/24/frm/admin/admin.js" type="text/javascript"></script>
      Dhtml tooltip:
      Code:
      <script src="http://en.fmvi.org/h4-tooltip" type="text/javascript"></script>
    2. Display >> Color >> CSS
      Tooltip mặc định của fm:
      Code:
       #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:
      #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; }


    - Nguồn : Fmvi

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Create a free blog
© 2012 Zone-A7
FM PunBB - Rip by Simon