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

[ حصريا ] طريقة اظهار معلومات العضو مثل استايل زين العربية

  • بادئ الموضوع بادئ الموضوع shqawe
  • تاريخ البدء تاريخ البدء

shqawe

ربي أشرح لي صدري
27 يونيو 2019
3,164
23
2,071
113
K.S.A
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

اقدم لكم اليوم شرح طريقة اظهار معلومات العضو مثل ماهو موجود في استايل زين العربية في المتجر على الرابط التالي



بسم الله نبدأ الشرح:

اولا قم بفتح قالب
message_macros وابحث عن:

HTML:
<div class="message-userExtras">


وضع فوقه هذا الكود :

كود:
<div class="thThreads__message-userExtras">


ثم ابحث في نفس القالب عن هذا الكود :

HTML:
</xf:if>
        </xf:if>
        <span class="message-userArrow"></span>
    </section>

وضع فوقه هذا الكود:

HTML:
</div>
                <div class="thThreads__userExtra--toggle">
                    <span class="thThreads__userExtra--trigger" data-xf-click="ththreads-userextra-trigger"></span>
                </div>

احفظ القالب وقم بفتح قالب helper_js_global وقم باضافة الكود التالي في اخر القالب فوق كلمة </xf:macro>

JavaScript:
<xf:js>
    $(document).ready(function() {
    XF.thThreadsUserExtraTrigger = XF.Click.newHandler({
    eventNameSpace: 'XFthThreadsUserExtraTrigger',

    init: function(e) {},

    click: function(e)
    {
        var parent =  this.$target.parents('.message-cell--user');
        var triggerContainer = this.$target.parent('.thThreads__userExtra--toggle');
        var container = triggerContainer.siblings('.thThreads__message-userExtras');
        var child = container.find('.message-userExtras');
        var eleHeight = child.height();
        if (parent.hasClass('userExtra--expand')) {
            container.css({ height: eleHeight });
            parent.toggleClass('userExtra--expand');
            window.setTimeout(function() {
                container.css({ height: '0' });
                window.setTimeout(function() {
                    container.css({ height: '' });
                }, 200);
            }, 17);

        } else {
            container.css({ height: eleHeight });
            window.setTimeout(function() {
                parent.toggleClass('userExtra--expand');
                container.css({ height: '' });
            }, 200);
        }
    }
});

XF.Click.register('ththreads-userextra-trigger', 'XF.thThreadsUserExtraTrigger');
});

    </xf:js>

احفظ القالب ومن ثم قم باضافة الكود التالي في ملف extra.less

CSS:
.thThreads__userExtra--toggle {
      text-align: center;
      margin-top: @xf-paddingMedium;
 
      .thThreads__userExtra--trigger {
          transition: ease-in transform .2s .2s;
          display: inline-block;
 
          &:hover {cursor: pointer;}
 
          &:before {
              .m-faBase();
              .m-faContent(@fa-var-chevron-down);
          }
      }
  }
  .thThreads__message-userExtras {
      height: 0;
      overflow: hidden;
      transition: ease-in height .2s;
  }
 
 @media (max-width: @xf-messageSingleColumnWidth) {
    .thThreads__message-userExtras {display: none;}
    .thThreads__userExtra--toggle {display: none;}
}

.userExtra--expand  {
    .thThreads__message-userExtras {height: auto;}
    .thThreads__userExtra--trigger {transform: rotate(-180deg);}
}

وقم بحفظ القالب والتجربة وان شاء الله سوف تحصل على الشكل المطلوب

ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لايخطأ

وتقبلوا احترامي وتقديري
اخوكم
شقاوي
 

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

المواضيع
1,444
المشاركات
16,588
الأعضاء
1,021
آخر عضو مسجل
wallas
أعلى