إضافة jQuery jExpand

24‏/07‏/2010





اليوم لدينا موضوع بسيط سوف يسهل لزوارك استهلاك المعلومات بشكل أفظل

الموضوع تم قرائته من هدا الموقع
















- من لوحة التحكم الخاصة بمدونتك اختر التخطيط ثم  ثم تصميم اختر تحرير html


- قم بحفظ نسخة من قالب مدونتك .


- اضغط المفتاح f3 من لوحة المفاتيح ثم ابحث عن الكود التالي :





]]></b:skin>



- ثم مباشرة قبل الكود السابق قم بنسخ و لصق الكود التالي :



<style type="text/css">

{ font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}

  #report { border-collapse:collapse;}

#report h4 { margin:0px; padding:0px;}

#report img { float:right;}

#report ul { margin:10px 0 10px 40px; padding:0px;}

#report th { background:#7CB8E2 url(http://4.bp.blogspot.com/_jFIsHl5gfpM/TEtgHVO9A1I/AAAAAAAAANk/JDckB9P6ez4/s320/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}

  #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }

#report tr.odd td { background:#fff url(http://4.bp.blogspot.com/_jFIsHl5gfpM/TEtgIK-C3bI/AAAAAAAAANs/MNjqAvevsc4/s320/row_bkg.png) repeat-x scroll center left; cursor:pointer; }

#report div.arrow { background:transparent url(http://3.bp.blogspot.com/_jFIsHl5gfpM/TEtgGgtj7xI/AAAAAAAAANc/5CakHbEWlOc/s320/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}

#report div.up { background-position:0px 0px;}

</style>
 




ثم ابحث عن الكود التالي :





</head>




- ثم مباشرة قبل  أو بعد الكود السابق قم بنسخ و لصق الكود التالي :


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

<script type="text/javascript">

$(document).ready(function(){

$("#report tr:odd").addClass("odd");

$("#report tr:not(.odd)").hide();

$("#report tr:first-child").show();

     

$("#report tr.odd").click(function(){

$(this).next("tr").toggle();
  $(this).find(".arrow").toggleClass("up");

});

//$("#report").jExpand();

});

</script>

 

شرح كيفية الإستخدام




انتقل الى تصميم..اضافة اداة HTML




و ضع الكود التالي القابل للتعديل


<div dir="rtl" style="text-align: right;" trbidi="on">

<table id="report"><tbody>

<tr><th>الدولة</th><th>الكثافة السكانية</th><th>المساحة</th><th>اللغة الرسمية</th><th></th></tr>

<tr><td>الجزائر</td><td>31736053</td><td>2381741 km2</td><td>اللغة العربية</td><td><div class="arrow">

</div>

</td></tr>

<tr><td colspan="5">

<img alt="Flag of alg" src="http://2.bp.blogspot.com/_jFIsHl5gfpM/TEtlaBAsBII/AAAAAAAAAN8/sC4Mq3J49J4/s1600/125px-Flag_of_Algeria.svg.png" />

<h4>

معلومات أساسية</h4>

<ul>

<li><a href="http://ar.wikipedia.org/wiki/%D8%A7%D9%84%D8%AC%D8%B2%D8%A7%D8%A6%D8%B1">الجزائر في الموسوعة الحرة</a></li>

<li><a href="http://www.cg.gov.dz/">الأطلس الوطني لل الجزائر</a></li>

<li><a href="http://www.cg.gov.dz/arabe/index.php">وثائق تاريخية</a></li>

</ul>

</td></tr>

<tr><td>فلسطين </td><td>3268832</td><td>27009km2</td><td>اللغة العربية</td><td><div class="arrow">

</div>

</td></tr>

<tr><td colspan="5">

<img alt="Flag of ps" src="http://2.bp.blogspot.com/_jFIsHl5gfpM/TEtoZc03VsI/AAAAAAAAAOE/KavMCJwTBLE/s120/index.jpeg" />

<h4>

معلومات أساسية</h4>

<ul>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

</ul>



</td></tr>

<tr><td>السعودية</td><td>25721000</td><td>2.149.000كم²</td><td>اللغة العربية</td><td><div class="arrow">

</div>

</td></tr>

<tr><td colspan="5">

<img alt="Flag of saudi" src="http://4.bp.blogspot.com/_jFIsHl5gfpM/TEtpH5pDQTI/AAAAAAAAAOM/FX0A212os2Y/s1600/125px-Flag_of_Saudi_Arabia.svg.png" />

<h4>

معلومات أساسية</h4>

<ul>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

</ul>



</td></tr>

<tr><td>مصر</td><td>63 نسمة/كم²</td><td>1002000كم²</td><td>اللغة العربية</td><td><div class="arrow">

</div>

</td></tr>

<tr><td colspan="5">

<img alt="Flag of egypte" src="http://2.bp.blogspot.com/_jFIsHl5gfpM/TEtq4vc6uBI/AAAAAAAAAOU/8PAZY-qZPZc/s1600/125px-Flag_of_Egypt.svg.png" />

<h4>

معلومات أساسية</h4>

<ul>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

<li><a href="http://www.blogger.com/Add%20your%20URL">Official

texte</a></li>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

</ul>

</td></tr>

<tr><td>لبنان</td><td>3506000 نسمة</td><td>10452كم²</td><td>اللغة العربية</td><td><div class="arrow">

</div>

</td></tr>

<tr><td colspan="5">

<img alt="Flag of lebnan" src="http://4.bp.blogspot.com/_jFIsHl5gfpM/TEtsTlzY5mI/AAAAAAAAAOc/NWXsp66_2T8/s1600/125px-Flag_of_Lebanon.svg.png" />

<h4>

معلومات أساسية</h4>

<ul>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

<li><a href="http://www.blogger.com/Add%20your%20URL">texte</a></li>

</ul>

</td></tr>

</tbody></table>

<i>* Information taken from Wikipedia</i></div>
انتهى 


أتمنى أن يكون مفيدا لك