Demo: https://i.servimg.com/u/f40/17/70/81/78/12-11-10.jpg

Tester: http://www.fmvi.vn/h159-bbcode

Cấu trúc BBcode:

Code:

[tab width=XY]{ITEM}[/tab]

Trong đó:

Code:

 width=XY

Phần này xác định độ rộng của tab, có thể có hoặc không. X chỉ nhận 3 ký tự số, còn Y là đơn vị px,pt,em,%,auto hoặc không có đơn vị.

{ITEM} tương ứng với [item={TEXT1}]{TEXT2}[/item], khi muốn thêm tab mới chỉ cần thêm cấu trong này trong thẻ [tab]

{TEXT1}: Phần này là tên tab.

{TEXT2}: Phần này là nội dung tab.

Mã xử lý BBcode:

Code:

str.replace(/\[item\=(.*?)\]((\n|.)*?)\[\/item\]/gi, "[*][b]$1[/b]$2").replace(/\[tab(\swidth\=((\d{0,3}(px|em|%|pt)?)|auto)?)?\]((\n|.)*?)\[\/tab\]/gi, "[table class=fmvitab$1][tr][td][list]$5[/list][/td][/tr][/table]")

Sau khi xử lý xong nó sẽ chuyển về BBcode table, bold và list.

Code:

[table class=fmvitab width=500px][tr][td][list][*][b]{TEXT1}[/b]{TEXT2}[/list][/td][/tr][/table]

Từ đây mình sẽ thêm mã CSS và javascript để đưa nó thành dạng tab sử dụng được.

Code:

/* CSS BBcode tab */
.fmvitab{display:none;margin:0 auto}
.fmvitab td > strong{cursor:pointer;display:inline-block;padding:5px 10px}
.fmvitab td > strong.active{background-color:#6F6E6E;color:#FFF;cursor:default}
.fmvitab ul{border:1px solid #DDD;list-style:none outside none;width:100%;margin:0!important;padding:10px}
.fmvitab li{display:none}
.fmvitab li.active{display:block}

Code:

$(function () {
   $(".fmvitab").each(function () {
      var $fmvitab = $(this);
      $fmvitab.find("li > strong").prependTo($fmvitab.find("td"));
      $fmvitab.show().find("li:first, td>strong:first").addClass("active");
      $fmvitab.find("td>strong").click(function () {
         var n = $fmvitab.find("td>strong").index(this);
         $fmvitab.find("li, td>strong").removeClass("active");
         $fmvitab.find("li:eq(" + n + "), td>strong:eq(" + n + ")").addClass("active");
      });
   });
});

Xem và cho ý kiến nha, nhất là cái mã xử lý BBcode, mình chưa rành dùng Regex lắm.
Hiện đang sử dụng ở chức năng trả lời nhanh.
Có thể dùng nhiều tab trong một bài viết, nhưng không thể lồng tab vào trong tab. Khả năng có hạn, mình không xử lý được trường hợp này.

str là ký hiệu chuỗi (cái này w3s hay dùng).
Tùy trường hợp sử dụng mà lấy chuỗi khác nhau. Đây là bản thử nghiệm nên chưa hướng dẫn chi tiết.

thử nhá bác

FB skin Fm skin

Tên tab 1Nội dung tab 1 Tên tab 2Nội dung tab 2 Tên tab 3Nội dung tab 3 Tên tab 4Nội dung tab 4

CSSCSS là chữ viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ đơn thuần là một file có phần mở rộng là .css, trong file này chứa những câu lệnh CSS, mỗi câu lệnh css sẽ định dạng một thành phần nhất định của tài liệu HTML như màu sắc, font chữ... Thế mạnh của CSS: Tách riêng phần định dạng ra khỏi nội dung trang web HTMLHTML (Hyper Text Markup Language) tạm dịch là ngôn ngữ đánh dấu siêu văn bản. HTML không đóng vai trò là ngôn ngữ lập trình, nhưng lại vô cùng quan trọng trong việc thể hiện và trình bày trang web. Một trang web không thể vận hành nếu thiếu HTML. Do đó nắm vững được HTML sẽ là yếu tố cần thiết để bước vào thế giới web. Bài viết này mình sẽ giới thiệu một chút về HTML, mong rằng nó sẽ giúp ích cho các bạn mới bắt đầu tìm hiều về web và HTML. Một tài liệu … JQUERYjQuery là một Javascript Framework, hỗ trợ các nhà lập trình web tạo ra các tương tác trên website một cách nhanh nhất. jQuery được khởi xướng bởi John Resig (hiện là trưởng dự án của Mozzila) vào năm 2006, jQuery có mã nguồn mở và hoàn toàn miễn phí. jQuery có một cộng đồng sử dụng đông đảo và được rất nhiều lập trình tham gia hoàn thiện, phát triển và viết Plugin. jQuery luôn là lựa chọn trước tiên của mình trong công việc khi phát triển các dự án website. Tại sao dùng jQuery ? jQuery đơn giản…

Tên tab 1Nội dung tab 1 Tên tab 2Nội dung tab 2

Code:

[tab width=500px][item=Tên tab 1]Nội dung tab 1[/item]
[item=Tên tab 2]Nội dung tab 2[/item]
[item=Tên tab 3]Nội dung tab 3[/item]
[item=Tên tab 4]Nội dung tab 4[/item][/tab]

[tab width=700][item=CSS]CSS là chữ viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ đơn thuần là một file có phần mở rộng là .css, trong file này chứa những câu lệnh CSS, mỗi câu lệnh css sẽ định dạng một thành phần nhất định của tài liệu HTML như màu sắc, font chữ...
Thế mạnh của CSS:
Tách riêng phần định dạng ra khỏi nội dung trang web[/item]
[item=HTML]HTML (Hyper Text Markup Language) tạm dịch là ngôn ngữ đánh dấu siêu văn bản. HTML không đóng vai trò là ngôn ngữ lập trình, nhưng lại vô cùng quan trọng trong việc thể hiện và trình bày trang web. Một trang web không thể vận hành nếu thiếu HTML. Do đó nắm vững được HTML sẽ là yếu tố cần thiết để bước vào thế giới web. Bài viết này mình sẽ giới thiệu một chút về HTML, mong rằng nó sẽ giúp ích cho các bạn mới bắt đầu tìm hiều về web và HTML. Một tài liệu …[/item]
[item=JQUERY]jQuery là một Javascript Framework, hỗ trợ các nhà lập trình web tạo ra các tương tác trên website một cách nhanh nhất. jQuery được khởi xướng bởi John Resig (hiện là trưởng dự án của Mozzila) vào năm 2006, jQuery có mã nguồn mở và hoàn toàn miễn phí. jQuery có một cộng đồng sử dụng đông đảo và được rất nhiều lập trình tham gia hoàn thiện, phát triển và viết Plugin. jQuery luôn là lựa chọn trước tiên của mình trong công việc khi phát triển các dự án website. Tại sao dùng jQuery ? jQuery đơn giản…[/item]
[/tab]

[tab][item=Tên tab 1]Nội dung tab 1[/item][item=Tên tab 2]Nội dung tab 2[/item][/tab]

Để tránh nhầm lẫn, mình đã thay đổi cấu trúc mới như sau:

Code:

[tab][item=text]text[/item][item=text]text[/item][/tab]

Mở trang soạn thảo BBcode Tab bằng nút tắt:
https://i.servimg.com/u/f12/17/70/81/78/12-12-10.jpg

Giao diện trang soạn thảo BBcode Tab:
https://i.servimg.com/u/f12/17/70/81/78/12-12-12.jpg
https://i.servimg.com/u/f12/17/70/81/78/12-12-14.jpg

Khi nhấn Lấy BBcode, code sẽ được chép vào cuối văn bản mà bạn đang soạn (Không hỗ trợ wysiwyg).

texttext texttext

Cấu trúc này có lẽ làm được cái BBcode column

Tôi mới nãy ra thêm ý tưởng lỡ tạo ra tới 10 tabs ,tại sao ông ko thêm 1 nút < > chuyển