Murls Murls
 
»البرمجة بلغة Javascript»
   اخفاء العناصر واضهارها واسلوب التبديل بينهما{جافا سكربت}

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

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

 

  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="text/html; charset=utf-8" />

<title>Untitled 1</title>

</head>



<body>

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

  

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

</div>

  

  <script type="text/javascript">

<!--

function changevisable(value){



document.getElementById('me').style.display=value;

}

//-->

</script>

  

</body>



</html> 



نشرح الدالة changevisable

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

 

function changevisable(value){



document.getElementById('me').style.display=value;

} 

بالاعلان في السطر الاول عن دالة تاخذ بارمتر واحد وهو value

في السطر الثاني قمنا بالحصو ل على مقبض العنصر من اجل المتصفح عن طريق

[php]

document.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="text/html; charset=utf-8" />

<title>Untitled 1</title>

</head>



<body>

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

  

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

</div>

  

  <script type="text/javascript">

<!--

function changevisable(){



document.getElementById('me').style.display=='none'?document.getElementById('me').style.display='block':document.getElementById('me').style.display='none';

}

//-->

</script>

  

</body>



</html> 



والله خير موفق وهو ارحم الراحمين
حرر في تاريخ 2009/06/04 الساعة 03:06:29
أولا شكرا جزيلا لك
ويمكن استعمال الدالة مع أكثر من عنصر إذا كانت بهذه الطريقة
function showhide(id){
document.getElementById(id).style.display=='none'?document.getElementById(id).style.display='block':document.getElementById(id).style.display='none';
}
محمد صالح في 2009/04/8 الساعة 09:04:58 مساء
درس مميز عزيزي و قد استفدت منه كثيرا :)
General S في 2009/12/30 الساعة 04:12:26 مساء
اهلا وسهلا بك وقل ربي زدني علما بالتوفيق
almhajer في 2009/12/31 الساعة 10:12:11 صباحا