Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.

You are not connected. Please login or register

 » Forumotion » Share Code » Last Topic » [Invision]Lasttopic Full

[Invision]Lasttopic Full

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

Sofpedia

Sofpedia
Administrator Sofpedia
Administrator Sofpedia

Demo:
[You must be registered and logged in to see this link.] (skin Nice Blue 2)
[You must be registered and logged in to see this link.] (skin CPhuc mới)
[You must be registered and logged in to see this link.] (skin Source)
[HIDE] CSS:
Code:
  /*recent topics cho invision------------------------------*/
    #content-container div#left {float: none;width: 100%}
    #left .module .box-content a {margin:2px 0}
    #left{clear:none!important;width:100%!important;float:none!important;counter-reset:stt}
      /*top posters*/
    .topposter {float: left; width: 250px; margin-right:10px;} /*hiển thị top posters*/
      /*most active topics*/
    .hottest {float: left; width:250px; margin-left:-265px; margin-top:230px;} /*hiển thị most active topics*/
    .topichot{float:left;height:14px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap; max-width:220px;}
      /*recent topics*/
    .recent {float: left; width:680px;} /*hiển thị recent topics, bạn phải chỉnh sửa chiều rộng 680px cho phù hợp với 4r*/
    /*recent topics cho invision------------------------------*/
 
    #last-posts{width:100%;}
    #select-lastpost{
    float: left;
    margin: 3px 5px;
    background-color: #CCC;
    padding: 2px 5px;
    border-radius: 10px;
    cursor:pointer;
    width:115px;}
    #option-lastpost{height:18px;}
     
    .op-last{float:left;cursor:pointer;height:18px;margin:-5px 2px 0;width:80px;text-align:center;}
    .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:#0E53FB;}
    .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-mi{background: white url(http://i27.servimg.com/u/f27/15/47/59/46/listbg10.gif);min-height:345px;}
    #main-lastpost{background: white url(http://i27.servimg.com/u/f27/15/47/59/46/listbg10.gif);min-height:420px;}
    #dl-lastpost{display:none;}
    #name-lastpost,.name-lastpost {
    position: absolute;
    padding: 5px 25px;
    font-style: italic;
    }
     
    .reply, .view, .box, .guicuoi, .tieude{
    white-space: nowrap;
    text-overflow: ellipsis;
      font-size: 11px;
    }
 

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

    .lpmi {
    width: 100px;
    }
    .ds1vds {
    width: 70px;
    }
     
    .lp1 img {
    height: 14px;
    }
    .lp2 {
    margin-left: 5px;
    width: 160px;
    }
    .lp3 {
    margin-left: 188px;
    width: 100px;
    }
    .lp4 {
    margin-left: 308px;
    width: 100px;
    }
    .lp5 {
    margin-left: 420px;
    width: 100px;
    }
    .lp6 {
    margin-left: 538px;
    }
    .lp7 {
    margin-left: 575px;
    }
    .lp8 {
    margin-left: 618px;
    height: 14px;
    }
    .imglp {
    margin-left: 608px;
    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;
    }
NOTE: Bảng thống kê này ๖๖ۣۜMình viết trên skin Nice Blue 2 của ligerv. Các bạn chú ý trong đoạn CSS trên có đoạn code này:
Code:
 .recent {float: left; width:680px;} /*hiển thị recent topics, bạn phải chỉnh sửa chiều rộng 680px cho phù hợp với 4r*/
๖๖ۣۜMình đã chú thích ở đó, các bạn phải chỉnh lại chiều rộng 680px cho phù hợp với 4r của ๖๖ۣۜMình, nếu không sẽ có lỗi xảy ra.
Ví Dụ: Với nhữg ai sử dụng skin CPhuc mới, khi giữ nguyên code đó last topic sẽ bị xuống dòng. Vì thế, khi sử dụng skin CPhuc mới, bạn phải sửa số 680 thành 670. Khi đó, code trên sẽ trở thành
Code:
      .recent {float: left; width:670px;} /*hiển thị recent topics, bạn phải chỉnh sửa chiều rộng 680px cho phù hợp với 4r*/
 
Các bạn thông cảm. Chịu khó edit tí. Tớ k có rành về CSS lắm nên chỉ thế được thôi mắc cỡ Chờ hand lên mà hỏi.
Javascript: Tạo 3 file javascript, đặt In the homepage nếu bạn đặt bảng thống kê chỉ ở trang chủ, đặt In all the pages nếu bạn đặt bảng thống kê ở mọi trang.
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.ipbform .ipbtable 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" title="'+$(this).find('td:eq(0)').text()+'"></span>').html($(this).find('td:eq(0)').html()).appendTo('#main-lastpost .dl-post:last');
    $('<span class="lp2"></span>').html('<a class="thumbnail" title="'+$(this).find('td:eq(2) a.topictitle').text()+'" href="'+$(this).find('td:last a:last').attr('href')+'">'+$(this).find('td:eq(2) a.topictitle').text()+'</a>').appendTo('#main-lastpost .dl-post:last');
    $('<span class="lp3" title="'+$(this).find('td:eq(4)').text()+'"></span>').html($(this).find('td:eq(4) a.gensmall')).appendTo('#main-lastpost .dl-post:last');
    $('<span class="lp4" title="'+$(this).find('td:eq(7)').text()+'"></span>').html($(this).find('td:eq(7) a.gensmall')).appendTo('#main-lastpost .dl-post:last');
    $('<span class="lp5" title="'+$(this).find('td:eq(3)').text()+'"></span>').html($(this).find('td:eq(3)').html()).appendTo('#main-lastpost .dl-post:last');
    $('<span class="lp6" title="'+$(this).find('td:eq(5)').text()+'"></span>').html($(this).find('td:eq(5)').text()).appendTo('#main-lastpost .dl-post:last');
    $('<span class="lp7" title="'+$(this).find('td:eq(6)').text()+'"></span>').html($(this).find('td:eq(6)').text()).appendTo('#main-lastpost .dl-post:last');
    $('<span class="lp8" title="'+$(this).find('td:eq(1)').text()+'"></span>').html($(this).find('td:eq(1)').html()).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);
    }
 
    $(function(){
    $('#option-lastpost .op-last:first').addClass('op-last2');
    LoadLastPost(0);
    });
 
Code: Chọn nội dung CODE
    $(function(){
      $('#left .module:eq(0)').addClass('topposter').next().remove();
      $('#left .module:eq(1)').addClass('hottest').next().remove();
      $('#left .module:eq(1) a[href^="/t"]').addClass('topichot').next().remove();
      $('#left .module:eq(2)').addClass('recent').next().remove();
      $('#left .module:eq(2) br').addClass('clear');
    });
Tạo 1 widget mới: Điền các thông tin như sau: () Widget name : Last mia mắc cỡ () Use a table type : Có () Widget title : Latest topics () Widget source :
Code:
  <table border="0" class="lbb" cellpadding="0" cellspacing="0" width="100%">    <tr class="baiguicuoi" style="display: table-row; ">          <td width="100%" valign="top" colspan="2">      <div id="Load"></div>      <table style="background:#FFF repeat;" width="100%">    <tr>    <td width="100%" valign="top">      <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>    </td>    </tr></table>    </td>    </tr>    </table>    </td></tr></table></td></tr>    <tr><td>      <div id="option2-lastpost">        <div class="op-last-bottom op-last-bottom2" onclick="Op2Last('/search?search_author=*_*&search_keywords')">Lastest</div>        <div class="op-last-bottom" onclick="Op2Last('/search?search_id=newposts')">From last visit</div>        <div class="op-last-bottom" onclick="Op2Last('/search?search_id=egosearch')">You have commented</div>        <div class="op-last-bottom" onclick="Op2Last('/search?search_id=unanswered')">No comment</div>      </div>
    <select id="select-lastpost">    <option><div class="op-last" onclick="Op1Last('')">All</div></option><option value="-1"></option><option txt="01" value="f20">|--Cộng đồng game</option><option txt="01" value="f22">|--QTAN</option><option txt="01" value="f23">|--hot video youtube</option>    </select>

      <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>      </td></tr>      </table>
NOTE: Cái đoạn
Code:
  <option><div class="op-last" onclick="Op1Last('')">All</div></option><option value="-1"></option><option txt="01" value="f20">|--Cộng đồng game</option><option txt="01" value="f22">|--QTAN</option><option txt="01" value="f23">|--hot video youtube</option>
các bạn viewsource đoạn jumbox của các bạn thay vào, sau đó tìm đoạn
Code:
  <option value="-1">Chọn Diễn Đàn</option>
sửa thành
Code:
<option><div class="op-last" onclick="Op1Last('')">All đàn</div></option>
[Invision]Lasttopic Full Widget16[/HIDE]
Cài đặt bài viết: QLTT Muiten Messages and email Muiten Chủ đề trong một trang: 20.<div class=fmvi-text>Thanks + Comment để thấy bài viết</div>
[Invision]Lasttopic Full 3267106205

Share this post on: reddit

GuerexBR
Re: [Invision]Lasttopic Full

Bài gửi Thu Nov 01, 2012 2:06 am by GuerexBR

công trình trong phiên bản PunBB?

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

 » Forumotion » Share Code » Last Topic » [Invision]Lasttopic Full

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