كيف اعمل قائمه مثل الموجوده بالموقع التى تحتوى على علامة + بحيث اضغط عليها تطلع الاقسام الجانبيه من التصنيف الرئيسى مثلا
+البرمجه
+المنتدى
+الصور
و لاما اضغط على اى علامة + تنفرد و تظهر المحتويات مثلا لو ضغطت على +
فى البرمجه تكون هيك
-البرمجه
asp
php
vb
+لمنتدى
+الصور
و كيف يصبح كل منها رابط لصفحه مثل الايه اس بى يؤدى لصفحة الايه اس بى
لو سمحتم ارجوكم بسرعه
و شكرا
يا ريت تستخدم خاصية البحث المرة القادمة لان الموضوع وضع ألف مرة لكن ساكتبه هنا للمرة الأخيرة ..
<html dir="rtl">
<head>
<script language="javascript">
function show(){
// This code written by MOHD. ABU SALAH
// e-mail : mohd_kh_80@hotmail.com
var lesimg=""
if(lessons.className=="plus"){
lessons.innerHTML="هذه هي الدروس " +
" <OL> "+
"[img=opdrct.gif]
<style type="text/css">
<!--
a:actived{color:red; text-decoration:none;}
a:link{color:red; text-decoration:none;}
a:visited{color:red; text-decoration:none;}
a:hover{color:#123456; text-decoration:underline;}
-->
</style>
</head>
<body>
<table align=center border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="31%">
<tr>
<td width="100%">
[img=../images/drct.gif]
<font face="Tahoma" style="font-size: 8pt; font-weight: 700" color="#FF9900">
<span lang="ar-sa" id=lessons class="plus">الدروس</span>
</font></td>
</tr>
</table>
</body>
</html>الشرح : في هذه الصفحة قمنا بخلط الجافا سكريبت مع جداول الأنماط المتعاقبة css .. طبعا قبل الدخول في الكود نذهب لأسفل الصفحة لنرى أن الجزء الخاص بالصورة بجانب كلمة الدروس كالتالي :
[img=../images/drct.gif]
قمنا بتعريف id للصورة يحمل اسم lesimg و الذي يجعل الصورة ككائن object نستطيع التعامل مع خصائصة مثل مسار الصورة و غيرها عن طريق الكود .. كما أننا و ضعنا حدث يستدعي دالة () show عند الضغط على الصورة .
كما جعلنا جملة الدروس الموجودة لها id خاص بها و هو lessons و class يعين الحالة و هو plus .. و من خلال الكود سنفهم أكثر ما المقصود بال id و ال class مع أنك من المفروض أن تكون ملما بها من دروس ال css في الموقع ..
<span lang="ar-sa" id=lessons class="plus"> الدروس الموجودة :</span>
طبعا ما قمنا به في الكود هو التالي : عرفنا الكائن lesimg و جعلنا مسارها الإفتراضي فراغ أي تبقى صورتها الأصلية في الصفحة .. ثم قمنا بوضع جملة شرط تقوم بفحص هل رتبة أو class كلمة الدروس الموجودة هو plus و هو الوضع الإفتراضي .. إذا كان نعم فسيقوم بتنفيذ مجموعة الجمل التي تليه و هي عملية إبدال الكلمة (الدروس الموجودة ) بجمل html باستخدام lessons.innerHTML و التي تقوم بتحويل الكلمة لمجموعة كلمات و أوامر تتبعها .. و نحن في مثالنا قمنا بتحويلها لكلمة هذه هي الدروس ثم أتبعناها بعمل قائمة باستخدام الجزء
لكن ماذا سيحصل عند الضغط على المجلد مرة أخرى ؟؟ لن يفعل شيء .. لأن حالة ال class للاسم مخزنة على أنها minus و بالتالي لم يتحقق الشرط و يذهب إلى ما بعد هذه الجمل .. و هي مجموعة جمل أخرى و هي جمل الإستثناء else تقوم بتحويل ال class إلى plus و تغير مسار الصورة إلى صورة المجلد المغلق ..و طبعا حولنا جزء الhtml للكائن lessons إلى كلمة الدروس الموجودة .. و طبعا تصبح قيمة ال class مساوية plus و الوصلة كما في حالتها الأولى .. و إذا أعدنا الضغط عليها ستنفذ الشرط لأن class يساوي plus و هكذا ..
You can fly while you can touch the sky
اخي روح هالموقع وشوف المينيو الي بتعجبك:)
أخ أبو صلاح...
بالنسبة للكود الذي وضعته...هل يعمل مع Browsers أخرى غير IE؟
شكرا لكم جميعا أصل المشكله انى ما أعرف أسمها لأبحث عنها
و شكرا لكم
اخي بصراحة انا ما جربت الا على ال IE .. فإذا عندك متصفح اخر أو يهمك نزل المتصفح و شوف بنفسك و يا ريت تخبرنا بالنتائج اللي اتوقع انها راح تكون بدون مشاكل ان شاء الله..
You can fly while you can touch the sky
للاسف بدون ما اجرب .. الكود هذا ie 4+ ... و بصراحة ما اعرف يمكن تكون المحدوديه فيه اكثر من كذا لكن ما كملت قراءته ..
لان ال property المستخدمه بشكل رئيسي innerHTML هي من عصر تقنية ie 4 اللي هي document.all ....
برأيي ... لو نستخدم style.display و بعدين none , block افضل وان كنا بالطريقة هذي نتخلى عن nn4 لكن ... اعتقد افضل من دعم ie4 و 5 و 6 فقط ... اضافة الى اننا بالطريقة هذي نستخدم الستاندرد http://www.w3.org
المعيارية فى البرمجة شيء جميل
و لكن هل نسبة من يستخدم ie-4 ذات ثقل ؟؟
هل لدي احدكم احصائيات بذلك
أنا أذكر أنني قرأت عن نسبة تصل إلى 75%....
على العموم..أنا طرحت السؤال لأنني كنت قبل بضعة أشهر كتبت سكريبت..
كان يعمل بامتياز على IE ولكنه فشل على Netscape...
وسؤالي هو:
هل هناك دوال مقابلة في الـNetscape كــ...insertAdjacentHTML؟
الموقع الذي ذكره الاخ صقر الجبل به قوائم تدعم اكسبلورر ونتسكيب واوبرا معاً
وجميلة في نفس الوقت .
اخوي محمد طاهر انا نسيت اشير لشي ... ثقنيات ie4 مدعومة بواسطة الاصدارات التاليه من ie اي ie5 و ie6 ,.. و طبعا نسبتهم ضخمة جدا ... لكن السكربت لن يدعم اي متصفح اخر مثل opera او mozilla ... او اي اصدار حديث لاي متصفح اخر ... بالنسبة للاحصائيات تفضل اخوي http://www.w3schools.com/browsers/browsers_war.asp
=====================
أنا أذكر أنني قرأت عن نسبة تصل إلى 75%....
على العموم..أنا طرحت السؤال لأنني كنت قبل بضعة أشهر كتبت سكريبت..
كان يعمل بامتياز على IE ولكنه فشل على Netscape...
وسؤالي هو:
هل هناك دوال مقابلة في الـNetscape كــ...insertAdjacentHTML؟
=======================
اخوي ... بدون ما تذكر الاصدارات مستحيل افهل كلمة من سؤال ... اخوي انت تعرف ان كود nn4 ما يشتغل مع nn6 ...
بالنسبة ل insertAdjacentHTML اعتقد لها مقابل في DOM2 (يعني الستاندرد) و المقابل هذا بطبيعة الحال متوافق مع e5+ , nn6+ , opera , mozilla ...
بالنسبة للدالة ياليت تذكر لي عملها :D و اعطيك مقابلها إن شاء الله ...
------
================
الموقع الذي ذكره الاخ صقر الجبل به قوائم تدعم اكسبلورر ونتسكيب واوبرا معاً
وجميلة في نفس الوقت .
================
هذا اعرق موقع لسكربتات dhtml .... فيه موقع ثاني ممتاز و يحتوي منتديات فيها ناس خبرااء ... انصحك تزوره ... dhtmlcentral.com
هذا الموضوع مغلق.
المتواجدون خلال آخر دقيقتين · يتحدّث كل ٣٠ ثانية
جارٍ التحقق من المتواجدين…
