Tutorial 2x Cách làm widget dạng tab cho XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,701
Cách làm widget dạng tab cho XenForo 2

Đầu tiên bạn cần phải cấu hình các widget bạn muốn trong các tab mà không thiết lập position (Viết xuống các widget key).

Bây giờ tạo một widget html và trong template đặt code bên dưới vào:
Mã:
<div class="block">
    <div class="block-container">
         <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="url to the content"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="widget key 1">Tab title 1</a>
                 <a href="url to the content"
                        class="tabs-tab"
                        id="widget key 2"
                        role="tab">Tab title 2</a>
                 <a href="url to the content"
                        class="tabs-tab"
                        id="widget key 3"
                        role="tab">Tab title 3</a>
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="widget key 1">
                 <xf:widget key="widget key 1" />
             </li> 
             <li role="tabpanel" aria-labelledby="widget key 2">
                 <xf:widget key="widget key 2" />
             </li>
             <li role="tabpanel" aria-labelledby="widget key 3">
                 <xf:widget key="widget key 3" />
             </li>
         </ul>
     </div>
</div>
<xf:css>
.widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>

Các giá trị cần thay đổi là:
  • "url to the content"
  • "widget key 1"
  • Tab title 1
  • "widget key 2"
  • Tab title 2
  • "widget key 3"
  • Tab title 3
Trong ví dụ của của bài viết này là muốn hiển thị các chủ đề mới nhất, bài viết mới nhất và bài viết profile mới nhất, vì vậy thay thế các giá trị bằng một cái gì đó như thế này.
HTML:
<div class="block">
    <div class="block-container">
         <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="tab_lastest_threads">Latest threads</a>
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab"
                        id="tab_lastest_post"
                        role="tab">New posts</a>
                 <a href="{{ link('whats-new/profile-posts/') }}?skip=1"
                        class="tabs-tab"
                        id="tab_lastest_profile_post"
                        role="tab">Latest profile posts</a>
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="tab_lastest_threads">
                 <xf:widget key="tab_lastest_threads" />
             </li> 
             <li role="tabpanel" aria-labelledby="tab_lastest_post">
                 <xf:widget key="tab_lastest_post" />
             </li>
             <li role="tabpanel" aria-labelledby="tab_lastest_profile_post">
                 <xf:widget key="tab_lastest_profile_post" />
             </li>
         </ul>
     </div>
</div>
<xf:css>
.widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>

So sánh với đoạn code lúc đầu để làm ví dụ thay thế tương tự.

Bây giờ chỉ cần cấu hình widget key, tiêu đề, position, check option advanced mode option và lưu.

Kết quả sẽ như thế này:

brNdyzY.gif

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

secpol

MasterCorporal
Tham gia
10/06/2016
Bài viết
223
Được Like
134
Mình làm nó hiển thj ra mỗi chữ HTML.
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,701
Bạn thay các giá trị như trong bài chưa á :)
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,701
Bạn post đoạn code bạn thay lên mình xem thử :)
 

huynhvantam123

Corporal
Tham gia
28/08/2018
Bài viết
164
Được Like
43
hix xem xong vẫn ko hiểu cho lắm. Nhưng cho em hỏi là sao ko đặt key dc mà nó báo lỗi
Capture.JPG
 

huynhvantam123

Corporal
Tham gia
28/08/2018
Bài viết
164
Được Like
43
Bạn post đoạn code bạn thay lên mình xem thử :)
em cũng bị hiển thị mỗi chứ html nếu ko check vào đây
Capture1.JPG

Capture2.JPG

còn nếu check vào thì mất tiêu luôn.
code của em đây

Mã:
<div class="block block-tab-responsive">
    <div class="block-container">
         <h2 class="yhdd-widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="New_threads">Bài viết mới</a>
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab"
                        id="new_posts"
                        role="tab">Bình luận mới</a>
                <a     
                        class="tabs-tab"
                        id="Most_viewed_threads"
                        role="tab">Xem nhiều</a>
                <a     
                        class="tabs-tab"
                        id="Threads_with_more_replies"
                        role="tab">Bình luận nhiều</a>
             </span>
         </h2>
         <ul class="tabPanes yhdd-widget--tab">
             <li class="is-active" role="tabpanel" id="New_threads">
                 <xf:widget key="New_threads" />
             </li>
             <li role="tabpanel" aria-labelledby="new_posts">
                 <xf:widget key="whats_new_new_posts" />
             </li>
             <li role="tabpanel" aria-labelledby="Most_viewed_threads">
                 <xf:widget key="Most_viewed_threads" />
             </li>
                  <li role="tabpanel" aria-labelledby="Threads_with_more_replies">
                 <xf:widget key="Threads_with_more_replies" />
             </li>
         </ul>
     </div>
</div>
<xf:css>
.yhdd-widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.yhdd-widget--tab .block-minorHeader {display:none;}
</xf:css>
 

thahtrung06

Moderator
Thành viên BQT
Tham gia
12/11/2019
Bài viết
1,129
Được Like
464
Mình vẫn không hiểu làm như thế nào mong được hướng dẫn chi tiết hơn. Xin cảm ơn!
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom