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

[PVS]

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:

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

<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:

​

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

Nguồn: xenforo.com​

 

[secpol]

Mình làm nó hiển thj ra mỗi chữ HTML.

 

[PVS]

Bạn thay các giá trị như trong bài chưa á

 

[secpol]

Bạn thay các giá trị như trong bài chưa á

Mình thay rồi.

 

[PVS]

Bạn post đoạn code bạn thay lên mình xem thử

 

[huynhvantam123]

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

 

[huynhvantam123]

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

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

<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]

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!