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
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 này có 5 option, tác dụng lần lượt là:Code:[tabstyle=A|B|C|D|E][/tabstyle]
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
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ỏ: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]
- Đườ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:
Mở rộng: (newbie ko cần quan tâm)Code:[tabstyle=kal_01|n|...|...|...][/tabstyle]
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:
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)Code:[tabstyle=kal_01|n|...|...|...][/tabstyle]
[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
Lưu ý: tớ đã phải đổi id mới (kal_02) để khỏi ảnh hưởng tabs bên trên.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]
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:
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][/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?
2- Nếu bạn thử với width, height, cho dù có thêm !important vẫn sẽ ko ăn thua.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]
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:
3-Code:[tabstyle=kal_02|n|display:inline-block; width:100px; height:40px||][/tabstyle]
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
nghĩa là bạn đã viết thừa 1 cách ko cần thiếtCode:[tabstyle=kal_02|n|font-size:20px; color:red|font-size:20px; color:green|font-size:20px; color:blue!important][/tabstyle]
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:
Đánh dấu