BBcode [VTABS] [TABSTYLE]

**Kaldorei** · 13-11-2014, 10:54

Headnote

Bạn Kal viết tut chậm trễ là vì e... forum lại sập nữa

(lần trước mới lập topic giới thiệu code được vài ngày là forum cũ sập

Yêu cầu:

đã biết sử dụng code TABS/TAB thông thường
code MOC
nắm được kha khá cách style code BOX

I/ VTABS

Code TABS thông thường tạo tabs ngang thế này:

Thay [TABS] bằng [VTABS] ta được tab dạng dọc

BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCn Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCn Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCn Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã

ulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thmột ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thmột ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thmột ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là

ard Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết t ard đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết t ard đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết t ard đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết t ard đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết t ard Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết t

c thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là vc thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là vc thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là vc thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là vc hêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là vc thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là vc thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode có thể được gọi là mã BBCode là vc thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là vc thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là vc thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là viết tắt của Bulletin Board Code, đây là một ngôn ngữ nhỏ được thêm vào để định dạng bài viết cho các bản tin. BBCode cũng có thể được gọi là mã BBCode là v

Code:

[vtabs]
[tab=tiêu đề 1] Nội dung 1 [/tab]
[tab=tiêu đề 2] Nội dung 2 [/tab]
[tab=tiêu đề 3] Nội dung 3 [/tab]
[tab=tiêu đề 4] Nội dung 4 [/tab]
[/vtabs]

II/ TABSTYLE

Tác dụng: trang trí lại TABS (hoặc VTABS) theo ý thích.
Cách sử dụng:
- Bọc code [MOC] quanh [TABS] (hoặc [VTABS]):

- Sử dụng code TABSTYLE:
Cú pháp:

Code:

[tabstyle=A|B|C|D|E][/tabstyle]

Code này có 5 option, tác dụng lần lượt là:

A, gọi là id của code tabstyle, chỉ định code TABSTYLE này sẽ tác dụng lên tất cả các TABS, VTABS nằm trong những cái hộp dán nhãn "A" (do MOC tạo nên)
Thử liền xem nào:

Nội dung 1

Nội dung 2

Nội dung 3

Nội dung 4

Code:

[moc=kal_01][tabs]
[tab=tiêu đề 1] Nội dung 1 [/tab]
[tab=tiêu đề 2] Nội dung 2 [/tab]
[tab=tiêu đề 3] Nội dung 3 [/tab]
[tab=tiêu đề 4] Nội dung 4 [/tab]
[/tabs][/moc]
[tabstyle=kal_01||||][/tabstyle]

Ko thay đổi nhiều lắm nhỉ? Là vì các option C,D,E chưa viết gì. Hiện tại chỉ thấy 1 số thay đổi nhỏ:
- Đường viền phần nội dung bên dưới đã mất, mục đích để các bạn tự tạo viền theo ý muốn.
- Nếu mắt bạn có khả năng đặc biệt, bạn còn có thể thấy màu nền của phần nội dung và thanh tiêu đề đã từ trắng thành... trong suốt :trollface: Mục đích cũng là để bạn thoải mái design lại theo ý mình. (Vd, chỉ với code TABS thông thường, bạn ko thể làm nền tab mờ mờ, nhìn xuyên được xuống bên dưới.)

B, gọi đó là selector của code, chỉ định code TABSTYLE này sẽ tác dụng lên nút tab thứ mấy,
Vd: muốn trang trí nút thứ 4, thì sẽ viết [tabstyle=kal_01|4|...|...|...][/tabstyle]
Sau đó làm tiếp nút 3,2,1 sẽ viết thêm 3 dòng tabstyle riêng biệt nữa.
Đấy là nếu muốn trang trí mỗi nút 1 kiểu, còn nếu muốn cả 4 nút cùng 1 kiểu thì chỉ cần 1 dòng:

Code:

[tabstyle=kal_01|n|...|...|...][/tabstyle]

Mở rộng: (newbie ko cần quan tâm)

Lưu ý lại lần nữa: nếu muốn cả 4 nút cùng 1 kiểu thì chỉ cần 1 dòng:

Code:

[tabstyle=kal_01|n|...|...|...][/tabstyle]

Nếu muốn 3 tab đầu cùng 1 kiểu, riêng tab cuối kiểu khác thì cần 2 dòng (style viết sau đè style viết trước)
[tabstyle=kal_01|n|...|...|...][/tabstyle]
[tabstyle=kal_01|4|...|...|...][/tabstyle]
Đề nghị các bạn sử dụng tabstyle, cũng như điện, giấy, nước sạch.... thật hiệu quả và tiết kiệm

để góp phần...bảo vệ môi trường

C/D/E lần lượt là style của nút tiêu đề trạng thái thường/ khi được hover (dí chuột lên)/ và khi active (trở thành tab hiện hành)
Dĩ nhiên muốn dùng cái này đòi hỏi phải nắm được kha khá cách viết style, như khi viết style trong code BOX ấy. VD:

Nội dung 1

Nội dung 2

Nội dung 3

Nội dung 4

Code:

[moc=kal_02][tabs]
[tab=tiêu đề 1] Nội dung 1 [/tab]
[tab=tiêu đề 2] Nội dung 2 [/tab]
[tab=tiêu đề 3] Nội dung 3 [/tab]
[tab=tiêu đề 4] Nội dung 4 [/tab]
[/tabs][/moc]
[tabstyle=kal_02|n|border:2px solid gray|border:2px dotted red|border:2px solid red][/tabstyle]

Lưu ý: tớ đã phải đổi id mới (kal_02) để khỏi ảnh hưởng tabs bên trên.

Một số vấn đề hay gặp khi viết style C / D / E:
1- Ở trên tớ dùng border làm ví dụ, nhưng nếu bạn thử với color, hoặc background chẳng hạn thì sẽ...fail lòi

) vd:

Code:

[tabstyle=kal_02|n|color:gray|color:pink|color:red][/tabstyle] 
>> color tab hiện hành vẫn là màu đen??? @_@
[tabstyle=kal_02|n|background:gray|background:pink|background:red][/tabstyle] 
>> background khi hover vào vẫn là màu trắng??? wth?

Lý do là vì TABS đã có 1 số style mặc định, để đè được style đó bạn cần !important như sau:

Code:

[tabstyle=kal_02|n|color:gray|color:pink|color:red!important][/tabstyle]
[tabstyle=kal_02|n|background:gray|background:pink!important|background:red][/tabstyle]

2- Nếu bạn thử với width, height, cho dù có thêm !important vẫn sẽ ko ăn thua.
Lý do là vì nút tiêu đề vốn ko chịu nhận width, height, bạn phải thêm display:inline-block thế này:

Code:

[tabstyle=kal_02|n|display:inline-block; width:100px; height:40px||][/tabstyle]

3-
style trạng thái cơ bản là C.
style trạng thái hover là C + D.
style trạng thái active là C + E.
Vì vậy nếu viết

Code:

[tabstyle=kal_02|n|font-size:20px; color:red|font-size:20px; color:green|font-size:20px; color:blue!important][/tabstyle]

nghĩa là bạn đã viết thừa 1 cách ko cần thiết

4- Skill cuối cùng, dùng trong trường hợp bạn...ko rành cách viết style, hoặc style bạn cần quá phức tạp:

Hãy kiếm mấy cái ảnh làm nút tiêu đề, rồi xây dựng như sau:

Code:

[moc=kal_05][tabs]
[tab=Truyện dịch]............[/tab]
[tab=Vietsub]............[/tab]
[tab=Manga List]............[/tab]
[tab=Anime List]............[/tab]
[/tabs][/moc]

Link ảnh:
http://vnsharing.site/forum/vbbdesig...truyendich.jpg - khi hover http://vnsharing.site/forum/vbbdesig...dichholder.jpg
http://vnsharing.site/forum/vbbdesig...nu/vietsub.jpg - khi hover http://vnsharing.site/forum/vbbdesig...tsubholder.jpg
http://vnsharing.site/forum/vbbdesig.../mangalist.jpg - khi hover http://vnsharing.site/forum/vbbdesig...listholder.jpg
http://vnsharing.site/forum/vbbdesig.../animelist.jpg - khi hover http://vnsharing.site/forum/vbbdesig...listholder.jpg
Kích thước: 130 x 43 px
Đầu tiên quy định kích thước các nút tab thế này, kết hợp xóa viền, làm biến mất phần chữ:

Code:

[tabstyle=kal_05|n|display:inline-block; width:130px; height:43px; padding:0; border:none; font-size:0||][/tabstyle]

Đặt ảnh nền cho từng nút tab:

Code:

[tabstyle=kal_05|1|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/truyendich.jpg')|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/truyendichholder.jpg')!important|][/tabstyle]

Làm với cả 4 nút tab ta sẽ được:

nội dung 1

nội dung 2

nội dung 3

nội dung 4

Code:

[moc=kal_05][tabs]
[tab=Truyện dịch] nội dung 1 [/tab]
[tab=Vietsub] nội dung 2 [/tab]
[tab=Manga List] nội dung 3 [/tab]
[tab=Anime List] nội dung 4 [/tab]
[/tabs][/moc]
[tabstyle=kal_05|n|display:inline-block; width:130px; height:43px; padding:0; border:none; font-size:0||][/tabstyle]
[tabstyle=kal_05|1|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/truyendich.jpg')|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/truyendich.jpg')!important|][/tabstyle]
[tabstyle=kal_05|2|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/vietsub.jpg')|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/vietsubholder.jpg')!important|][/tabstyle]
[tabstyle=kal_05|3|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/mangalist.jpg')|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/mangalistholder.jpg')!important|][/tabstyle]
[tabstyle=kal_05|4|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/animelist.jpg')|background:url('http://vnsharing.site/forum/vbbdesign/vnsharing/menu/animelistholder.jpg')!important|][/tabstyle]

**Robert D. Alexander** · 23-11-2014, 17:19

mình chỉ làm tut sơ sơ thôi, ai có ý kiến thì nói giúp, trình còn gà lắm TT^TT
Cú pháp
đầu tiên ta đặt moc vào trong code [tabs] hay [vtabs]

PHP Code:


[moc=demo]
[tabs]
[tab=Go]
Mắc
[tab=a]
Gì
[tab=Way!!]   
Quan tâm!?!?
[/tabs]
[/moc]

sau đó ta làm code tabstyle với cú pháp sau

PHP Code:


[tabstyle=A|B|C|D|E][/tabstyle]

với A là tên của moc; B là các lựa chọn, n áp dụng cho tất cả; C, D, E lần luợt là trạng thái khi inactivate, hover và active
Do quên hết cú pháp rồi nên mọi người thông cảm TT^TT
ai có ví dụ thì ghi ra đi, từ đơn giản đến nâng cao nha
mong mọi người giúp đỡ
cảm nhận riêng: mới add code có 2, 3 ngày mà forum đóng cửa, ức cho cái code quá TT^TT, chưa vọc đã nữa

**HitomaruKonpaku** · 23-11-2014, 19:15

Thôi chưa có ai mở hàng mình xin lấy lại hàng của mình trong topic hỏi đáp

http://vnsharing.site/forum/showthre...0799#post50799

**PhiếnTử** · 23-11-2014, 20:21

Ứng dụng tabstyle để làm spoil

Tabs là Spoil, Spoil là Tabs :3

Có thể hiểu tabstyle tác động đến tiêu đề của các tab con trong tabs, không có tác động đến nội dung tab.

Tabstyle n là điều khiển tổng quát tất cả tab con, như ví dụ trên là trong tabstyle n có font-size, color, width,... đều để trang trí tiêu đề tất cả tab con. Tuơng tự tabstyle 1 và 2 là để trang trí vào chi tiết từng tab con. (cái này theo suy nghĩ của bản thân, ko hề có chứng thực...)

Thủ thuật trên có thể hiểu là khi không được chọn thì tiêu đề tab con có width là 80px, font-size là 16px, mục đích để nổi lên để chọn nó. Khi đã được chọn thì width là 0px, font-size là 1px, mục đích để chìm xuống và 2 tab đè lên nhau, vì lúc nào cũng bắt buộc phải có 1 tab đc chọn nên suy ra lúc nào 2 cái cũng đè nhau :v Tổng kết lại thì nó vẫn là tab thôi, nhưng có cảm giác là spoil, đuơng nhiên là tab được làm Ẩn phải ko có nội dung.

Bên trên chỉ là code đơn giản trong đơn giản, khâu trang trí là ở các bạn :3