cssbit 2.0

اذا كنت تطور تطبيقات، وبالطبع تبرمج لوحات تحكم لتطبيقاتك، إليك هذا المثال البسيط على جدول لعرض البيانات مع خاصية: الحذف / التعديل ..

1
2
3
4
5
6
7
8

<table>
 <tr>
  <td>cssbit@gmail.com</td>
  <td><img src="pencil.gif" alt="" /></td> 
  <td><img src="trash.gif" alt="" /></td> 
  <td><img src="search.gif" alt="" /></td> 
 </tr>
</table>

صورة:

البيانات التي ستظهرها في الجدول، يمكن ان تكون عناوين المقالات، او أسماء الصور او أي شيء آخر .. حيث سنضع النتائج في حلقة تكرار:

< ?php while($row = mysql_fetch_object($result)) { ?>

1
2
3
4
5
6

 <tr>
 <td>cssbit@gmail.com</td>
 <td><img src="pencil.gif" alt="" /></td> 
 <td><img src="trash.gif" alt="" /></td> 
 <td><img src="search.gif" alt="" /></td> 
</tr>

< ?php } ?>

بما أن هذا مجرد مثال ولن استعمل جدول SQL لاجلب منه البيانات، فيمكنني كتابة الاسطر السابقة هكذا:

< ?php $user = array('sql','cssbit','php','xhtml','ruby') ?>
< ?php for($i=0;$i&lt;5;$i++) { ?>

1
2
3
4
5
6

 <tr>
 <td>< ?=$user[$i]?>@gmail.com</td>
 <td><img src="pencil.gif" alt="" /></td> 
 <td><img src="trash.gif" alt="" /></td> 
 <td><img src="search.gif" alt="" /></td> 
</tr>

< ?php } ?>

الهدف هو ان أجعل PHP يقوم بتكرار البيانات لي، بدل ان اكررها بنفسي باستعمال XHTML ..

كود css:

#main table {
 border: 1px solid #BED8E9;
 width: 100%;
 font-size: .9em;
 margin: 10px 0 0;
}
#main table {
 background: #fff;
 font: .78em "Lucida Sans Unicode";
}
#main table tr td {
 padding: .2em;
 color: #333;
 text-align: center;
}

وضعت إطارا للجدول بلون ازرق فاتح قليلا، ووضعت القيمة 100% لعرض الجدول، بمعنى سيأخذ العرض الكامل للصفحة أو للجزء الموجود فيه الجدول، اذا كان الجدول موجود ضمن class معين، فسيأخذ عرض هذا class

أضفت تاثير بسيط (يعمل مع FF و IE 7 .. لن يظهر مع IE6) بحيث تظهر خلفية بلون ازرق فاتح عند المرور على البيانات بزر الفأرة cursor ..

#main table tr:hover {
 background: #E4EFF6;
 color: #000;
}

البيانات التي في الجدول ستظهر في الوسط، كان الهدف هو اظهار الايقونات في الوسط ..

#main table tr td {
 text-align: center;
}

لذلك أفضت class جديد تابع ل email ..

 <td class="left">$user@gmail.com</td>

كود css:

#main table tr td.left {
 text-align: left;
}

بعد إضافة نصوص وصور و Fix للمتصفحين IE 6 و IE7 احصل على هذا الجدول ..

بعض الصور لن تظهر بشكل شفاف على IE6 لأنها بامتداد PNG

• demo
• تحميل الملفات

يجب حفظ الصفحة بامتداد PHP لكي يعمل التكرار .. او تكرار البيانات ب xhtml وحفظها بامتداد html

حقوق الدرس محفوظة ل cssbit

هذه التدوينة ادرجت بتاريخ 21 يوليو 2008 في الساعة 6:00 م ضمن تصنيف دروس. يمكنك متابعة أي تعليق من خلال RSS 2.0 خلاصات التعليقات. يمكنك ترك تعليق, أو تعقيب من خلال موقعك الشخصي.