تضفي شيفرات جافا سكريبت الرائعة الكثيرَ من الحيوية على صفحاتك الساكنة ..
لكن بشرط أن يكون وجودها على قدر الحاجة، وكالملح في الطعام، وإلا فإنها قد تعكس أثرا سلبيا على موقعك.
وبين أيدينا الآن طريقة من تلك الطرق الحيوية المفيدة جدا للمواقع لا سيما الكبيرة منها والتي تحوي أقساما كثيرا.
فبدلا من جعل الزائر يبقى مضطرا كل مرة للغوص في أعماق موقعك للحصول على موضوعه المفضل عبر نقراتٍ كثيرة يعقبها
الانتظار الممل المعهود إلى حين فتح الصفحات الفرعية في كل مرة ..
جاءت هذه الطريقة لتكون بديلا وحلا سريعا..
قمت بإنشاء مثـال يتكون من سبعة أقسام ، كل قسم يندرج تحته ثلاثة فروع ، وقمت بعمل التفريع على طريقتين:
الطريقة الأولى:
عرض الأقسام وتركها مفتوحة مع إمكانية غلقها يدويًا من قبَـلِ الزائر بالنقر على نفس القسم الرئيسي مرةً أخرى.
وقد طبقتُـها على الأقسام الثلاثة الأولى.
الطريقة الثانية:
إغلاق الأقسام المفتوحة مسبقًا عند عرضِ أي قسم آخر.
وهي مُطبـَّقة على الأقسام الأخرى (من القسم الرابع إلى السابع).
وقد وضعت بين الطريقتين خطـًا صغيرًا فاصلا للتمييز.
وهاكم الشيفرة المصدرية:
كود 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 والذي لا يزال بحوزتي منذ أكثر من خمس سنوات.
والفكرة مستخدمة في كثير من المواقع لكن بطرق أخرى.
وإلى أن يتـســع لي وقت آخر [ ربما مع العيد القادم] ... نلتقي مع فكرة جديدة إن شاء الله.
رد مع اقتباس
