.

Post new topic  Reply to topic

 » Khu thành viên » Đóng gópBảng thống kê tình hình diễn đàn dạng tabYou cannot reply to topics in this forum

#1doannamthai on 2013-02-14, 11:15 View user profile http://lop8b2.forumvi.com/
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhBảng thống kê tình hình diễn đàn dạng tab
Demo :
Bảng thông kê diễn đàn dạng tab "đa chức năng"
Demo online: http://codefm1.forumvi.com/


Bước 1 : Cho code sau vào CSS:

Code:
#thai_tab {border-bottom: 1px solid #ccc;}
#stabs {list-style: none;padding: 5px 0 4px 0;margin: 0 0 0 10px;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 13px;}
#stabs li {
  display: inline;}
#stabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#stabs li.active a {
    border-bottom: 1px solid #fff;
    background-color: #fff;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#stabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
.hotrofm_tab {
    display: none;
}
#stabs li a {
    border: 1px solid #ccc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #eeeeee;
    border-bottom: none;
    outline: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}
#thai_tab_content {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
}
Bước 2: Vào index_body tìm
Code:
<!-- BEGIN disable_viewonline -->
ĐẾN
....
<!-- END disable_viewonline -->

Xóa nó đi

Và thay bằng code
Code:
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
   
      
                  <div id="thai_tab">
    <ul id="stabs">
        <li class="active"><a href="#tab1">Ai đang trực tuyến</a></li>
        <li><a href="#tab2">Sự kiện</a></li>
        <li><a href="#tab3">Thống kê</a></li>
        <li><a href="#tab4">Liên kết</a></li>
    </ul>
</div>
        <div id="thai_tab_content">
    <div id="tab1" class="hotrofm_tab" style="display: block;">             
      <p>{TOTAL_USERS_ONLINE}
              <br />{LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS}</p>
    </div>
    <div id="tab2" class="hotrofm_tab">
<p>{NEWEST_USER}</p>
            <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            <p>{LEGEND} : {GROUP_LEGEND}</p>
    </div>
    <div id="tab3" class="hotrofm_tab">
<p>{RECORD_USERS}
              <br />{TOTAL_POSTS}
              <br />{TOTAL_USERS}</p>
    </div>
<div id="tab4" class="hotrofm_tab">
  <p><img src="http://r14.imgfast.net/users/1416/39/08/64/avatars/gallery/123_bm10.jpg" /></p>
                  </div>       
       </div>   
           
         
        </div> 
     

<!-- END disable_viewonline -->

Bước 3 : Tạo 1 Javascript mới
Title : Bảng thống kê dạng tab
Placement : In the homepage
Code :
Code:
$(document).ready(function(){
 $("#stabs li").click(function() {
 $("#stabs li").removeClass('active');
 $(this).addClass("active");
  $(".hotrofm_tab").hide();
 var selected_tab = $(this).find("a").attr("href");
    $(selected_tab).fadeIn();
        return false;
    });
});

Chú ý nếu các bạn muốn xóa tab bất kỳ thì làm theo các bước
Vào index_body tìm
Code:
<li><a href="#tabsố tab muốn xóa">
Thay số tab mà bạn muốn xóa vào và xóa code đó đi
Tiếp theo tìm
Code:
 <div id="tabsố tab tương ứng" class="hotrofm_tab">
Và xóa đi

Hướng dẫn thêm tab:
VD : thêm tab với code nguyên phía trên vào tìm :
Code:
<li><a href="#tab4">Liên kết</a></li>
và thêm sau nó
Code:
 <li><a href="#tab5">Tên tab</a></li>
Và tìm

Code:
<div id="tab4" class="hotrofm_tab">
  <p><img src="http://r14.imgfast.net/users/1416/39/08/64/avatars/gallery/123_bm10.jpg" /></p>
                  </div>       
thêm sau nó cấu trúc:
Code:
<div id="tab5" class="hotrofm_tab">
  <p>Nội dung</p>
                  </div> 


Thế là xong
Tác giả : doannamthai
#2chupy on 2013-02-14, 18:21 View user profile http://www.cntt-k3.org
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab
cái này share từ lâu lắm rồi
#3doannamthai on 2013-02-14, 19:02 View user profile http://lop8b2.forumvi.com/
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab
đã share đâu chupy ::> chỉ có thấy nhưng chưa ai share
#4Alexander on 2013-02-14, 19:10 View user profile http://hoianhem.forumvi.com
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab
ngày càng pro
#5truongchun on 2013-02-16, 09:42 View user profile http://www.kage9x.tk
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab
cái này có lâu rồi + mình cũng từng dùng qua 2 lần
#6tuancfno05 on 2013-02-16, 22:44 View user profile http://vn-answer.123.st/forum
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab
cái này share rồi nè ! của xaydungthanhhoa
code trên cũng cùng style => thay đổi 1 số class => cuối cùng cũng là xaydungthanhhoa ( zualuoi ) share trước nên ko tính tác giả là thớt nhá
#7admin on 2013-02-18, 15:51 View user profile http://www.fmvi.vn gialangsangai@yahoo.com
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab
Nếu không xác minh được là do bạn viết mình sẽ hủy bài này!
#8doannamthai on 2013-02-18, 17:34 View user profile http://lop8b2.forumvi.com/
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab
Mình dựa vào đây mà viết nếu biết đã có rồi share làm gì để mang thêm phiền phức
http://stackoverflow.com/questions/3912729/jquery-tabs-selection
#9admin on 2013-02-18, 18:12 View user profile http://www.fmvi.vn gialangsangai@yahoo.com
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab
Cái này là sao?
Code:
class="hotrofm_tab"
#10doannamthai on 2013-02-18, 18:20 View user profile http://lop8b2.forumvi.com/
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab
#11Sponsored content Today at 14:56
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Bảng thống kê tình hình diễn đàn dạng tab

You are not connected. Please login or register

Bài cùng chuyên mục

Tìm kiếm

Tìm theo chủ đề

Bài cùng tác giả

Tên thành viên


Chia sẻ

Chia sẽ

Bắt đầu

Sơ đồ

Sơ đồ diễn đàn

Thiết đặt