.

Post new topic  Reply to topic

 » Nhóm phát triển » Thử nghiệm mods[Thử nghiệm] BBcode tabsYou cannot reply to topics in this forum

#1admin 2012-12-11, 19:50 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 nhanh[Thử nghiệm] BBcode tabs
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.
#2admin 2012-12-12, 09:38 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: [Thử nghiệm] BBcode tabs
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.
#3ligerv 2012-12-12, 11:17 http://www.skin4fm.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: [Thử nghiệm] BBcode tabs
thử nhá bác
  • FB skin[Thử nghiệm] BBcode tabs Facebo12
  • Fm skin[Thử nghiệm] BBcode tabs Firesh15
#4admin 2012-12-12, 14:03 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: [Thử nghiệm] BBcode tabs
  • 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]
#5admin 2012-12-12, 20:25 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: [Thử nghiệm] BBcode tabs
Để 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).
#6♥ phutu01 2012-12-12, 21:07 http://phutu.7forum.net
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: [Thử nghiệm] BBcode tabs
  • texttext
  • texttext
#7handsomevip007 2012-12-12, 21:14
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: [Thử nghiệm] BBcode tabs
  • Về BBCode TabTheo ý kiến cá nhân là em khoái cái này rồi đó [Thử nghiệm] BBcode tabs 2843714615
  • Về phát triển thêmCác trang viết code riêng hay quá =p~ Thử ngâm cứu làm một trang soạn thảo riêng với nhiều công cụ luôn đi huynh [Thử nghiệm] BBcode tabs 2843714615
#8admin 2012-12-12, 21:48 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: [Thử nghiệm] BBcode tabs
Cấu trúc này có lẽ làm được cái BBcode column
#9♥ phutu01 2012-12-13, 14:36 http://phutu.7forum.net
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: [Thử nghiệm] BBcode tabs
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
#10♥ phutu01 2012-12-13, 14:38 http://phutu.7forum.net
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: [Thử nghiệm] BBcode tabs

Ảnh 1Ảnh 2Ảnh 3Ảnh 4Ảnh 5Ảnh 6Ảnh 7Ảnh 8Ảnh 9Ảnh 10

  • [Thử nghiệm] BBcode tabs 111
  • [Thử nghiệm] BBcode tabs 311
  • [Thử nghiệm] BBcode tabs 712
  • [Thử nghiệm] BBcode tabs 811
  • [Thử nghiệm] BBcode tabs 613
  • [Thử nghiệm] BBcode tabs 511
  • [Thử nghiệm] BBcode tabs 910
  • [Thử nghiệm] BBcode tabs 1010
  • [Thử nghiệm] BBcode tabs 412
  • [Thử nghiệm] BBcode tabs 214
#11ligerv 2012-12-13, 18:06 http://www.skin4fm.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: [Thử nghiệm] BBcode tabs
  • 1Bà nhỏ phiền ông cứ bỏ nhà
    Ba thê bảy thiếp hóa bê tha
    Mất toi tiền lại về moi tất
    Qua hết sắc thời đến... kết hoa!
    Bà nhỏ phiền ông cứ bỏ nhà
    Ba thê bảy thiếp hóa bê tha
    Mất toi tiền lại về moi tất
    Cho bả hết tình chết bỏ cha
  • 2
    Biết thế mà...ỉm rõ thật lâu
    Để Chừ Dôi nghĩ bạc chân râu
    Cả ngày toàn nói xuôi nói ngược
    Hàng xóm bảo nhau: nó ấm đầu
    Bà nhỏ phiền ông cứ bỏ nhà
    Ba thê bảy thiếp hóa bê tha
    Mất toi tiền lại về moi tất
    Khá to chuyện rồi xử khó ta
#12thanhkent 2012-12-13, 20:28 http://thanhkent.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: [Thử nghiệm] BBcode tabs
  • 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
#13lucr123 2012-12-14, 12:07 http://vietshare.5forum.net/
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: [Thử nghiệm] BBcode tabs
  • 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
#14Sponsored 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: [Thử nghiệm] BBcode tabs

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