Change background image
T o w o r l d

Quay lại  T o w o r l d  » Công Nghệ Thông Tin » Thủ thuật WEb Blog » Forumotion

  Last Topic lấy ý tưởng từ Tooltip FMvi version 2 và được viết lại toàn bộ bởi VanDonStar


Go downThông điệp [Trang 1 trong tổng số 1 trang]

© FMvi.vn

Thu Oct 04, 2012 10:29 am
Rim
Rim

Level 100

[b]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
Demo các bạn có thể xem trực tiếp tại diễn đàn [You must be registered and logged in to see this link.]

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
[/b]
Code:
[b][b]              <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 -->[/b][/b]
Sửa thành
Code:
[b][b]              <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 -->[/b][/b]

CSS
Code:
[b][b]#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;}
[/b][/b]
HTML + JS
Code:
[b][b]<!-- 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}&nbsp;

      <!-- 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>[/b][/b]


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

[/b]
Code:
[b][b]$('#rf-content .tenltp a').each(function(){
  $(this).attr('href',$(this).attr('href').split('#')[0]);
  });[/b][/b]
Đ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. (Nếu các bạn không thích có thể xóa hẳn nó đi)
Code:
[b][b]t_lasttopic=0;
$('.TrangTruoc').hide();
$('.TrangTruoc').click(function(){TooltipVDS(-1);});
$('.TrangSau').click(function(){TooltipVDS(1);});
linklasttopic='/search?search_author=%2A&search_keywords&start=';[/b][/b]

Đ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:
[b][b]if (!$('#logout').is(':visible'))$('#Chon_LTopic').hide();[/b][/b]
Đ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. Gồm có 3 tùy chọn như đã giới thiệu ở trên.
Code:
[b][b]$('#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);
  }
});[/b][/b]
Đố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:
[b][b]$('#DL_LastTopic').ajaxStart(function(){$('#TuyChonLastTopic').fadeOut();});
$('#DL_LastTopic').ajaxComplete(function(){$('#TuyChonLastTopic').fadeIn();});[/b][/b]
Đ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:
[b][b]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();
          });
  }
  });
  }
[/b][/b]
Đâ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 hoặc khi bạn chỉ vào tooltip)
Code:
[b][b]TooltipVDS(0);[/b][/b]
- 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:
[b][b]TooltipVDS(-1);
TooltipVDS(1);[/b][/b]
Đ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 tối đa JS.

Code:
[b][b]$(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);
  }
  });[/b][/b]

Đ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:
[b][b]
  $('#DL_LastTopic').html('<img src="http://i48.servimg.com/u/f48/13/58/60/43/gsnjnw10.gif"></img>');
  TooltipVDS(0);
[/b][/b]
Phần cuối cùng:
Code:
[b][b]  $('#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();});[/b][/b]


Sẽ cho hiển thị tooltipAh quên 1 điều:
Ở diễn đàn mình đặt mặc định 1 trang 10 nếu bạn muốn chỉnh sửa thì có thể chỉnh sửa như sau:
Tìm

Code:
[b][b].load(linklasttopic+t_lasttopic*10+' form.frm-form .main-content .table .statused tr:lt(10)[/b][/b]

Các bạn có thể thay đổi tùy thích phụ thuộc vào 2 giá trị màu đỏ dưới đây:

.load(linklasttopic+t_lasttopic*10+' form.frm-form .main-content .table .statused tr:lt(10)

[b]Chỉnh số trang mặc định trong chức năng tìm kiếm cũng chính là số trang mặc định của số bài trong 1 trang mà Last Topic lấy ý tưởng từ Tooltip FMvi version 2 và được viết lại toàn bộ bởi VanDonStar 364988687
Quản lý tổng thể -> Messages and e-mails -> Cấu hình diễn đàn -> Topics
Chủ đề trong 1 trang cho là 10
[/b]
https://toworld.forum-viet.com

Thích

Báo xấu [0]

Gửi một bình luận lên tường nhà Rim
Trả lời nhanh

Về Đầu TrangThông điệp [Trang 1 trong tổng số 1 trang]

  © FMvi.vn

« Xem bài trước | Xem bài kế tiếp »

Bài viết liên quan

    Quyền hạn của bạn:

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