[ XF 2.1 ] إضافة collapsible category لإخفاء و إظهار الأقسام

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
XenArabia قام بإضافة منتج جديد:

إضافة collapsible category لإخفاء و إظهار الأقسام - تمكنك الإضافة من جعل الأقسام قابلة للطي

تصلح الإضافة في حالة كانت لديك أقسام كثيرة بالمنتدى .. و أحببت مثلا تقليص الأقسام بحيث تظهر لك فقط الأقسام التي تفضلها ..
وهذا شرح مصور لعمل الإظافة

قراءة المزيد حول هذا المنتج...
 

ِِAraby5050

الحمد لله رب العالمين
إنضم
22 فبراير 2019
المشاركات
66
مستوى التفاعل
68
النقاط
18
الإقامة
مصر
بارك الله فيك اخى محمد

وهناك طريقه اخرى بالتعديل على قالب بدون اضافات

فقط استبدالك القالب node_list_category بالكامل بهذا القالب

PHP:
<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="block block--category block--category{$node.node_id} collapsible-nodes">
        <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
        <div class="block-container">
            <h2 class="block-header">
            <div class="block-header--left">
                <a href="{{ link('categories', $node) }}">{$node.title}</a>
                <xf:if is="{$node.description}"><div class="block-desc">{$node.description|raw}</div></xf:if></div>
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
            </h2>
            <div class="block-body block-body--collapsible is-active">
                <xf:macro template="forum_list" name="node_list"
                    arg-children="{$children}"
                    arg-extras="{$childExtras}"
                    arg-depth="{{ $depth + 1 }}" />
            </div>
        </div>
    </div>
</xf:macro>

<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="node node--id{$node.node_id} node--depth{$depth} node--category {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
        <div class="node-body">
            <span class="node-icon" aria-hidden="true"><i></i></span>
            <div class="node-main js-nodeMain">
                <xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
                <h3 class="node-title">
                    <a href="{{ link('categories', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
                </h3>
                <xf:if is="$descriptionDisplay != 'none' && $node.description">
                    <div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
                </xf:if>

                <div class="node-meta">
                    <xf:if is="!{$extras.privateInfo}">
                        <div class="node-statsMeta">
                            <dl class="pairs pairs--inline">
                                <dt>{{ phrase('threads') }}</dt>
                                <dd>{$extras.discussion_count|number}</dd>
                            </dl>
                            <dl class="pairs pairs--inline">
                                <dt>{{ phrase('messages') }}</dt>
                                <dd>{$extras.message_count|number}</dd>
                            </dl>
                        </div>
                    </xf:if>

                    <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
                        <xf:macro template="forum_list" name="sub_nodes_menu"
                            arg-children="{$children}"
                            arg-childExtras="{$childExtras}"
                            arg-depth="{{ $depth + 1 }}" />
                    </xf:if>
                </div>

                <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro template="forum_list" name="sub_nodes_flat"
                        arg-children="{$children}"
                        arg-childExtras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </xf:if>
            </div>

            <xf:if is="!{$extras.privateInfo}">
                <div class="node-stats">
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('threads') }}</dt>
                        <dd>{$extras.discussion_count|number}</dd>
                    </dl>
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('messages') }}</dt>
                        <dd>{$extras.message_count|number}</dd>
                    </dl>
                </div>
            </xf:if>

            <div class="node-extra">
                <xf:if is="{$extras.privateInfo}">
                    <span class="node-extra-placeholder">{{ phrase('private') }}</span>
                <xf:elseif is="{$extras.last_post_date}" />
                    <div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
                    <div class="node-extra-row">
                        <ul class="listInline listInline--bullet">
                            <li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
                            <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                                <li class="node-extra-user">{{ phrase('ignored_member') }}</li>
                            <xf:else />
                                <li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
                            </xf:if>
                        </ul>
                    </div>
                <xf:else />
                    <span class="node-extra-placeholder">{{ phrase('none') }}</span>
                </xf:if>
            </div>
        </div>
    </div>
</xf:macro>

<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <li>
        <a href="{{ link('categories', $node) }}" class="subNodeLink subNodeLink--category {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
        <xf:macro template="forum_list" name="sub_node_list"
            arg-children="{$children}"
            arg-childExtras="{$childExtras}"
            arg-depth="{{ $depth + 1 }}" />
    </li>
</xf:macro>

+ وضع التنسيق التالى بالقالب extra.less

PHP:
/* Node Collapse . abusomaia */
.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%;
        }
    
    .block-body
    {
        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;
        &.is-active
        {
            height: auto;
        }
    }
}

/* Node Collapse .abusomaia-end */

الصوره التاليه نتيجة بعد تطبيق الكود

478

الطريقه متوافقه مع النسخه 2.1

بانتظار شرح منك للطريقه ياغالى @XenArabia
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
بارك الله فيك أخي @Alrajabane على الإضافة و بالفعل الكود يقوم بنفس الدور لكن تجنبا لأي مشاكل في الأكواد يتم عمل الإضافة لتسهيل الأمر خصوصا للمبتدئين
حفظك الله أخي و طبعا الشرح متروك لك لانك صاحبه :)
 

Saifmbk

:: الأعضاء ::
إنضم
5 أبريل 2020
المشاركات
13
مستوى التفاعل
3
النقاط
3
رجاءا ليس لدي صلاحيات التحميل عند الإنتقال إلى صفحة التحميل في الموقع الرسمي للزين .
هل هناك من يرفع الإضافة على إستضافة مجانية.
شكرا على الخدمة
 

Lamine

:: الأعضاء ::
إنضم
21 ديسمبر 2019
المشاركات
72
مستوى التفاعل
59
النقاط
18
الإقامة
الجزائر
هل هناك من يرفع الإضافة على إستضافة مجانية.
بسيطة أخي أطلب أي ستايل أو اضافة مجانية في الموضوع التالي ورح الأخ يرفعها هنا في الموقع :
 

Saifmbk

:: الأعضاء ::
إنضم
5 أبريل 2020
المشاركات
13
مستوى التفاعل
3
النقاط
3
شكرا.
صراحة مازلت أتصفح المنتدى و لا أعره بالكامل
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
28 يناير 2019
المشاركات
2,716
مستوى التفاعل
2,177
النقاط
113
العمر
24
الإقامة
sohag, Egypt
الموقع الالكتروني
بارك الله فيك على التحديث أخي محمد
تحياتي لك
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
الله يبارك فيك حبيبي احمد
هههه صاحبها اليوم قام بترقيتها
فبعض الاضافات يجب ان تنتظر شهور حتى يتم تحديثها
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني

جميع المواضيع والمشاركات والتعليقات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

الأعضاء المتصلون

لا يوجد أعضاء متصلون الآن.

إحصائيات المنتدى

المواضيع
2,082
المشاركات
21,949
الأعضاء
977
آخر عضو مسجل
rfab
أعلى