[VanDonStar] Lasttopic tự cập nhật sành điệu với "mắt thần" có thể xem nhanh bài viết

[vandonstar]

Hôm nay rãnh rỗi lên chơi và có một món quà nhỏ dành cho các bạn.
Chức năng này diễn đàn mình đã sử dụng từ lâu, nay xin được chia sẻ cùng mọi người.

Chức năng lasttopic ngoài khả năng tự động cập nhật (Mình đã chia sẻ) còn đưa thêm 2 con "mắt thần" (Gọi thế cho hoành tráng )

Mắt thần có tác dụng như thế nào?
- Con mắt bên trái với chức năng xem nhanh bài viết đầu tiên.
- Con mắt bên phải với chức năng xem nhanh bài viết sau cùng.
- Kèm chức năng xem nhanh toàn bộ chủ đề.

DEMO thì các bạn vào diễn đàn mình và xem nhé:

Code:

http://www.vandonstar.com/

Chú ý:
- Áp dụng cho những bạn sử dụng lasttopic dọc giống diễn đàn mình
- Đối với những bạn có lasttopic khác thì đây chỉ là bài viết tham khảo để các bạn tự tay làm cho mình, vui lòng xem hướng dẫn sơ lược ở phía dưới.

Hướng dẫn thực hiện:

Thay toàn bộ mod_recent_topics bằng code sau:

Code:

<!-- BEGIN classical_row -->
<input type="hidden" id="link2vds" value="" />
<div id="bgxemtruocvds" class="an" align="center">
<div align="right">
<input class="nutbamvds" type="button" value="Xem toàn bộ" onclick="xemnhanhtpvds()" />

<input class="nutbamvds" type="button" value="Bài đầu" onclick="loadtruoc2()" />
<input class="nutbamvds" type="button" value="Bài cuối" onclick="loadtruoc()" />
<input class="nutbamvds" type="button" value="Thoát" onclick="offxemtruoc()" /></div>
<div class="taidulieuxemnhanh"><b>Đang tải dữ liệu</b>
<img src="http://i48.servimg.com/u/f48/13/58/60/43/loadin13.gif"></img></div>
<div id="xemtruocvds" class="an"></div>
</div>
<div id="ktrf_vds" class="an"></div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" height="25"><span class="genmed"><center><b>{L_RECENT_TOPICS}</b>
<i>Tự động cập nhật...</i></center></span></td>
   </tr>
   <tr>
      <td class="row1" align="left"><span class="gensmall">
<div id="RefreshVDS_Main">
<div id="RefreshVDS">
<hr />
      <!-- BEGIN recent_topic_row -->
<div class="catdong">
» <a href="{classical_row.recent_topic_row.U_TITLE}" class="hastip" title="{classical_row.recent_topic_row.L_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
</div>
      <!-- BEGIN switch_poster -->
{BY} <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 -->
<table><tr>
<td width="145px">{ON} {classical_row.recent_topic_row.S_POSTTIME}</td>
<td><a href="#?" onclick="document.getElementById('link2vds').value='{classical_row.recent_topic_row.U_TITLE}',loadtruoc2()"><img src="http://i49.servimg.com/u/f49/16/29/88/81/eye-sm10.png" title="Xem nhanh chủ đề"></a> <a href="#?" onclick="document.getElementById('link2vds').value='{classical_row.recent_topic_row.U_TITLE}',loadtruoc()"><img src="http://i49.servimg.com/u/f49/16/29/88/81/eye-sm10.png" title="Xem nhanh bài gửi sau cùng"></a></td>
</tr></table>
<hr />
      <!-- END recent_topic_row -->
</div>
</div>
      </span></td>
   </tr>
</table>
<!-- END classical_row -->

Thêm Javascrip sau cho toàn bộ diễn đàn: (In all the pages)

Code:

$(window).load(function(){
rft = $('#RefreshVDS a.hastip:eq(0)').attr('href');
setInterval(function(){
$('#ktrf_vds').load('forum #RefreshVDS a.hastip:eq(0)', function(){
rfs = $('#ktrf_vds a.hastip:eq(0)').attr('href');
if(rfs != rft)
$('#RefreshVDS_Main').fadeOut(2000).load('forum #RefreshVDS', function(){
}).fadeIn(1000);
rft = rfs;
});
}, 10000);
});

function loadtruoc(){
xem=$('#link2vds').val();
$('.nutbamvds:eq(0)').css('background-color','#74FF2E');
$('.nutbamvds:eq(1)').css('background-color','#74FF2E');
$('.nutbamvds:eq(2)').css('background-color','#FF0000');
$('#bgxemtruocvds').fadeIn(100);
$('.taidulieuxemnhanh').slideDown();
$('#xemtruocvds').load(xem+' tr.post:last', function(){
$('#xemtruocvds').slideDown(300);
$('.taidulieuxemnhanh').slideUp();
xoastatus();
});
};

function loadtruoc2(){
xem=$('#link2vds').val();
$('.nutbamvds:eq(0)').css('background-color','#74FF2E');
$('.nutbamvds:eq(1)').css('background-color','#FF0000');
$('.nutbamvds:eq(2)').css('background-color','#74FF2E');
$('#bgxemtruocvds').fadeIn(100);
$('.taidulieuxemnhanh').slideDown();
$('#xemtruocvds').load(xem+' tr.post:first', function(){
$('#xemtruocvds').slideDown(300);
$('.taidulieuxemnhanh').slideUp();
xoastatus();
});
};

function xemnhanhtpvds(){
xem=$('#link2vds').val();
$('.nutbamvds:eq(0)').css('background-color','#FF0000');
$('.nutbamvds:eq(1)').css('background-color','#74FF2E');
$('.nutbamvds:eq(2)').css('background-color','#74FF2E');
$('#bgxemtruocvds').fadeIn(100);
$('.taidulieuxemnhanh').slideDown();
$('#xemtruocvds').load(xem+' div.xemnhanhtpvds', function(){
$('#xemtruocvds').slideDown(300);
$('.taidulieuxemnhanh').slideUp();
xoastatus();
});
};

function xoastatus(){
$(".xoastatus:contains('Status')").css('display','none');
};

function offxemtruoc(){
$('#xemtruocvds').slideUp(300);
$('#bgxemtruocvds').fadeOut(500);
};

Trong viewtopic_body và viewcomments_body

Thêm vào đầu:

Code:

<div class="xemnhanhtpvds">

Thêm vào cuối:

Code:

</div>

Và phải đảm bảo chưa xóa code sau:

Code:

<tr class="post">

Thêm vào CSS:

Code:

.an{display:none;}
.catdong{
white-space:nowrap;
width:180px;
text-overflow:ellipsis;
overflow:hidden;
}
#xemtruocvds{
position:relative;
top:5%;
overflow:auto;
background-color:#fff;
padding:5px;
max-width:800px;
max-height:70%;
border:10px solid #5E9EFF;
}

#bgxemtruocvds{
opacity: 0.95;filter: alpha(opacity=95);
position:fixed;
left:0;
top:0;
background-color:#333;
width:100%;
height:100%;
z-index: 999;}

.taidulieuxemnhanh{background-color:#000; padding:5px; border:2px solid #3AAA00;width:200px;display:none;}
.nutbamvds{width:auto; height:30px; font-weight:bold; font-size:16px;}

Bước cuối cùng:
Quản lý tổng thể -> Messages and e-mails -> Cấu hình diễn đàn -> Always show the first post in the topics: Chọn có

Hướng dẫn sơ lược cho các bạn có lasttopic dạng khác:

Chỉnh sửa trong mod_recent_topics
- Xoá toàn bộ code trong scrolling_row và chỉ giữ lại code trong classical_row

Thêm vào đằng sau <!-- BEGIN classical_row --> code sau:

Code:

<input type="hidden" id="link2vds" value="" />
<div id="bgxemtruocvds" class="an" align="center">
<div align="right">
<input class="nutbamvds" type="button" value="Xem toàn bộ" onclick="xemnhanhtpvds()" />

<input class="nutbamvds" type="button" value="Bài đầu" onclick="loadtruoc2()" />
<input class="nutbamvds" type="button" value="Bài cuối" onclick="loadtruoc()" />
<input class="nutbamvds" type="button" value="Thoát" onclick="offxemtruoc()" /></div>
<div class="taidulieuxemnhanh"><b>Đang tải dữ liệu</b>
<img src="http://i48.servimg.com/u/f48/13/58/60/43/loadin13.gif"></img></div>
<div id="xemtruocvds" class="an"></div>
</div>
<div id="ktrf_vds" class="an"></div>

Bao quanh <!-- BEGIN recent_topic_row --> cho đến <!-- END recent_topic_row --> bằng 2 thẻ div như sau:
<div id="RefreshVDS_Main">
<div id="RefreshVDS">
<!-- BEGIN recent_topic_row -->
...
...
...
<!-- END recent_topic_row -->
</div>
</div>

Tìm

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}"

Thay bằng

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}" class="hastip"

Cuối cùng là chỉnh lại CSS cho phù hợp.

Chúc các bạn thành công!

[lxlovely]

quá hay nhưng chỉnh làm las ngang thì hay hơn nua

[baivong]

Phần nội dung bài viết đôi khi bị lỗi màu khó nhìn.
...tiêu đề lúc nào cũng hot

[Việt]

load thêm cái quick reply luôn thì sướng nhỉ. khỏi vào topic

[baivong]

Đú theo vandonstar, làm cái load bài viết cuối cùng (có quick reply nhá)

Code:

http://www.fmvi.org/

Code của mình dùng [You must be registered and logged in to see this link.], còn ứng dụng thì chắc chỉ mình FMvi

[vandonstar]

Làm Quick Reply không khó.
Nhưng làm ra thì tình trạng Spam lan tràn
Vì thế cho nên mình không làm, mà chỉ làm thêm chức năng xem toàn bộ có kèm Quick Reply.

[baivong]

Câu 3 và 2 mâu thuẫn thế

[ngoclam]

Làm Quick Reply không khó.
Nhưng làm ra thì tình trạng Spam lan tràn
Vì thế cho nên mình không làm, mà chỉ làm thêm chức năng xem toàn bộ có kèm Quick Reply.

chuẩn vote +

[lxlovely]

chỉ luôn làm cái Quick Reply đi bạn

[vandonstar]

Câu 3 và 2 mâu thuẫn thế

Bạn hiểu sai ý mình rồi.
Ý của mình là nếu cho QReply ở bài gửi sau cùng thì khi thành viên vào chỉ đọc bải gửi đó và trả lời luôn. Như thế sẽ sảy ra hiện tượng nói chuyện phiếm trong topic. (Diễn đàn mình đã từng bị tương tự) Vì thế mình chỉ để hiện QReply khi thành viên xem cả topic. Như thế sẽ giảm bớt vấn nạn spam và nói chuyện phiếm trong topic.

Hi, thân!

[Zero]

Vote cho bác, đơn giản nhưng hiệu quả Có cần dịch bài này không bác vượng

[vandonstar]

Vote cho bác, đơn giản nhưng hiệu quả Có cần dịch bài này không bác vượng

Dịch cái gì vậy? Toàn tiếng việt thui mờ

[baivong]

Vote cho bác, đơn giản nhưng hiệu quả Có cần dịch bài này không bác vượng

Cũng còn tùy tác giả chứ, và lại bài này trên FMvi ko có đăng

Vote cho bác, đơn giản nhưng hiệu quả Có cần dịch bài này không bác vượng

Dịch cái gì vậy? Toàn tiếng việt thui mờ

Lựa tut hoàn chỉnh đăng lên

Code:

http://en.fmvi.org

ấy mà
Chú có định đăng bài này lên

Code:

http://vi.fmvi.org

ko?

[langtucodon]

mình làm với lasttopic ngang xong hết rồi nhưng ko thấy 2 con mắt thần đâu cả. lỗi như vậy là lỗi gì vậy bạn? hay mình làm sai cái gì? thank bạn

[kiepdoden]

Chủ thớt ơi hướng dẫn chi tiết hơn về cách làm với last topic ngang đi bạn. Bạn ghi như thế này mình không tài nào hiểu được 2 bước này :

1/...."Chỉnh sửa trong mod_recent_topics
- Xoá toàn bộ code trong scrolling_row và chỉ giữ lại code trong classical_row ".......

Ps : scrolling_row và classical_row là gì vậy ? mình tìm trong mod_recent_topics rồi mà không biết cái này là cái gì nữa ????

2/ ......"Cuối cùng là chỉnh lại CSS cho phù hợp."...

Ps : Không hiểu "phù hợp" ???

[KillAlt1.0]

có thấy cái lasstopic nào trong demo đâu

[Mr.Winni]

Cái last dọc đó, qoa, nhiều forum đẹp quá ta =0

[akino]

viewcomments_body là mục nào sao mình k có nhỉ

[Cáo Già Đeo Nơ]

Module > Blogs >Cấu hình diễn đàn : Có
Display > Templates >viewcomments_body

[nttmai]

đã làm đúng hết rồi sao không thấy "con mắt" đâu nhỉ ?
mod_recent_topic :

Code:

 </td></tr></table></td>
<td valign="top" width="100%" style="background-color: #fff;">
<style type="text/css">
th,td,p {
    font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif }
/* Style cho menu tabs */div.TabView div.Tabs{overflow: hidden;}div.Tabs{color: #027EC6;
  font-size: 11px!important;
  font-weight : bold;
  background-color: #006699;
  background-image: url("http://i763.photobucket.com/albums/xx272/thuanoo7/Decorated%20images/bg-tit10.gif");height: 26px!important;padding: 0px 5px;}div.TabView div.Tabs: hover,{overflow: hidden;}div.TabView div.Tabs a , div.TabView div.Tabs a:hover {float: left;display: block;background-color:#;text-align: center;padding: 4px 6px;vertical-align: middle; /* đường viền quanh tabs menu */text-decoration: none;font-family: Tahoma;font-size: 11px;color: #000000;}div.TabView div.Tabs a.Active{background: transparent url(/users/2211/12/43/96/album/tcat10.png); /* màu nền tab menu active */color: #000000;font-size: 11px;font-weight: bold;color: #fff;}/* Style cho phần text nội dung của mỗi tab */div.TabView {clear: both;border: 0px solid #ffffff;overflow: hidden; /* giá trị là auto nếu muốn hiện scroll bar */}div.TabView div.Pages div.Page{height: 100%;padding: 0px;border: 0px solid #b4d0f3;overflow: hidden;background-color:#fff; /* giá trị là auto nếu muốn hiện scroll bar */}</style><script type="text/javascript" src="http://thuan007.googlecode.com/files/Tabview.js"></script><div id="TabView" class="TabView" style="padding: 1px;"><!--
tabs --><div width="100%" class="Tabs"><a class="Active" href="javascript:tabview_switch('TabView', 1);">Bài Viết Mới</a><a>Bình chọn</a><a>Thống kê</a><ul class="tabs" id="vietvbb_topstats_t">  <li style="border-right: 0px; display: none;" id="vietvbb_topstats_t_loading"></li> </ul> </div><!--
 nội dung tabs --><div style="height: 200px; width:100%" class="Pages">

<div class="Page" style="height: 200px;"><!-- BEGIN classical_row -->
<input type="hidden" id="link2vds" value="" />
<div id="bgxemtruocvds" class="an" align="center">
<div align="right">
<input class="nutbamvds" type="button" value="Xem toàn bộ" onclick="xemnhanhtpvds()" />

<input class="nutbamvds" type="button" value="Bài đầu" onclick="loadtruoc2()" />
<input class="nutbamvds" type="button" value="Bài cuối" onclick="loadtruoc()" />
<input class="nutbamvds" type="button" value="Thoát" onclick="offxemtruoc()" /></div>
<div class="taidulieuxemnhanh"><b>Đang tải dữ liệu</b>
<img src="http://i48.servimg.com/u/f48/13/58/60/43/loadin13.gif"></img></div>
<div id="xemtruocvds" class="an"></div>
</div>
<div id="ktrf_vds" class="an"></div>
<table style="border-bottom-width: 0px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
<td>

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
</table></td></tr></tbody>
<tbody>
<tr><td style="padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="title_small" align="center" width="65%">Bài gửi</td><td class="title_small" align="center" width="15%">Thời gian</td><td class="title_small" align="center">Người gửi</td></tr><tr valign="top"><td colspan="3" style="border-top: 0px none; padding: 5px;"><div id="RefreshVDS_Main">
<div id="RefreshVDS"><!-- BEGIN recent_topic_row --><div class="a1tg3td" style="height: 22px;"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr valign="top"><td width="65%"><a onmouseover="show_tooltip(this,this.getElementsByTagName('span')[0].innerHTML,'Info');" href="{classical_row.recent_topic_row.U_TITLE}" class="hastip"><img src="/users/2211/12/43/96/album/post_n10.gif" /> <font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.L_TITLE}</font><span style="display: none;"><b>Tiêu đề: </b><font color=#0072ff>{classical_row.recent_topic_row.L_TITLE}</font><br><br> <b>Thời gian: </b> <font color=#ff0000>{classical_row.recent_topic_row.S_POSTTIME}</font><br><br><b>Người gửi cuối: </b> <!-- BEGIN switch_poster -->{classical_row.recent_topic_row.switch_poster.S_POSTER}<!-- END switch_poster --></span></a></td><td width="13%" align="center"><a onmouseover="show_tooltip(this,'<span> {classical_row.recent_topic_row.S_POSTTIME}</span>','');"><img src=/users/2211/12/43/96/album/clock110.png>  </a></td><td align="left"><!-- BEGIN switch_poster --><a onmouseover="show_tooltip(this,'<span>Click để xem profile của thành viên này !</span>','');"  href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-family: Tahoma; font-size: 11px">
 
        {classical_row.recent_topic_row.switch_poster.S_POSTER}
        </font></a> <!-- END switch_poster --></td></tr></table></div><!-- END recent_topic_row --></div></div></td></tr></table></td></tr></table>
<!-- END classical_row -->

</div>

<div class="Page">
<table style="border-bottom-width: 0px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>
<td>

Demo :

Code:

http://a6ltt.forum.st/forum

[svdn19391]

Module > Blogs >Cấu hình diễn đàn : Có
Display > Templates >viewcomments_body

Là sao a? k thấy code?

[Bốn Phương...Star]

Có sử dụng cho PunBB không ta

[Sponsored content]