oOo VnSharing oOo

Go Back   Diễn đàn > VnSharing - Trung tâm điều hành > Hướng dẫn - Hỏi đáp > BBcode >

Trả lời
Kết quả 1 đến 10 của 77
 
  • Công cụ
  • Hiển thị
    1. #1

      VnS Icon BBcode [VTABS] [TABSTYLE]



      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:
      [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??? @[email protected]
      [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:

      Sửa lần cuối bởi Kaldorei; 01-02-2015 lúc 17:04.
      Trả lời kèm trích dẫn

    2. Tabstyle

      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]

      [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
      Nếu còn nhã ý với vnsharing bạn có thể vào sv vnsharing= mã discord sau
      Code:
      https://discord.gg/BgZZpnQ
      chỗ này là từ vns fb page mà ra, cũng khá đông
      nếu bạn vào, bạn có thể để lại 1 câu chào ở general talk, mình sẽ ra chào
      Trả lời kèm trích dẫn

    3. 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




      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       



      BBCode by Hitomaru




















      Trả lời kèm trích dẫn

    4. #4
      Tham gia ngày
      13-11-2014
      Bài viết
      105
      Cấp độ
      38
      Reps
      1888
      Ứ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
      Sửa lần cuối bởi PhiếnTử; 23-11-2014 lúc 21:25.
      Trả lời kèm trích dẫn

    5. Trích dẫn Gửi bởi HitomaruKonpaku Xem bài viết
      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




      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       



      BBCode by Hitomaru


















      nó éo gộp lại làm 1 mà ra ~ line kìa lão ey
      Trả lời kèm trích dẫn

    6. cái trò tabstyle làm spoil thì có ở forum trước rồi
      nhớ có thuộc tính display: none nữa
      hình như là chỉ cần làm 2 tab với box là chuẩn rồi
      Trả lời kèm trích dẫn

    7. Trích dẫn Gửi bởi Snake ♥ Fox Xem bài viết
      nó éo gộp lại làm 1 mà ra ~ line kìa lão ey
      Là sao chưa hiểu?

      Còn nếu là về vấn code cách dòng thì đang cố tình đó =)

      Ai soi thì dễ nhìn hơn
      Trả lời kèm trích dẫn

    8. Trích dẫn Gửi bởi HitomaruKonpaku Xem bài viết
      Là sao chưa hiểu?

      Còn nếu là về vấn code cách dòng thì đang cố tình đó =)

      Ai soi thì dễ nhìn hơn
      ra là thế, tưỡng nó sai chổ nào mà k gộp lại làm 1
      Trả lời kèm trích dẫn

    9. #9
      Trích dẫn Gửi bởi HitomaruKonpaku Xem bài viết
      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




      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       


      CharImage
       



      BBCode by Hitomaru


















      Có cách nào làm đẹp giống nàng mà không phải dùng PTS chỉnh ảnh không
      Trả lời kèm trích dẫn

    10. Trích dẫn Gửi bởi Ngơ Ăn Hại Xem bài viết
      Có cách nào làm đẹp giống nàng mà không phải dùng PTS chỉnh ảnh không
      Là sao không hiểu? Đoạn trên mình toàn xài ảnh gốc mà
      Trả lời kèm trích dẫn

    Đánh dấu

    Quyền viết bài

    • Bạn không thể đăng chủ đề mới
    • Bạn không thể gửi trả lời
    • Bạn không thể gửi đính kèm
    • Bạn không thể sửa bài
    •  

    Theo giờ GMT +7. Bây giờ là 04:56.

    Powered by vBulletin.
    Copyright© 2021 vBulletin Solutions, Inc. All rights reserved.
    Board of Management accepts no responsibility legal of any resources which is shared by members.