اخفاء و عرض العناصر بتقنية الjquery

13‏/08‏/2010





موضوعنا اليوم هو كيفية اضهار و اخفاء



اي عنصر بمكتبة الjquery



الموضوع يحتوي على نمودجان مختلفان


نبدا بالنمودج الأول


قبل



بعد



 
أولا دعونا نرى مثال بسيط عن الموضوع



مثال (Demo)




أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم   " تحرير HTML "
 
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة. 

ثالثا : ضع علامة في خانة توسيع القوالب .


ابحث عن  هذا الوسم


</head>

 

و نضع قبله تماما هدا الكود 









<script type="text/javascript">

$(document).ready(function() {

var showText="<img  src='http://cdn.iconfinder.net/data/icons/diagona/icon/16/129.png' />";

var hideText="<img  src='http://cdn.iconfinder.net/data/icons/diagona/icon/16/130.png' />";

var is_visible = false;

$('.toggle').prev().append(' <a  class="toggleLink">'+showText+'</a>');

$('.toggle').hide();

$('a.toggleLink').click(function() {

is_visible = !is_visible;

$(this).html( (!is_visible) ? showText : hideText);

$(this).parent().next('.toggle').toggle('slow');

return false;

});

});

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

 

 

أخيرا :  استعرض مدونتك ثم احفظ قالبك.



تطبيق الإضافة

 


قم بكتابة تدوينتك بالطريقة المعتادة

 
و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,



أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة




<h3 style="text-align: right">

تجربة أظهار و أخفاء نص</h3>

<div class="toggle">

<p style="text-align: right">

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

</p>

</div>



<h3 style="text-align: right">

تجربة اخفاء و أظهار صورة</h3>

<p class="toggle" style="text-align: right">

<img  src='http://4.bp.blogspot.com/_ZXEvc1YiIko/TEDeXfaUt6I/AAAAAAAAAdg/i8O5xoxF_Bs/s1600/blogspacetech.png' />

</p>






النمودج الثاني





مثال (Demo)



ابحث عن  هذا الوسم




]]></b:skin>

و نضع قبله تماما هدا الكود








<style type="text/css">

{

  direction: rtl;

  width:60%;

  margin:0 auto;

  color:#000;

  text-align:justify;

 }

 h1 {

  font: 24px arial;

  text-align: center;

  border-bottom: 1px solid #888;

  padding: 10px;

 }

 dt {

  color:#369;

  font: 18px "times new roman";

  border-bottom: 1px dashed #bbb;

  padding: 5px 10px;

 }

 dd {

  font:bold 16px arial;

  padding: 10px;

 }

 p {

  margin: 0 auto;

  margin-top: 20px;

  width: 200px;

  text-align: center;

  font: 10px tahoma;

  border-top:1px solid #ddd ;

  padding: 10px 0;

  }



</style>


الان ابحث عن  هذا الوسم




</head>

و نضع قبله تماما هدا الكود






<script type="text/javascript">

$(document).ready(function() {

 $("dd").hide();

 $("dt").css("cursor", "pointer");

 $("dt").click(function() {

  if($(this).next().is(":visible") == false) {

   $("dd").slideUp();

   $(this).next().slideDown();

  }

 });

});

</script>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

 

أخيرا :  استعرض مدونتك ثم احفظ قالبك.

تطبيق الإضافة

 


قم بكتابة تدوينتك بالطريقة المعتادة

 
و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,



أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة





<h1>

تطبيق  إخفاء و عرض أي محتوى  </h1>

<dl>

<dt>مثال1</dt>

<dd>هنا تضع المحتوى ، يمكنك اخي  أن تستغل التطبيق في إخفاء و إظهار : قوائم منسدلة ،  تطبيق لعرض أجوبة على أسئلة ما ،أو  يمكنك استغلاله في أفكار أخرى </dd>

<dt>مثال2</dt>

<dd>هنا تضع المحتوى ، يمكنك اخي  أن تستغل التطبيق في إخفاء و إظهار : قوائم منسدلة ،  تطبيق لعرض أجوبة على أسئلة ما ،أو  يمكنك استغلاله في أفكار أخرى </dd>

<dt>مثال3</dt>

<dd>هنا تضع المحتوى ، يمكنك اخي  أن تستغل التطبيق في إخفاء و إظهار : قوائم منسدلة ،  تطبيق لعرض أجوبة على أسئلة ما ،أو  يمكنك استغلاله في أفكار أخرى </dd>  </dl>




و الى هنا نكود قد استكملنا الدرس 



كما يوجد اخواني درس مماثل في هدا المجال نرجو الاطلاع عليه



tutorialzine



و الملتقى في الدرس الموالي ان شاء الله