إضافة jQuery jExpand

24‏/07‏/2010





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


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















مثال (Demo)



- من لوحة التحكم الخاصة بمدونتك اختر التخطيط ثم  ثم تصميم اختر تحرير 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTlEvT6WTUeKsqhfGIP6Zhz5sddIyYDER5VyvaENaBWRe5oj-uzVWsDh_T9RwmqZlS9fyqlHlKgRb-rzocL8Z_1BWLDwcdkekwl42-XB2IwaktC6eGrAZVWjVJ7n3zhR-sZWvT2YDiN3w/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigqjj_hFNFnbjgBV821lR-epqL1E-A2V1c5ZDimC3njX8Gz08g0otaccvBJ8zoiqjv49_UVDOUpTv14Vw-mhm6P4bPA4DWNm9GtXLseP3HzJ3FPfVpV6DR4tv0g_Zqp83uECkVKdnAZENP/s320/row_bkg.png) repeat-x scroll center left; cursor:pointer; }

#report div.arrow { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWpgKIMzKnWj3WdEhqqsdLJ9qtp-lGG4Gu_XvC_BnApYKniol8XHnrTRe_k6h3p_-RYaQFV3qilAIU7y79LpFgup0oIBVUqk6BObeKovJadYN_dS17NFtqBuZdq6LK3n3GMsT8g8P7W5Va/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilYhniAFieYCt7YfiKtgNMzZq3jL4Am5sBxvQiR3492Up-95lMBM2Ah_mAARUH-n1R_x-40AKqPgga6PmekPvybIJO-PBmU3p0_fCS2Ud-I9Qt_0RAhEC4eddtWbh9d4xph0J0dC1p6ZlU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwW2K8aT5BNo8fzWb3jbvAHTJbaQrQS7ROV2sILUZwDhkc9mF4G3JbntRvG5eNmXHinV0VrPAIF5rfgcpRBob7rJIPgLWuysoj8xwduxkiWr8gz9wCYB7TXqeJdP-hWCU1qpzYiEk-Jov/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbmSgGdScCjfcLTsoEbJowZUZk26Q0ITFa9ArJQel6NzNGg3MjxokerTgNGSnNtYqP731bM7ZuYXbQcLT35shPksw3w49LhtWd1m2Oily4T7SyCZwSPEVw0iQ8byOIXX-NROsTjKhDQFJO/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifhovvfwBKpBFwWV7LcsXAL0DZwdDr4JKok76yg_odaE28jkAB_5vTcyO3bF3e85CQAfi_qBsAPcSr_yk5Ku7mU7FKmw9hVnlDcgd9E0w02GSuJ3plTxv7yBfwukNEQ6PT5-LMplteoI_q/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIKrRDR7YH_37Fayvzuo_kkwXWpt6huLdvIslQALJzT5oOav4uAApx1x8KDTJfdREObMvOQlV5GzHR_e0c0juOyhafhJOYnKr1MHEHEImK54Tz-Vc2CMzs5LvPApbJ3ToGlBGxGYj9OMee/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>
انتهى 


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