[ XF 2.1 ] - إضافة collapsible category لإخفاء و إظهار الأقسام | زين العربية
أيقونة المنتج

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

لا يوجد تصريح للتنزيل

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
3,503
مستوى التفاعل
2,133
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
XenArabia قام بإضافة منتج جديد:

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

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

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

ِِAraby5050

الحمد لله رب العالمين
إنضم
22 فبراير 2019
المشاركات
66
مستوى التفاعل
65
النقاط
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
 

XenArabia

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

Saifmbk

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

Lamine

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

Saifmbk

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

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

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

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

المواضيع
1,199
المشاركات
10,950
الأعضاء
460
آخر عضو مسجل
alifmf
أعلى