إنشاء قائمة روابط جانبية متفرعة ومنطوية (JavaScript)

أبو حازم الاسكندراني · 22-01-2005, 11:00 AM

تضفي شيفرات جافا سكريبت الرائعة الكثيرَ من الحيوية على صفحاتك الساكنة ..

لكن بشرط أن يكون وجودها على قدر الحاجة، وكالملح في الطعام، وإلا فإنها قد تعكس أثرا سلبيا على موقعك.

وبين أيدينا الآن طريقة من تلك الطرق الحيوية المفيدة جدا للمواقع لا سيما الكبيرة منها والتي تحوي أقساما كثيرا.

فبدلا من جعل الزائر يبقى مضطرا كل مرة للغوص في أعماق موقعك للحصول على موضوعه المفضل عبر نقراتٍ كثيرة يعقبها

الانتظار الممل المعهود إلى حين فتح الصفحات الفرعية في كل مرة ..
جاءت هذه الطريقة لتكون بديلا وحلا سريعا..

قمت بإنشاء مثـال يتكون من سبعة أقسام ، كل قسم يندرج تحته ثلاثة فروع ، وقمت بعمل التفريع على طريقتين:

الطريقة الأولى:

عرض الأقسام وتركها مفتوحة مع إمكانية غلقها يدويًا من قبَـلِ الزائر بالنقر على نفس القسم الرئيسي مرةً أخرى.
وقد طبقتُـها على الأقسام الثلاثة الأولى.

الطريقة الثانية:

إغلاق الأقسام المفتوحة مسبقًا عند عرضِ أي قسم آخر.
وهي مُطبـَّقة على الأقسام الأخرى (من القسم الرابع إلى السابع).

وقد وضعت بين الطريقتين خطـًا صغيرًا فاصلا للتمييز.

وهاكم الشيفرة المصدرية:

كود بلغة HTML:

 <HTML dir="rtl" lang="ar"> <HEAD> <TITLE>....................</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /> <STYLE type="text/css">

	A:link	{color: #336699; text-decoration: none}
	A:active	{color: #336699; text-decoration: none}
	A:visited	{color: #336699; text-decoration: none}
	A:hover	{color: #FF9900; text-decoration: none; background: #EDEDED}

	.main	{font-weight: bold; font-size: 12pt; font-family: Monotype koufi; cursor: hand; color:#BB0000;}
	.sub	{font-family: "MS Sans Serif, Tahoma"; font-size: 8pt; padding-right: 15}

</STYLE> <SCRIPT LANGUAGE="JavaScript"> <!--
		function doSection(secNum) {
		  // عرض الفرع إن كان مخفيا - أو إخفاؤه إن كان ظاهرا 
		  if (secNum.style.display=="none") {secNum.style.display=""}
		  else{secNum.style.display="none"}
		}

		// إخفاء جميع الفروع المفتوحة
		function CloseAll()
		{
		  Sec1.style.display="none";
		  Sec2.style.display="none";
		  Sec3.style.display="none";
		  Sec4.style.display="none";
		  Sec5.style.display="none";
		  Sec6.style.display="none";
		  Sec7.style.display="none";
		}

		// إظهار جميع الفروع المفتوحة
		function ShowAll()
		{
		  Sec1.style.display="";
		  Sec2.style.display="";
		  Sec3.style.display="";
		  Sec4.style.display="";
		  Sec5.style.display="";
		  Sec6.style.display="";
		  Sec7.style.display="";
		}
		--> </SCRIPT> </HEAD> <BODY bgcolor="#AAB4C6"> <TABLE border=0 bgcolor=#DDDDDD bordercolor=#CCCCCC width=133 cellpadding=20> <TR><TD> <a href="#"onClick="ShowAll();" CLASS="sub">جميع الأقسام</a> <!-- الطريقة الأولى: عرض الأقسام وتركها مفتوحة مع إمكانية غلقها يدويا من قبل الزائر
 بالنقر على نفس القسم الرئيسي مرة أخرى --> <SPAN CLASS="main" onClick="doSection(Sec1);"><B>القسم الأول</B></SPAN><BR> <DIV CLASS="sub" ID="Sec1" STYLE="display: none"> <a href="#">الفــــــرع 1</a><BR> <a href="#">الفــــــرع 2</a><BR> <a href="#">الفــــــرع 3</a><BR> </DIV> <SPAN CLASS="main" onClick="doSection(Sec2);">القسم الثاني</SPAN><BR> <DIV CLASS="sub" ID="Sec2" STYLE="display: none"> <a href="#">الفــــــرع 4</a><BR> <a href="#">الفــــــرع 5</a><BR> <a href="#">الفــــــرع 6</a><BR> </DIV> <SPAN CLASS="main" onClick="doSection(Sec3);">القسم الثالث</SPAN><BR> <DIV CLASS="sub" ID="Sec3" STYLE="display: none"> <a href="#">الفــــــرع 7</a><BR> <a href="#">الفــــــرع 8</a><BR> <a href="#">الفــــــرع 9</a><BR> </DIV> <HR width=88 noshade align=right color=#416496> <!-- الطريقة الثانية: إغلاق الأقسام المفتوحة مسبقا عند عرض أي قسم آخر  --> <SPAN CLASS="main" onClick="CloseAll(); doSection(Sec4);"><B>القسم الرابع</B></SPAN><BR> <DIV CLASS="sub" ID="Sec4" STYLE="display: none"> <a href="#">الفــــــرع 10</a><BR> <a href="#">الفــــــرع 11</a><BR> <a href="#">الفــــــرع 12</a><BR> </DIV> <SPAN CLASS="main" onClick="CloseAll(); doSection(Sec5);">القسم الخامس</SPAN><BR> <DIV CLASS="sub" ID="Sec5" STYLE="display: none"> <a href="#">الفــــــرع 13</a><BR> <a href="#">الفــــــرع 14</a><BR> <a href="#">الفــــــرع 15</a><BR> </DIV> <SPAN CLASS="main" onClick="CloseAll(); doSection(Sec6);">القسم السادس</SPAN><BR> <DIV CLASS="sub" ID="Sec6" STYLE="display: none"> <a href="#">الفــــــرع 16</a><BR> <a href="#">الفــــــرع 17</a><BR> <a href="#">الفــــــرع 18</a><BR> </DIV> <SPAN CLASS="main" onClick="CloseAll(); doSection(Sec7);">القسم السابع</SPAN><BR> <DIV CLASS="sub" ID="Sec7" STYLE="display: none"> <a href="#">الفــــــرع 19</a><BR> <a href="#">الفــــــرع 20</a><BR> <a href="#">الفــــــرع 21</a><BR> </DIV> <BR><center> <a href="#"onClick="CloseAll();" CLASS="sub">إغــلاق الكــل</a></center> </TD></TR> </TABLE> </BODY> </HTML>

أصل هذه الشيفرة من كتاب « تعلم لغة HTML الديناميكية » أو « Learn DHTML » (ص: 209 - 212) ط الدار العربية للعلوم - بيروت 1419 - 1998 والذي لا يزال بحوزتي منذ أكثر من خمس سنوات.

والفكرة مستخدمة في كثير من المواقع لكن بطرق أخرى.

وإلى أن يتـســع لي وقت آخر [ ربما مع العيد القادم

] ... نلتقي مع فكرة جديدة إن شاء الله.

gateofislam.com · 22-01-2005, 12:30 PM

استفدنا منها

albdre · 22-01-2005, 05:56 PM

مشكور وجزاك الله خير
وكل عام وانت بخير

أبو حازم الاسكندراني · 27-01-2005, 04:42 AM

وهذا أحد المواقع التي طُبقت عليها نفس الشيفرة الواردة هاهنا.

http://www.alafkar.org

أرونا تجاربكم واقتراحاتكم لذلك النص البرمجي ..

Dr.Server · 27-01-2005, 05:15 AM

أبو حازم روح الله يغفر لك ..

من أمس وأنا أبي أضيف السؤال هذا في سوالف لكن قلت أول شي أبحث في المواقع الأجنبية وإذا ماحصلت اسأل .. وليومك وأنا لا اضفت السؤال ولا بحثت عن الحل << ماعد يجمع

بس فيه سؤال بسيط .. أنا أبغا يكون المحتوى المنسدل عبارة عن فورم يحتوي على عدة حقول مثل <text > و <textarea> .. تماما مثل موقع مستعمل .. كيف أسويها باستخدام الكود السابق ؟

شاكر لك ودام فضلك

البراك · 27-01-2005, 05:20 AM

سبحان الله !! كأنك تقرأ افكاري والله كنت ناوي اسأل عنها بس الحمد لله اسعفتنا بها ..

الله يجزاك خير ويوفقك بالدنيا والاخره ..

قلعة العرب · 27-01-2005, 06:10 AM

السلام عليكم

الاستاذ الكبير ابو حازم ,, بارك الله فيك ورجعة موفقة وقوية

استاذي .. هل هناك طريقة لجع الوضع اكثر مرونة لو كان هناك اقسام أكثر اي اضافة قسم فرعي لقسم فرعي مُضاف لقسم رئيسي
اي
قسم رئيسي >> قسم فرعي >> قسم فرعي

وشكراً لك على هذه الاداة الرائعة

تحياتي

بوعقيل · 27-01-2005, 11:43 AM

بسم الله الرحمن الرحيم
السلام عليكم جميعا

ألف ألف شكر أخي الكريم

أبو حازم الاسكندراني · 11-03-2005, 03:32 AM

ملاحظة هامة:

للتوافقية مع الهيئات القياسية ليعمل مؤشر اليد على القسم الرئيس للأقسام المتفرعة يجب إضافة :

كود:

cursor: pointer;

قبل أو باستبدال :

كود:

cursor: hand;

وذلك ضمن الصنف main. في قسم <STYLE>

PHP-Master02 · 11-03-2005, 04:18 AM

شكرررررررررا لك

الحمد لله ::
الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::الحمد لله ::
الحمد لله ::الحمد لله ::
الحمد لله ::

Mr.php-ar · 11-03-2005, 10:11 AM

الف الف شكر لك اخي ابو حازم ...

وجميل جداً منك ... وعمل رائع ...

وتقبل تحياتي

aldosare · 11-03-2005, 11:40 AM

جزاك الله خير

البـ أحمد ـرنس · 11-03-2005, 12:00 PM

تشكر ياطيب
والله افتني بهذا الشرح لانني محتاجه ضروري
انشاء الله بأضع لكم رابط للتجربة هذا على موقعي
خالص تحياتي لك

NLP · 11-03-2005, 09:46 PM

جزاكم الله خيرا ونفع الله بكم الإسلام والمسلمين وغفر لكم جميع ذنوبكم .. اللهم آمين

AHMED2 · 28-12-2005, 01:13 PM

بارك الله فيك اخي العزيز اعرف ان الرد متاخر لوكن لم الحظ الموضوع غير الحين

مُجَاهِد · 28-12-2005, 01:22 PM

جزاك الله خير ..

الصم · 28-12-2005, 02:43 PM

يعطيك العافية ابوحازم

ابو مشاري 97 · 28-12-2005, 04:35 PM

بارك الله فيك
طريقة نحتاجها كثير وتسهل علينا تصفح مواقعنا

ياليت لو تغير لنا فيها قليل :
1 - عملية اقفال كل قسم تتم بطريقتين
أ ) عند فيتح اي قسم اخر
ب) عند الضغط على اسم القسم المفتوح
بمعنى الدمج بين الطريقتين

2 - ياليت لو تشيل لنا الكود من HEAD يعني يكون في ملف نستدعيه او يكون داخل البودي

تحياتي لك

شبكة الملكة · 29-12-2005, 01:32 AM

جزاك الله الف خير .. شي رائع ..ما قصرت يالغالي

ابو مشاري 97 · 04-01-2006, 04:29 PM

؟؟؟؟؟؟؟؟

اين انت استاذنا العزيز

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق