.

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 2013-02-14, 11:15 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ê tình hình diễn đàn dạng tab Bngthngk
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 2013-02-14, 18:21 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 Bảng thống kê tình hình diễn đàn dạng tab 2843714615
#3doannamthai 2013-02-14, 19:02 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 2013-02-14, 19:10 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 2013-02-16, 09:42 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 2013-02-16, 22:44 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 2013-02-18, 15:51 http://www.fmvi.vn
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 2013-02-18, 17:34 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 2013-02-18, 18:12 http://www.fmvi.vn
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 2013-02-18, 18:20 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
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