الجمعة، 23 مارس، 2012

دورة JQuery : شرح الامر hide و show

,
سوف نتعلم اليوم بإذن الله طريقة استعمال الأمر hide و show لي التحكم في إظهار و إخفاء  العناصر التي وقع تحديدها

1- الامر show

‫‪‬ستخدم لإظهار جميع العناصر‬ التي تم تحديدها في حال كانت غير ظاهرة في الصفحة و لا يهم كيف تم إخفاء تلك العناصر سواء باستخدام الامر hide  او display:none في ال css
و في المثال  التالي سوف نقوم بأظهار جميع العناصر img المخفية في الصفحة



<html>
<title>مدونة عرب بلس طريقك نحو الابداع</title>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $("input:submit").click(function(){
      $("img").show("1000");
    });
 });
</script>
</head> 
<body>
<img src="images.jpg" style="display:none">
<input name="" type="submit" value="show image">
</body>
</html>

معاينة المثال تحميل

في المثال السابق قمنا بتحديد الزر submit عن طريق الامر $("input:submit")
و عند الضغط  علي الزر submit  يقوم السطر التالي  $("img").show("1000"); بإظهار الصورة المخفية داخل الصفحة . كما يمكن التحكم في سرعة  اضهار الصورة عن طريق التعديل على الرقم ("1000")
مثال لو اردنا اخفاء الصورة في ثانية واحدة نكتب 1000 , في ثانيتان  نكتب 2000 ... وهكذا . كما يمكنك استعمال القيم النصية التالية ‫‪slow‬‬ : بطيء , ‫‪normal‬‬ : عادي  , ‫‪fast‬‬ :سريع

2- الأمر hide 

عكس الأمر show يستخدم الامر hide  لأخفاء جميع العناصر التي تم تحديدها 
وفي هذا المثال سوف نقوم بإخفاء العنصر img  داخل الصفحة
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $("input:submit").click(function(){
      $("img").hide();
    });
 });
</script>
</head> 
<body>
<img src="images/demo2.jpg">
<input name="" type="submit" value="show image">
</body>

معاينة المثال تحميل

نفس الخطوات مع الامر Hide  معا مراعة تغيير الأمر  show  ب  hide

و الآن اتركوكم معا هذا الفيديو لي الأخ إبراهيم قديح مشاهدة طيب :)



 

صفحتنا على الفيس بوك

ادخل بريدك الإلكتروني ليصلك جديد المدونة

المشاركات الشائعة

© مدونة عرب بروكسي لفتح المواقع المحجوبة 2014، جميع الحقوق محفوظة