[Share]Last Topic lấy ý tưởng từ Tooltip FMvi version 2 và được viết bởi VanDonStar

Các chức năng mới trong phiên bản này:
Rút ngắn JS xuống mức tối thiểu nhất

Có thể chuyển qua các trang khác

Đối với thành viên sẽ có thêm các lựa chọn cho bài viết chưa có ai trả lời, bài viết từ lần truy cập trước, bài viết có bạn tham gia thảo luận

Chú ý: Phiên bản dành cho PunBB

Sau đây là hướng dẫn chi tiết về phiên bản tooltip này:

Đầu tiên tìm trong overall_header code sau :

Code:

    <div id="page-body">
                      <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                        <div id="outer-wrapper">
                            <div id="wrapper">
                              <div id="container">
                                  <div id="content">
                                    <div id="{ID_LEFT}">
                                        <!-- BEGIN giefmod_index1 -->
                                        {giefmod_index1.MODVAR}
                                        <!-- BEGIN saut -->
                                        <div style="height:{SPACE_ROW}px"></div>
                                        <!-- END saut -->
                                        <!-- END giefmod_index1 -->
                                    </div>
                                    <div id="main">
                                        <div id="main-content">

    <!-- BEGIN html_validation -->
                                        </div>
                                    </div>
                                  </div>
                              </div>
                            </div>
                        </div>
                      </div>
                  </div>
                </div>
            </div>
          </div>
      </div>
    </body>
    </html>
    <!-- END html_validation -->

Sửa thành

Code:

    <div id="page-body">
                      <div id="{ID_LEFT}">
                        <!-- BEGIN giefmod_index1 -->
                            {giefmod_index1.MODVAR}
                        <!-- BEGIN saut -->
                        <div style="height:{SPACE_ROW}px"></div>
                        <!-- END saut -->
                        <!-- END giefmod_index1 -->
                      </div>
                      <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                        <div id="outer-wrapper">
                            <div id="wrapper">
                              <div id="container">
                                  <div id="content">
                                    <div id="main">
                                        <div id="main-content">

    <!-- BEGIN html_validation -->
                                        </div>
                                    </div>
                                  </div>
                              </div>
                            </div>
                        </div>
                      </div>
                  </div>
                </div>
            </div>
          </div>
      </div>
    </body>
    </html>
    <!-- END html_validation -->




Chèn vào Css đoạn

Code:

    #DL_LastTopic,.DL_TooltipCCM{position:absolute;display:none;background-image:url(http://i48.servimg.com/u/f48/13/58/60/43/opacit10.png);padding:10px 20px;border-radius:5px;color:white;z-index:99;}
    .DL_Tooltip {display:none;}
    .TrangTruoc,.TrangSau{font:12px Courier;cursor:pointer;color:red;position:absolute;top:-29px;height:30px;width:30px;opacity:0.6;}
    .TrangTruoc:hover,.TrangSau:hover{opacity:1;}
    .TrangTruoc{right:40px;background:url(http://i48.servimg.com/u/f48/16/58/89/73/fancy_12.png) no-repeat;}
    .TrangSau{right:10px;background:url(http://i48.servimg.com/u/f48/13/58/60/43/fancy_10.png) no-repeat;}
    #Chon_LTopic{position:absolute;top:-30px;border:0;height:25px!important;left:11px;background:#627AAD;color:#DEDFDF;}
    .spanphai,.spanphailtp,.spanphaiccm{float:right;white-space:nowrap;width:45%;text-align:right;}
    .spanphai{width:30%;}
    .ccmvds{height:16px;}
    .tenltp,.tenccm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:55%;float:left;text-transform:capitalize;}
    #main-rf-content{position:relative;}




HTML + JS

Code:

    <!-- BEGIN classical_row -->
    <div class="module main bphai">
      <div class="main-head"><h3 id="TenLasttopic">Bài gửi sau cùng</h3></div>
      <div class="main-content" id="main-rf-content">
            <div id="rf-content">
          <!-- BEGIN recent_topic_row -->
              <div class="ltpvds">
              <span class="tenltp">♥ <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a></span>
                <span class="spanphailtp">{ON} <span class="ktthg">{classical_row.recent_topic_row.S_POSTTIME}</span> {BY}

          <!-- BEGIN switch_poster -->
          <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
          <!-- END switch_poster -->

          <!-- BEGIN switch_poster_guest -->
          {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
          <!-- END switch_poster_guest -->

          <!--
          <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
          -->
              </span>
              </div>
          <!-- END recent_topic_row -->
      </div>
            <div id="TuyChonLastTopic">
              <div class="TrangTruoc" title="Tải dữ liệu trang trước"></div><div class="TrangSau" title="Tải dữ liệu trang tiếp theo"></div>
              <select id="Chon_LTopic">
                <option value="Bài gửi sau cùng">Bài gửi sau cùng</option>
                <option value="Bài chưa ai trả lời">Bài chưa ai trả lời</option>
                <option value="Bài mới từ lần truy cập trước">Bài mới từ lần truy cập trước</option>
                <option value="Bài có bạn tham gia thảo luận">Bài có bạn tham gia thảo luận</option>
              </select>
              </div>
            </div>
    <div id="DL_LastTopic"></div>
    </div>
    <!-- END classical_row -->
    <script type="text/javascript">
    //<![CDATA[
    $('#rf-content .tenltp a').each(function(){
      $(this).attr('href',$(this).attr('href').split('#')[0]);
      });
   
    t_lasttopic=0;
    $('.TrangTruoc').hide();
    $('.TrangTruoc').click(function(){TooltipVDS(-1);});
    $('.TrangSau').click(function(){TooltipVDS(1);});
    linklasttopic='/search?search_author=%2A&search_keywords&start=';
   
    if (!$('#logout').is(':visible'))$('#Chon_LTopic').hide();
   
    $('#Chon_LTopic').change(function(){
    $('#TenLasttopic').text($(this).val());
    if ($(this).val()=='Bài gửi sau cùng')
      {
        linklasttopic='/search?search_author=%2A&search_keywords&start=';
        t_lasttopic=1;
        TooltipVDS(-1);
      }
      else if ($(this).val()=='Bài chưa ai trả lời')
      {
        linklasttopic='/search?search_id=unanswered&start=';
        t_lasttopic=1;
        TooltipVDS(-1);
      }
      else if ($(this).val()=='Bài mới từ lần truy cập trước')
      {
        linklasttopic='/search?search_id=newposts&start=';
        t_lasttopic=1;
        TooltipVDS(-1);
      }
      else if ($(this).val()=='Bài có bạn tham gia thảo luận')
      {
        linklasttopic='/search?search_id=egosearch&start=';
        t_lasttopic=1;
        TooltipVDS(-1);
      }
    });
   
    $('#DL_LastTopic').ajaxStart(function(){$('#TuyChonLastTopic').fadeOut();});
    $('#DL_LastTopic').ajaxComplete(function(){$('#TuyChonLastTopic').fadeIn();});
   
    function TooltipVDS(trang_lt){
      t_lasttopic+=trang_lt;
      if (trang_lt!=0) $('#rf-content').html('<img src="http://i48.servimg.com/u/f48/13/58/60/43/loadin15.gif"></img>');
      $('#DL_LastTopic').load(linklasttopic+t_lasttopic*10+' form.frm-form .main-content .table .statused tr:lt(10)',function(){
      if ($('#DL_LastTopic').is(':empty'))
      {
        $('#rf-content').text('Hết dữ liệu');
        $('.TrangSau').hide();
      }
      else
      {
        $('.TrangSau').fadeIn();
        if (trang_lt!=0) $('#rf-content').empty();
        $('#DL_LastTopic tr').each(function(index){
        if (trang_lt!=0)
        {
          $('<div class="ltpvds"></div>').appendTo('#rf-content');
          $('<div class="tenltp"></div>').html('♥ '+$(this).find('td:first .topic-title').html()).appendTo('.ltpvds:last');
          $(this).find('td:eq(4) a:last').remove();
          $('<div class="spanphailtp"></div>').html($(this).find('td:eq(4)').html()).appendTo('.ltpvds:last');
          t_lasttopic>0 ? $('.TrangTruoc').fadeIn() : $('.TrangTruoc').hide();
        }
                  $('<div class="DL_Tooltip"></div>').appendTo('#DL_LastTopic');
                  $('<div></div>').html('Tiêu đề: <font color="yellow">'+$(this).find('td:first a.topictitle').text()+'</font>').appendTo('.DL_Tooltip:last');
                  $('<div></div>').html('Chuyên mục: <font color="crimson"><b>'+$(this).find('td:eq(1)').text()+'</b></font>').appendTo('.DL_Tooltip:last');
                  $('<div style="border-top:1px dotted white;padding-top:5px;margin-top:5px;"></div>').html('Người sáng lập: '+$(this).find('td:first a.gensmall').html()).appendTo('.DL_Tooltip:last');
                  $('<div></div>').html('Người gửi cuối: '+$(this).find('td:eq(4) a.gensmall').html()).appendTo('.DL_Tooltip:last');
                  $(this).find('td:eq(4) a.gensmall').remove();
                  guicuoi=$(this).find('td:eq(4)').text().replace(' by','');
                  $('<div></div>').html('Thời gian gửi: <font color="cyan">'+guicuoi+'</font>').appendTo('.DL_Tooltip:last');
                  $('<div style="padding-top:5px;"></div>').html('Trạng thái: <font color="chartreuse">'+$(this).find('td:first .status img').attr('alt').replace('New posts','Có bài viết mới').replace('No new posts','Không có bài viết mới').replace('This topic is locked','Chủ đề này đã bị khóa')+'</font>').appendTo('.DL_Tooltip:last');
                  $('<div style="border-bottom:1px dotted white;padding-bottom:5px;margin-bottom:5px;"></div>').html('Có <font color="yellow"><b>'+$(this).find('td:eq(3)').text()+'</b></font> lượt người xem và <font color="cyan"><b>'+$(this).find('td:eq(2)').text()+'</b></font> bài trả lời').appendTo('.DL_Tooltip:last');
                  $(this).find('td:first img[alt*="posted in this topic"]').length ? $('<div></div>').html($(this).find('td:first img[alt*="posted in this topic"]').attr('alt').replace('You have posted in this topic.','<font color="cyan">Bạn đã tham gia thảo luận tại chủ đề này</font>').replace('You have not posted in this topic.','<font color="red">Bạn chưa tham gia thảo luận tại chủ đề này</font>')).appendTo('.DL_Tooltip:last') : $('<div></div>').html('<font color="red">Bạn chưa tham gia thảo luận tại chủ đề này</font>').appendTo('.DL_Tooltip:last');
                  $(this).remove();
              });
      }
      });
      }

    $(window).load(function(){
      if ($('#DL_LastTopic').is(':empty'))
      {
      $('#DL_LastTopic').html('<img src="http://i48.servimg.com/u/f48/13/58/60/43/gsnjnw10.gif"></img>');
      TooltipVDS(0);
      }
      });
   
      $('#rf-content .tenltp a').live('mouseenter',function(){
      if ($('#DL_LastTopic').is(':empty'))
      {
      $('#DL_LastTopic').html('<img src="http://i48.servimg.com/u/f48/13/58/60/43/gsnjnw10.gif"></img>').ajaxComplete(function(){$('#DL_LastTopic .DL_Tooltip').filter(':eq('+$(this).parent().parent().index()+')').show();});
      TooltipVDS(0);
      }
      $('#DL_LastTopic').show();
      $('#DL_LastTopic .DL_Tooltip').hide();
      $('#DL_LastTopic .DL_Tooltip').filter(':eq('+$(this).parent().parent().index()+')').show();
      $(this).live('mousemove',function(event){$('#DL_LastTopic').css({'left':event.pageX-30,'top':event.pageY+30});});
      });
      $('#rf-content .tenltp a').live('mouseleave',function(){$('#DL_LastTopic').hide();});
    //]]>
    </script>

Hướng dẫn chi tiết JS cho các bạn nào muốn chỉnh sửa:

Code:

$('#rf-content .tenltp a').each(function(){
  $(this).attr('href',$(this).attr('href').split('#')[0]);
  });

Đoạn js này sẽ tự động loại bỏ phần đánh dấu trên trang khi các bạn bấm vào link trên lasttopic

Code:

t_lasttopic=0;
$('.TrangTruoc').hide();
$('.TrangTruoc').click(function(){TooltipVDS(-1);});
$('.TrangSau').click(function(){TooltipVDS(1);});
linklasttopic='/search?search_author=%2A&search_keywords&start=';

Đoạn js này sẽ đặt mặc định cho lasttpic lần đầu tiên sẽ chỉ load tooltip và thiết lập đường link đầu tiên cho lasttopic cùng các hàm cần chạy khi bấm vào nút chuyển trang.

Code:

if (!$('#logout').is(':visible'))$('#Chon_LTopic').hide();

Đoạn js này sẽ ẩn các chế độ tùy chọn cho thành viên khi chưa đăng nhập

Code:

$('#Chon_LTopic').change(function(){
$('#TenLasttopic').text($(this).val());
if ($(this).val()=='Bài gửi sau cùng')
  {
    linklasttopic='/search?search_author=%2A&search_keywords&start=';
    t_lasttopic=1;
    TooltipVDS(-1);
  }
  else if ($(this).val()=='Bài chưa ai trả lời')
  {
    linklasttopic='/search?search_id=unanswered&start=';
    t_lasttopic=1;
    TooltipVDS(-1);
  }
  else if ($(this).val()=='Bài mới từ lần truy cập trước')
  {
    linklasttopic='/search?search_id=newposts&start=';
    t_lasttopic=1;
    TooltipVDS(-1);
  }
  else if ($(this).val()=='Bài có bạn tham gia thảo luận')
  {
    linklasttopic='/search?search_id=egosearch&start=';
    t_lasttopic=1;
    TooltipVDS(-1);
  }
});

Đối với thành viên đã đăng nhập.
Đoạn JS này sẽ thay thế những đường link cơ bản để load dữ liệu khi chọn các tùy chọn tương ứng.

Code:

$('#DL_LastTopic').ajaxStart(function(){$('#TuyChonLastTopic').fadeOut();});
$('#DL_LastTopic').ajaxComplete(function(){$('#TuyChonLastTopic').fadeIn();});

Đoạn JS này sẽ ẩn những tùy chọn chuyển trang, chọn các mục tại select khi quá trình load dữ liệu hoạt động và hiện nó lên khi quá trình load hoàn thành.

Code:

function TooltipVDS(trang_lt){
  t_lasttopic+=trang_lt;
  if (trang_lt!=0) $('#rf-content').html('<img src="http://i48.servimg.com/u/f48/13/58/60/43/loadin15.gif"></img>');
  $('#DL_LastTopic').load(linklasttopic+t_lasttopic*10+' form.frm-form .main-content .table .statused tr:lt(10)',function(){
  if ($('#DL_LastTopic').is(':empty'))
  {
    $('#rf-content').text('Hết dữ liệu');
    $('.TrangSau').hide();
  }
  else
  {
    $('.TrangSau').fadeIn();
    if (trang_lt!=0) $('#rf-content').empty();
    $('#DL_LastTopic tr').each(function(index){
    if (trang_lt!=0)
    {
      $('<div class="ltpvds"></div>').appendTo('#rf-content');
      $('<div class="tenltp"></div>').html('♥ '+$(this).find('td:first .topic-title').html()).appendTo('.ltpvds:last');
      $(this).find('td:eq(4) a:last').remove();
      $('<div class="spanphailtp"></div>').html($(this).find('td:eq(4)').html()).appendTo('.ltpvds:last');
      t_lasttopic>0 ? $('.TrangTruoc').fadeIn() : $('.TrangTruoc').hide();
    }
              $('<div class="DL_Tooltip"></div>').appendTo('#DL_LastTopic');
              $('<div></div>').html('Tiêu đề: <font color="yellow">'+$(this).find('td:first a.topictitle').text()+'</font>').appendTo('.DL_Tooltip:last');
              $('<div></div>').html('Chuyên mục: <font color="crimson"><b>'+$(this).find('td:eq(1)').text()+'</b></font>').appendTo('.DL_Tooltip:last');
              $('<div style="border-top:1px dotted white;padding-top:5px;margin-top:5px;"></div>').html('Người sáng lập: '+$(this).find('td:first a.gensmall').html()).appendTo('.DL_Tooltip:last');
              $('<div></div>').html('Người gửi cuối: '+$(this).find('td:eq(4) a.gensmall').html()).appendTo('.DL_Tooltip:last');
              $(this).find('td:eq(4) a.gensmall').remove();
              guicuoi=$(this).find('td:eq(4)').text().replace(' by','');
              $('<div></div>').html('Thời gian gửi: <font color="cyan">'+guicuoi+'</font>').appendTo('.DL_Tooltip:last');
              $('<div style="padding-top:5px;"></div>').html('Trạng thái: <font color="chartreuse">'+$(this).find('td:first .status img').attr('alt').replace('New posts','Có bài viết mới').replace('No new posts','Không có bài viết mới').replace('This topic is locked','Chủ đề này đã bị khóa')+'</font>').appendTo('.DL_Tooltip:last');
              $('<div style="border-bottom:1px dotted white;padding-bottom:5px;margin-bottom:5px;"></div>').html('Có <font color="yellow"><b>'+$(this).find('td:eq(3)').text()+'</b></font> lượt người xem và <font color="cyan"><b>'+$(this).find('td:eq(2)').text()+'</b></font> bài trả lời').appendTo('.DL_Tooltip:last');
              $(this).find('td:first img[alt*="posted in this topic"]').length ? $('<div></div>').html($(this).find('td:first img[alt*="posted in this topic"]').attr('alt').replace('You have posted in this topic.','<font color="cyan">Bạn đã tham gia thảo luận tại chủ đề này</font>').replace('You have not posted in this topic.','<font color="red">Bạn chưa tham gia thảo luận tại chủ đề này</font>')).appendTo('.DL_Tooltip:last') : $('<div></div>').html('<font color="red">Bạn chưa tham gia thảo luận tại chủ đề này</font>').appendTo('.DL_Tooltip:last');
              $(this).remove();
          });
  }
  });
  }

Đây là hàm quan trọng nhất trong lasttopic.
Tôi xin giới thiệu sơ qua như sau:
- Hàm chỉ lấy dữ liệu tooltip nếu cho chạy hàm với giá trị 0 (Chạy lần đầu tiên khi diễn đàn load xong

Code:

TooltipVDS(0);

- Hàm lấy dữ liệu tooltip và các dữ liệu trong lasttopic với giá trị trang -1 là trước 1 trang, +1 là sau 1 trang

Code:

    TooltipVDS(-1);
    TooltipVDS(1);

Điểm khác ở tooltip VDS với tooltip fmvi là tooltip VDS tất cả nằm gọn trong 1 thẻ div và sẽ cho hiển thị tùy theo đường link bạn chỉ vào. Nhược điểm và cũng là ưu điểm là không tự động chuyển hướng khi vượt quá giá trị màn hình nhưng rút ngắn

Code:

$(window).load(function(){
  if ($('#DL_LastTopic').is(':empty'))
  {
  $('#DL_LastTopic').html('<img src="http://i48.servimg.com/u/f48/13/58/60/43/gsnjnw10.gif"></img>');
  TooltipVDS(0);
  }
  });

Đoạn JS này sẽ chạy tooltip khi diễn đàn đã load xong.
Nếu muốn cho tooltip chạy luôn khi diễn đàn bắt đầu chạy thì bạn thay thế bằng JS sau:

Code:

$('#DL_LastTopic').html('<img src="http://i48.servimg.com/u/f48/13/58/60/43/gsnjnw10.gif"></img>');
  TooltipVDS(0);

Phần cuối cùng:

Code:

$('#rf-content .tenltp a').live('mouseenter',function(){
  if ($('#DL_LastTopic').is(':empty'))
  {
  $('#DL_LastTopic').html('<img src="http://i48.servimg.com/u/f48/13/58/60/43/gsnjnw10.gif"></img>').ajaxComplete(function(){$('#DL_LastTopic .DL_Tooltip').filter(':eq('+$(this).parent().parent().index()+')').show();});
  TooltipVDS(0);
  }
  $('#DL_LastTopic').show();
  $('#DL_LastTopic .DL_Tooltip').hide();
  $('#DL_LastTopic .DL_Tooltip').filter(':eq('+$(this).parent().parent().index()+')').show();
  $(this).live('mousemove',function(event){$('#DL_LastTopic').css({'left':event.pageX-30,'top':event.pageY+30});});
  });
  $('#rf-content .tenltp a').live('mouseleave',function(){$('#DL_LastTopic').hide();}

Đọc thật kĩ để làm nhá

Nguồn: CNTT-K3

s