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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,803
Được Like
11,099
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

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

caolaogia7

Thượng Đế
Tham gia
15/03/2017
Bài viết
163
Đượ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


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom