السلام عليكم ورحمة الله وبركاته ,,
اولا: أسف على تأخري في طرح هذه المشاركه وذلك بسبب انشغالي المفاجيء
اخي الكريم اعددت لك شرح لكود جافا سكربت لان ليس هناك صفحه تريد إستدعائها هنا
(مثل الساحه العربيه)
في المرفقات سيكون فيها : ملفات الجافا والصور الخاصه لذلك - مثال تستطيع اتعديل عليه ..
=====================================================
بين وسم الهيد <head> ضع :
كود HTML:
<script type="text/javascript" src="Threads-js/js.js"></script> <style type="text/css">@import url('Threads-js/css.css');</style> كيف تصنع قائمتك ؟
كما تعرف بأنه سيكون في الأعلى اسماء الأقسام التي تريد ان تضهرها وتحته محتوى كل قسم عند تحديد القسم ..
الأن .. نقوم بعمل قائمتنا العلويه (اسماء الأقسام)
نقم بفتح وسم ul ونحدد له id ونضع عليه كلاس الإستايل CSS وهذه المعلومات أساسيه ..
كود HTML:
<ul id="Swalif" class="shadetabs">
الكلاس الإستايل CSS يبجب ان يكون مثلما كتبته
وتذكرو انني كتبت اسم ID هو Swalif لاننا سنحتاجه قبل النهايه
بعد ان فتحنا هس الوسم يجب ان نحدد ما نردي ان نضعه في القائمه مثل المنتدى العام وو وو ومن هو الإفتراضي .
كود HTML:
<li><a href="#" rel="2">سوالف</a></li>
طبعا الرابط هو # لاننى لن نحتاج الى الإرسال الى صفحه أخرى او عمل رفرش لعرض المتحوى
ولكن وضعت خلال rel القيمه 2 وايضا سنحتاجها ..
ونكرر العمل لعدد للقائمة العلوية مع عدم تشابه قيمة rel (يجب ان تحمل كل واحده رقم مختلف )
بعد ان ننتهي نغلق وسم ul
وهذا مثال للنتاج العمل (عمل القائمة)
كود HTML:
<ul id="Swalif" class="shadetabs"> <li><a href="#" rel="1">العام</a></li> <li><a href="#" rel="2">سوالف</a></li> <li><a href="#" rel="3">البرمجة</a></li> <li><a href="#" rel="4">دروس</a></li> </ul>
الأن نقوم بعمل محتويات العرض عند النقر لكل واحده منهم ..
كما في الكود السابق فإنني وضعت اربعه روابط
نفتح وسم div لكي نعطيه الشكل المناسب للصندوق ولكي يكون متوافقا من القائمه ..
كود HTML:
<div class="tabcontentstyle">
بعد ان فتحنى الوسم نقوم بوضع محتويات كل واحد منهم
فمثلا الأول هو العام ووضعنا له قيمه rel=1
نفتح ديف ثاني يحمل رقم id=1 اي انه رقم الايدي يحمل مثل رقم rel لهذه القائمه
وسيكون هكذا
كود HTML:
<div id="1" class="tabcontent">
محتويات العام
</div>
ونكرر العمل للنتج بكافة قيم القائمة ولا ننسى ان نغلق الديف الخاص بإخذ الإستايل قبل النهايه ويسكون هكذا
كود HTML:
<div class="tabcontentstyle"> <div id="1" class="tabcontent">
محتويات العام
</div> <div id="2" class="tabcontent">
محتويات سوالف
</div> <div id="3" class="tabcontent">
محتويات البرمجة
</div> <div id="4" class="tabcontent">
محتويات الدروس
</div> </div>
الأن وبعد ان اعددنا الكود نقوم بتهيئة الجافا الخاصه بهذا
تذكرون انني طلبت منكم تذكر الايدي الخاص بـ ul لقبل النهايه وهو (Swailf)
نضع هذا الكود الجافا في النهايه
كود HTML:
<script type="text/javascript">initializetabcontent("Swalif")</script> وانظر بأن سوالف هو رقم الأي دي الخاص بـ وسم الـ ul
وهكذا ننتهي منه ..
وهذا الشكل النهائي للكود كاملاً
كود HTML:
<ul id="Swalif" class="shadetabs"> <li><a href="#" rel="1">العام</a></li> <li><a href="#" rel="2">سوالف</a></li> <li><a href="#" rel="3">البرمجة</a></li> <li><a href="#" rel="4">دروس</a></li> </ul> <div class="tabcontentstyle"> <div id="1" class="tabcontent">
محتويات العام
</div> <div id="2" class="tabcontent">
محتويات سوالف
</div> <div id="3" class="tabcontent">
محتويات البرمجة
</div> <div id="4" class="tabcontent">
محتويات الدروس
</div> </div> <script type="text/javascript">initializetabcontent("Swalif")</script> ولا تنسى محتويات وسم الهيد
يوجد مثال في المرفق مع الملفات المطلوبه
=======ملاحظة=======
1-تم الإستعانه بكود الجافا الجاهز مع تعديل ملف CSS - العربيه
2-لا اعتقد ان شرحي واضح لأنني فاشل في الشورحات فأتأسف ان لم اقم به على الوجه الحسن
3-واذكر واكرر انا لست مبرمجاً بل هاوي للبرمجه
4- لو استفد من الكود فقط ادعو لي بالتوفيق في امتحانات الفاينل ف الجامعه وايضا لوالداي بطوله العمر
==================
المواضيع المشابهه 
