اخفاء العناصر واضهارها واسلوب التبديل بينهما{جافا سكربت} [الأرشيف]

mostafaxman

03-18-2009, 11:02 AM

بسم الله الرحمن الرحيم

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

dispaly

المتوضعة في السمة style
وتاخذ قيم هيا
block==قالب وهيا هنا للاضهار العنصر
none==لاشي اي هنا لاخفاء العنصر
للاخفاء مثال على ذلك

<div style="display: none">مخفي</div>

للاضهار

<div style="display:block">معروض</div>

طبعا الافتراضية بالنسبة للمستعرض هيا الاضهار الان كيف يمكن التحكم
بها عن طريق الجافا سكربت يتم ذلك عن طريق الوصول الى العنصر ثم الوصول الى السمة
المتحكمة وهيا style
ثم من بعدها الصفة
display
واعطاء قيما لها
مثال على ذلك

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="****/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body>
<span onclick="changevisable('none');">اضغط هنا للاخفاء</span>

<div id="me" style="background-color: #FFFF00;">تجربة
</div>

<****** type="****/**********">

</******>

</body>

</html>

نشرح الدالة changevisable

لقد قمنا فيكود الجافا سكربت اي الدالة

function changevisable(value){

********.getElementById('me').style.display=value;
}

بالاعلان في السطر الاول عن دالة تاخذ بارمتر واحد وهو value
في السطر الثاني قمنا بالحصو ل على مقبض العنصر من اجل المتصفح عن طريق

********.getElementById('me').

وبذلك اخبرنا المتصفح اننا نسعمل على العنصر الذي يملك الخاصية id='me'
ثم تعمقنا واخبرناه نريد الوصول الى style اي التنسيق
ومن خلال ذلك الوصول الى السمة diaplay
ونعطيها قيمة وهيا البارمتر
ثم ذهبنا الى استدعاء الدالة

<span onclick="changevisable('none');">اضغط هنا للاخفاء</span>

واخبرنا المتصفح عند النقر على ها العنصر بالماوس
استدعي الدالة التالي
changevisable
واعطي البارمتر القيمة الاخفاء وهيا
none
وبذلك يتم اخفاء العنصر فاذا اردنا اضهار العنصر من جديد نقوم بتغير استدعاء الدالة واعطائها قيمة
changevisable('block')

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="****/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body>
<span onclick="changevisable();">اضغط هنا للاخفاء</span>

<div id="me" style="background-color: #FFFF00;">تجربة
</div>

<****** type="****/**********">

</******>

</body>

</html>

والله خير موفق وهو ارحم الراحمين