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

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 26/03/2018.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,755
    Đã được thích:
    7,003
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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ã:
    Thay bằng:
    Mã:
    Tìm:
    Mã:

    Thêm đoạn code sau vào bên dưới:
    Mã:
    Tìm:
    Mã:
    {$node.description|raw}
    Thêm đoạn code bên dưới vào phía sau dòng trên:
    Mã:
    Tìm , thêm đoạn code sau vào phía trên:
    Mã:
    Tìm:
    Mã:
    Thay bằng:
    Mã:
    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: bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365.com​
     
    caolaogia7, secpol and GamerViewsTV like this.
  • amocthong

    amocthong Thượng Đế

    Tham gia:
    10/09/2015
    Bài viết:
    28
    Đã được thích:
    16
    Điểm thành tích:
    3
    Giới tính:
    Nam
    rất hay thích kiểu như này thích sài kiểu k add on :D
     
  • caolaogia7

    caolaogia7 Thượng Đế

    Tham gia:
    15/03/2017
    Bài viết:
    163
    Đã được thích:
    50
    Điểm thành tích:
    28
    Giới tính:
    Nam
    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) ]:)
     
  • Chia sẻ trang này