Tutorial 2x Collapsible Node Categories - Thu gọn Node Category cho XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Collapsible Node Categories - Thu gọn Node Category cho XenForo 2

Cách đơn giản để cung cấp cho người dùng khả năng thu gọn các node mà họ không quan tâm. Sự lựa chọn của họ được lưu lại vì vậy khi họ làm mới trang hoặc ghé thăm lại trang web của bạn thì các node họ đã đóng sẽ vẫn đóng.

Chỉnh sửa này hỗ trợ style mặc định, không có style của bên thứ ba sẽ nhận được hỗ trợ. Cùng với đó nếu bạn sử dụng các style Pixel Exit thì điều này đã được xây dựng trong mỗi style.

Bạn phải sử dụng ít nhất XF 2.0.3 trở lên.

Mở template: node_list_category

Tìm:
Mã:
<div class="block block--category block--category{$node.node_id}">

Thay bằng:
Mã:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">

Tìm:
Mã:
<h2 class="block-header">

Thêm đoạn code sau vào bên dưới:
Mã:
<div class="block-header--left">

Tìm:
Mã:
<div class="block-desc">{$node.description|raw}</div></xf:if>

Thêm đoạn code bên dưới vào phía sau dòng trên:
Mã:
</div>

Tìm </h2>, thêm đoạn code sau vào phía trên:
Mã:
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>

Tìm:
Mã:
<div class="block-body">

Thay bằng:
Mã:
<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">

Thêm vào template extra.less:
Mã:
/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}

8h3SqbT.gif

Tùy chọn không bắt buộc:
Điều này sẽ tạo ra một hiệu ứng chuyển đổi đáng chú ý hơn, nếu bạn muốn thì thêm vào extra.less đoạn code sau:
Mã:
.block-body.block-body--collapsible
{
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}

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


Nguồn: xenforo.com​
 

amocthong

Private
Tham gia
10/09/2015
Bài viết
36
Được Like
16
rất hay thích kiểu như này thích sài kiểu k add on :D
 

caolaogia7

Corporal
Tham gia
15/03/2017
Bài viết
164
Được Like
52
hay quá cám ơn chủ thớt. Mong có nhiều hướng dẫn dành cho xen2 điển hình là 2.0.4 (vì em đang vọc 2.0.4) ]:)
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom