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

PVS

Generalissimo
Thành viên BQT
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​
 

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

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

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