Help - Tạo BBcode Tabs Cho Bài Viết

[Kool Prince]

Mình biết có cái dạng BBcode này

value
Example Usage Nội dung tab 1 ở đây. Xuống dòng thoải mái. Nội dung tab 2 ở đây.
Example Output Nội dung tab 1 ở đây. Xuống dòng thoải mái. Nội dung tab 2 ở đây.

Demo ở đính kèm. Nhưng mình không biết làm sao chèn vào forum. Có ai biết thì hướng dẫn bình chèn BBcode này vào nhé. Cảm Ơn

Mình mới được share mã nguồn của cái code này. Tuy nhiên nó không phải là bbcode nên phải chế biến lại một chút mới xài được. Bạn nào pro thì làm lại giúp mình với

http://www.barelyfitz.com/projects/tabber/

[nguyendungbkc]

ai biết chỉ dùm, mình cũng đang cần code này lắm, code này mình thấy bên VNS có:
Demo: http://vnsharing.net/forum/showthread.php?t=228873

[nguoimientay.info]

Mình tìm được code này. Nhờ BQT kiểm tra và hướng dẫn cho mọi người nhé

Đặt code tại Below the boards



<script type='text/javascript'>
$('.c_post:contains("[/tabs]")').each(function(){
$(this).html($(this).html().replace(/\+?))?\](.+?)\[\/tabs\]/gi, function(tabs,g1,g2) {
tabrollheader=""
tabcount = 2
tabrollbody = ""
g2.replace(/\(.+?)\[\/tab\]/gi, function(tab,h1,h2) {
tabrollheader += "<td class='tabtab' name='"+tabcount+"' style='cursor:pointer;'>"+h1+"</td>"
tabrollbody += "<div class='tabdiv' style='display:none;'>"+h2+"</div>";
tabcount++
});
if(g1){tabwidth = " style='width:"+g1+"'";}else{tabwidth = "";};
tabrollhead = "<table"+tabwidth+" class='posttabs'><tr><td style='width:5px;border-top:0;border-left:0;background:none;'></td>"
tabroll = "</tr><tr><td colspan='"+tabcount+"'>"+tabrollbody+"</td></tr></table>"
tabrollheader += "<td style='width:5px;border-top:0;border-right:0;background:none;'></td></tr>"
return tabrollhead+tabrollheader+tabroll
}));
});

$('.posttabs').each(function(){
$(this).find('.tabtab:first').addClass("activetab");
$(this).find('.tabdiv:first').show();
});

$('.tabtab').live('click', function(){
$(this).parent().parent().find('.activetab').remov eClass('activetab');
$(this).addClass('activetab');
tabnum = $(this).attr('name')
tabnum=tabnum-2
$(this).parent().parent().find('.tabdiv').hide();
$(this).parent().parent().find('div:eq('+tabnum+') ').show();
});
</script>

<style type='text/css'>
.activetab{
font-weight: 900;
}
</style>


Cách sử dụng như sau:

- Sử dụng một thẻ BBcode: .....
- Tạo với Tab1: .....
- Nếu 2 Tab trở lên: [tabs].....[tab=tab2].....
- Nếu muốn chỉnh chiều rộng cho TAb: [tabs=50%] or [tabs=750px]

[PhucSD]

Dùng mod này thử nhé

[t8mclub]

Thành công......:MatCuoi (23):

[nguoimientay.info]

Dùng mod này thử nhé

Dùng rất tốt, cám ơn bạn PhucSD

[Kool Prince]

Dùng được nhưng còn hơi hạn chế tí về cách trình bày bạn ơi. Khi mình xuống dòng thì mấy tab nó cũng xuống dòng theo. Thành ra không hay, mà lại màu mè rườm rà hơn cái của VNS. Mình chân thành cảm ơn bạn đã chia sẻ nhưng đó không phải là cái mình cần. Cảm ơn nhiều vì tinh thần share :>