Kênh thông tin giải trí dành cho giới trẻ
Tự động đăng nhập lần sau
Toàn bộ
Đại sảnh
Du lịch VĐ
Làm quen
Thư viện
Thư giãn
Trường xưa
Âm nhạc
Phim ảnh
Thời trang
Cuộc sống
Tâm sự
Chém gió
Năng khiếu
DJ-Club
Bang hội
CLB
Đố vui
Trò chơi
Tin tức
Kỳ thú
Tin học
Ảnh đẹp
Học tập
Linh tinh
Tiêu đềSáng lậpGửi cuốiChuyên mụcBìnhXem
Bài gửi sau cùng
Bài mới trong thời gian

You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

 Trùm Forum

Admin

Admin
Trùm Forum


Demo:

[You must be registered and logged in to see this image.]


Chú ý:
- Dành cho Punbb.
- Chiều rộng diễn đàn là 980-1000px.
- Lastpost ko liên quan gì đến last mặc định có sẵn nên bạn hãy bỏ last mặc định đi.
- Không hỗ trợ bất cứ gì trên yahoo và diễn đàn vds, mọi thắc mắc vui lòng post tại topic này.


Hướng dẫn:

Đầu tiên vào overall_header và tìm

Code:
<div id="main">

Thêm vào phía trên code sau:

Code:

<div id="Load"></div>
<div id="last-posts">
  <div id="option-lastpost">
    <div class="op-last" onclick="Op1Last('')">Toàn bộ</div>
    <div class="op-choice">
      <div class="op-last" onclick="Op1Last('c1')">Đại sảnh</div>
      <div class="op-last" onclick="Op1Last('c2')">Du lịch VĐ</div>
      <div class="op-last" onclick="Op1Last('f60')">Làm quen</div>
      <div class="op-last" onclick="Op1Last('f156')">Thư viện</div>
      <div class="op-last" onclick="Op1Last('f16')">Thư giãn</div>
      <div class="op-last" onclick="Op1Last('f117')">Trường xưa</div>
    </div>
    <div class="op-choice">
      <div class="op-last" onclick="Op1Last('f13')">Âm nhạc</div>
      <div class="op-last" onclick="Op1Last('f14')">Phim ảnh</div>
      <div class="op-last" onclick="Op1Last('f59')">Thời trang</div>
      <div class="op-last" onclick="Op1Last('f198')">Cuộc sống</div>
      <div class="op-last" onclick="Op1Last('f85')">Tâm sự</div>
      <div class="op-last" onclick="Op1Last('f80')">Chém gió</div>
    </div>
    <div class="op-choice">
      <div class="op-last" onclick="Op1Last('f63')">Năng khiếu</div>
      <div class="op-last" onclick="Op1Last('f53')">DJ-Club</div>
      <div class="op-last" onclick="Op1Last('f239')">Bang hội</div>
      <div class="op-last" onclick="Op1Last('f62')">CLB</div>
      <div class="op-last" onclick="Op1Last('f15')">Đố vui</div>
      <div class="op-last" onclick="Op1Last('f17')">Trò chơi</div>
    </div>
    <div class="op-choice">
      <div class="op-last" onclick="Op1Last('f157')">Tin tức</div>
      <div class="op-last" onclick="Op1Last('f84')">Kỳ thú</div>
      <div class="op-last" onclick="Op1Last('f92')">Tin học</div>
      <div class="op-last" onclick="Op1Last('f158')">Ảnh đẹp</div>
      <div class="op-last" onclick="Op1Last('f121')">Học tập</div>
      <div class="op-last" onclick="Op1Last('c8')">Linh tinh</div>
    </div>
    <div class="op-change"><div class="op-prew"></div><div class="op-next"></div></div>
  </div>
  <div id="name-lastpost"><span class="lp2">Tiêu đề</span><span class="lp3">Sáng lập</span><span class="lp4">Gửi cuối</span><span class="lp5">Chuyên mục</span><span class="lp6">Bình</span><span class="lp7">Xem</span></div>
  <div id="main-lastpost"></div>
  <div id="option2-lastpost">
    <div class="op-last-bottom op-last-bottom2" onclick="Op2Last('/search?search_author=*+*&search_keywords')">Bài gửi sau cùng</div>
    <div class="op-last-bottom" onclick="Op2Last('/search?search_id=newposts')">Bài từ lần truy cập trước</div>
    <div class="op-last-bottom" onclick="Op2Last('/search?search_id=egosearch')">Bài bạn đã tham gia thảo luận</div>
    <div class="op-last-bottom" onclick="Op2Last('/search?search_id=unanswered')">Bài chưa ai trả lời</div>
  </div>
  <div id="trang-lastpost">
    <div class="TrangTruoc" title="Tải dữ liệu trang trước"></div><div class="TrangHT"><input id="SoTrangLT" value="1" maxlength="2" title="Trang hiện tại" /></div><div class="TrangSau" title="Tải dữ liệu trang tiếp theo"></div>
  </div>
  <div id="dl-lastpost"></div>
</div>
<div class="clear"></div>

Trong overall_footer_begin tìm:

Code:
{S_JUMPBOX_SELECT} <input type="submit" value="{L_GO}" />

Thay bằng:

Code:
<span id="jumpbox-last">{S_JUMPBOX_SELECT}</span>&nbsp;<input type="submit" value="{L_GO}" />

Tiếp theo thêm vào CSS:

Code:
#last-posts{width:100%;}
#select-lastpost{float:right;cursor:pointer;}
#option-lastpost{height:18px;}

.op-last{float:left;border:1px solid #999;padding:2px 0;cursor:pointer;height:18px;background-color:white;margin:-5px 2px 0;width:80px;text-align:center;background-color:#DDD;}
.op-last2{height:28px;margin-top:-12px;font-weight:bold;line-height:250%;border-radius:5px 5px 0 0;border-bottom:0;color:red;background-color:#FFF;}
.op-last-bottom{float:left;border:1px solid #999;margin:-1px 2px 0;padding:5px;cursor:pointer;height:15px;background-color:#DDD;}
.op-last-bottom2{height:23px;font-weight:bold;border-radius:0 0 5px 5px;border-top:0;background-color:white;margin-top:-4px;color:red;background-color:#FFF;}
.op-last-select{font-weight:bold!important;color:red;}
.op-choice{float:left;display:none;}
.op-change{float:left;margin-left:5px;}
.op-prew,.op-next{width:20px;height:20px;cursor:pointer;float:left;margin:0 2px;}
.op-prew{background:url(http://i48.servimg.com/u/f48/13/58/60/43/contro18.png) 50% 50%;}
.op-next{background:url(http://i48.servimg.com/u/f48/13/58/60/43/contro20.png) 50% 50%;}
#main-lastpost{border:1px solid #999;padding:20px 10px 5px;background-color:white;min-height:300px;}
#dl-lastpost{display:none;}
#name-lastpost,.name-lastpost {
position: absolute;
padding: 5px 25px;
font-style: italic;
}

.dl-post {
height: 15px;
}
lp1,.lp2,.lp3,.lp4,.lp5,.lp6,.lp7,.lp8,.imglp{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
}
.dl-post:hover{
background-color:#DDD;
}

.lp1 img {
height: 14px;
}
.lp2 {
margin-left: 10px;
width: 380px;
}
.lp3 {
margin-left: 400px;
width: 120px;
}
.lp4 {
margin-left: 525px;
width: 120px;
}
.lp5 {
margin-left: 650px;
width: 190px;
}
.lp6 {
margin-left: 840px;
font-style: italic;
}
.lp7 {
margin-left: 880px;
font-style: italic;
}
.lp8 {
margin-left: 940px;
}
.imglp {
margin-left: 930px;
margin-top:1px;
}
#trang-lastpost {
float: right;
}
.TrangTruoc,.TrangSau,.TrangHT{font:12px Courier;cursor:pointer;color:red;float: left;height:30px;width:30px;opacity:0.6;}
.TrangTruoc:hover,.TrangSau:hover,.TrangHT:hover{opacity:1;}
.TrangTruoc{display:none;background:url(http://i48.servimg.com/u/f48/16/58/89/73/fancy_12.png) no-repeat;}
.TrangSau{background:url(http://i48.servimg.com/u/f48/13/58/60/43/fancy_10.png) no-repeat;}
#SoTrangLT{width:25px;height:22px;text-align:center;font-weight:bold;border:3px dashed white;}
#SoTrangLT:hover{border:3px dashed black;color:red;}

#Load {
display:none;
background: white url(http://i48.servimg.com/u/f48/13/58/60/43/loadaj10.gif) 50% 50% no-repeat;
position: fixed;
left: 50%;
top: 40%;
width: 50px;
height: 50px;
border: 10px solid #82D23D;
border: 20px solid rgba(130, 210, 60, .3);
border-radius: 50px;
margin-left: -25px;
}

jQuery Script:

In all the pages

Code:
Link = '/search?search_author=*_*&search_keywords';
Start = '&start=';
Where = '';
Trang = 20;

$(function(){

op_choice = Math.floor(Math.random()*4);
OpChoice(op_choice);

$('.op-prew').click(function(){
op_choice -= 1;
if (op_choice < 0) op_choice = 3;
OpChoice(op_choice);
});
$('.op-next').click(function(){
op_choice += 1;
if (op_choice > 3) op_choice = 0;
OpChoice(op_choice);
});

$('#jumpbox-last select').clone().appendTo('#option-lastpost');
$('#option-lastpost select').removeAttr('name').removeAttr('onchange').attr('id','select-lastpost');

$('.op-last-bottom').click(function(){
$('.op-last-bottom').removeClass('op-last-bottom2');
$(this).addClass('op-last-bottom2');
});

$('#option-lastpost .op-last').click(function(){
$('#option-lastpost .op-last').removeClass('op-last2');
$('#select-lastpost').removeClass('op-last-select');
$(this).addClass('op-last2');
});

$('#select-lastpost').live('change',function(){
$('#option-lastpost .op-last').removeClass('op-last2');
$(this).addClass('op-last-select');
if ($(this).val()=='1')
  {
    Where = '';
    LoadLastPost(0);
  }
  else if ($(this).val()!='-1')
  {
    Where = '&search_where='+$(this).val();
    LoadLastPost(0);
  }
});

$('.TrangTruoc').click(function(){
st = parseInt($('#SoTrangLT').val())-1;
$('#SoTrangLT').val(st);
LoadLastPost(st-1);
});

$('.TrangSau').click(function(){
st = parseInt($('#SoTrangLT').val())+1;
$('#SoTrangLT').val(st);
LoadLastPost(st-1);
});

$('#SoTrangLT').change(function(){
ltval = parseInt($(this).val());
if (ltval < 1 || ltval > 20)
{
$(this).val(1);
}
else
{
LoadLastPost(ltval-1);
}
});

});

function LoadLastPost(page){
page > 0 ? $('.TrangTruoc').show() : $('.TrangTruoc').hide();
if (page == 0){$('#SoTrangLT').val(1);}
LinkLastPost = Link + Where + Start + page*Trang;
$('#Load').show();
$('#dl-lastpost').load(LinkLastPost+' form.frm-form .main-content .table .statused tr',function(){
$('#main-lastpost').empty();
$(this).find('tr').length < 20 ? $('.TrangSau').hide() : $('.TrangSau').show();
if ($(this).is(':empty'))
{
$('#main-lastpost').text('Không có dữ liệu');
}
else
{
$(this).find('tr').each(function(){
$('<div class="dl-post"></div>').appendTo('#main-lastpost');
$('<span class="lp1"></span>').html($(this).find('span.status').html()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp2" title="'+$(this).find('td:first h2.topic-title').text()+'"></span>').html('<a href="'+$(this).find('td:last a:last').attr('href')+'">'+$(this).find('td:first h2.topic-title').text()+'</a>').appendTo('#main-lastpost .dl-post:last');
$(this).find('td:first a.gensmall').appendTo('#main-lastpost .dl-post:last').wrap('<span class="lp3"></span>');
$(this).find('td:eq(4) a.gensmall').appendTo('#main-lastpost .dl-post:last').wrap('<span class="lp4"></span>');
$('<span class="lp5"></span>').html($(this).find('td:eq(1)').html()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp6"></span>').html($(this).find('td:eq(2)').text()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp7"></span>').html($(this).find('td:eq(3)').text()).appendTo('#main-lastpost .dl-post:last');
$('<img src="http://2img.net/i/fa/m/icon_minitime1.gif" class="imglp" title="'+$(this).find('td:eq(4)').text().replace(' by','')+'"></img>').appendTo('#main-lastpost .dl-post:last');
if ($(this).find('td:first img[alt*="posted in this topic"]').length)
{
$('<span class="lp8"><img src="'+$(this).find('td:first img[alt*="posted in this topic"]').attr('src')+'" title="Bạn đã tham gia thảo luận tại chủ đề này"></img></span>').appendTo('#main-lastpost .dl-post:last');
}
});
$('#dl-lastpost').empty();
}
$('#Load').fadeOut();
});
}

function OpChoice(eq){
$('#option-lastpost .op-choice').hide();
$('#option-lastpost .op-choice').filter(':eq('+eq+')').show();
}

function Op1Last(forum){
forum =='' ? Where = '' : Where = '&search_where='+forum;
LoadLastPost(0);
}

function Op2Last(op){
Link = op;
LoadLastPost(0);
}

In the home page

Code:
$(function(){
$('#option-lastpost .op-last:first').addClass('op-last2');
LoadLastPost(0);
});

In the topics

Code:
$(function(){

$('#select-lastpost option').each(function(){
if ($(this).text().search(/\|\s\s\s\|--/) == 0){$(this).addClass('select-intopic');}
});

sl_op = $('#select-lastpost option.select-intopic').length;
ClickLast = Math.floor(Math.random()*sl_op);
$('#select-lastpost option.select-intopic').filter(':eq('+ClickLast+')').attr('selected', 'selected');
$('#select-lastpost').addClass('op-last-select');
Where = '&search_where='+$('#select-lastpost').val();
LoadLastPost(0);

});

Fmvi.vn

https://xteenvn.forum-viet.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

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