شرح طريقة: بيانات العضو في قائمة منبثقة

[walid]

ط´ط±ط*: ط¨ظٹط§ظ†ط§طھ ط§ظ„ط¹ط¶ظˆ ظپظٹ ظ‚ط§ط¦ظ…ط© ظ…ظ†ط¨ط«ظ‚ط©

---

السلام عليكم ورحمة الله وبركاته
والصلاة والسلام على رسول الله سيدنا محمد
وعلى آله وصحبه ومن اتبعهم بإحسان إلى يوم الدين
أما بعد
//
مقدمة يمكن تخطيها
قبل فترة أخبرني صديقي بأن المشاركات في المنتدى forum خاصتي تأخذ وقتاً
طويلاً لقراءتها، لا سيما وأن التواقيع ثابتة في الأسفل، والسبب كان
بيانات العضو في يمين الصفحة، حيث أنها كانت كثيرة، بالإضافة
للمزاج والـ SMS والـ MMS مثلاً
لذلك بحثت عن طرق عديدة لإخفاء هذه البيانات بضغطة زر، وإظهارها



عند الضغط عليها، لكن الطرق التي جربتها إما أنها كانت تسبب ثقلاً
في المتصفح وإما أنها كانت غير مجدية مع كل المتصفحات
//
وبعد البحث تذكرت خاصية القوائم المنبثقة الموجودة مع نسخة المنتدى forum
وتعلمت من الموقع الرسمي كيفية استخدامها، وأحببت أن أشارككم بها
//
بداية
لرؤية مثال حي يمكنكم زيارة أي موضوع في المنتدى forum هنا
(وضعت الرابط لضرورة معاينة مباشرة لوضوح الفكرة)
أو يمكنكم مشاهدة الصورة التالية

//
خطوات العمل
لا بد أن نعرف كيف يعمل ما ذكر أعلاه والذي يستخدم خاصية مدمجة
في النسخة تسمى VBmenu_popup، حيث تعتمد على استدعاء أي
tag وليكن div مثلاً، وإعطائه اسماً ليتم استدعاؤه في الـ Script
المسمى VBmenu_popup

أعلم أن الموضوع يبدو طويلاً لكن الأمر سهل جداً

ملاحظة للكسالى/ يمكنكم عدم قراءة الموضوع كاملاً وتطبيق
ما بين الخطوط المتقطعة، لكن لن أجيب عن أي سؤال تم ذكره في الشرح طريقة
( شرير :] )

--------------------------------------------------
سأشرح طريقة الفكرة على قالب template قالب template الـ Postbit_Lagecy
ويمكن تطبيقها على قالب template الـ Postbit أيضاً، وسأطرح كيفية وضع كافة
بيانات العضو في زر، ويمكن تطبيقها على جزء من البيانات كما الأمر

قم بفتح القالب template، وخذ نسخة احتياطية لنبدأ العمل، ويفضل أن تستعمل
برنامج تحرير مثل الـ Expression Web، لتقوم بتحديد المنطقة التي
يوجد فيها بيانات العضو، ولنفترض أن البيانات موضوعة في جدول
<table>، لذلك، قبل هذا الـ tag أو الوسم، قم بإضافة الكود code التالي

رمز Code:
<span id=&quot;more_$post[postid]&quot; lang=&quot;ar-dz&quot;> <br /> <a href=&quot;#&quot;> <img border=&quot;0&quot; alt=&quot;المزيد من بياناتي&quot; src=&quot;ضع هنا رابط الصورة التي تريدها للزر&quot; /> </a> <script type=&quot;text/javascript&quot;> vbmenu_register(&quot;more_$post[postid]&quot;,true); </script> </span> <div class=&quot;vbmenu_popup&quot; id=&quot;more_$post[postid]_menu&quot; style=&quot;display:none;&quot;>


وفي نهاية الجدول قم بإغلاق الوسم بـ
رمز Code:
</div>


انتهى التركيب install
--------------------------------------------------
//
ما الذي حدث؟
لمن يود فهم ما حدث عليه بقراءة التالي
عندما قمنا بوضع وسم span فقد حددنا فيه الزر الذي عند ضغطه
سيقوم بفتح قائمة بالبيانات وقمنا بوضع id لهذا الوسم ليتم استخدامه
في دالة الـ VBmenu_popup، ولا بد أن يكون لكل قائمة من قوائهما
اسم خاص بها

توضيح، لو أردنا عمل قائمتين فإننا نختار وسم span ونعطيه اسماً
وليكن pop-1 ونقوم بإدراج هذا الاسم في الـ VB_menu
لو أردنا قائمة أخرى يجب أن يكون الاسم مختلفاً عن pop-1 حتى لو
كان الوسم مختلفاً، كأن يكون وسم div مثلاً
//
إذاً كيف قمت بوضع كود code واحد مع أن البيانات تتكرر لكل عضو؟
الأمر بسيط، لاحظ أننا في الكود code السابق أضفنا بعد الـ id الخاص بالـ span
والذي كان كلمة more متغيراً إضافياً وهو
رمز Code:
_$post[postid]

وهذا المتغير هو رقم المشاركة في الموضوع، وعليه فإنه عند تنفيذ الكود code
سيكون اسم الـ span الأول
more_1
والـ span الثاني
more_2
وهكذا، فإن هذا المتغير أراحنا من مشكلة تشابه
الأسماء لضمان عمل القائمة مع كل الردود
//
شرح طريقة مفصّل للكود code (اختياري)
لمزيد من الفائدة، سأشرح طريقة طريقة عمل الكود code بالتفصيل هنا

رمز Code:
<span id=&quot;anyname&quot;>

حيث أن anyname هو اسم هذا الـ span ليستخدم لاحقاً ولكن يجب تذكره

رمز Code:
<a href=&quot;#&quot;> <img border=&quot;0&quot; alt=&quot;المزيد من بياناتي&quot; src=&quot;ضع هنا رابط الصورة التي تريدها&quot; /> </a>

زر القائمة المنبثقة، والذي عند ضغطه ستفتح القائمة

رمز Code:
<script type=&quot;text/javascript&quot;> vbmenu_register(&quot;anyname&quot;,true); </script>
سكربت القائمة، لاحظ أن الاسم anyname تم استخدامه كما هو
على فرض أن القائمة ستوضع في صفحة لا يتم تكرار الكود code فيها
كما في الردود مثلاً، وقمت بتوضيح كيفية حل المشكلة

رمز Code:
<div class=&quot;vbmenu_popup&quot; id=&quot;anyname_menu&quot; style=&quot;display:none;&quot;>
هنا الوسم الذي سيتضمن محتوى القائمة، ويجب أن يكون اسمه
anyname_menu

//

آمل أني وفقت في الشرح طريقة وأعتذر عن الإطالة
ولا أريد سوى دعاء لي ولوالدي

Whitespacez

التعديل الأخير كان بواسطة WhiteSpacez; 13 - 09 - 2014 الساعة 16:31

ألعاب الأندرويد مجانا و حصريا

©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©