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

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

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

أبو غَيْث

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,617
مستوى التفاعل
2,866
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
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
 

أبو غَيْث

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

Saifmbk

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

Lamine

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

Saifmbk

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

أبو غَيْث

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,617
مستوى التفاعل
2,866
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
2,000
مستوى التفاعل
1,541
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
بارك الله فيك على التحديث أخي محمد
تحياتي لك
 

أبو غَيْث

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,617
مستوى التفاعل
2,866
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
الله يبارك فيك حبيبي احمد
هههه صاحبها اليوم قام بترقيتها
فبعض الاضافات يجب ان تنتظر شهور حتى يتم تحديثها
 

أبو غَيْث

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,617
مستوى التفاعل
2,866
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني

أبو غَيْث

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,617
مستوى التفاعل
2,866
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني

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

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

طاقم الإدارة المتصلين حالياً

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

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

المواضيع
1,439
المشاركات
14,643
الأعضاء
543
آخر عضو مسجل
Maktoom
أعلى