«
»

تعدد الصفحات ب CSS

الإثنين 21 يوليو 2008

عند برمجة تطبيق معين ستحتاج الى تقسيم النتائج لاظهار 10 او 15 نتيجة فقط في الصفحة الواحدة، يمكنك باستعمال css ان تضيف لمسات فنية جميلة على الارقام، بدل اظهارها بشكل جاف: 1 2 3 4 .. الخ

screen

سنستعمل ul و li لاظهار قائمة أفقية تحتوي على الأرقام ..

<!-- #start pagination -->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<!-- /end -->

هكذا ببساطة شديدة ..
كود css

#main ul {
   border: 0px solid #ddd;
   list-style: none;
   padding: .5em;
}
 
#main ul li {
   display: inline;
   padding: 0em
}

أضيف روابط href للقائمة، كما اضفت كلاس باسم active للصفحة الأولى على اساس انها هي الصفحة التي يوجد بها الزائر حاليا ..

<ul>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">..</a></li>
</ul>

كود css

#main ul li a {
  border: 1px solid #ddd;
  padding: .1em .4em;
  text-decoration: none;
  background: #eee;
  color:#333
}
 
#main ul li a:hover {
  border: 1px solid #4DADDA;
  padding: .1em .4em;
  text-decoration: none;
  background: #C0E2F2;
  color:#217398
}
 
#main ul li.active a {
  border: 1px solid #ddd;
  padding: .1em .4em;
  text-decoration: none;
  background: #fff;
  color:#000;
  cursor: default; /* active page */
}

يمكن تغيير الالوان والحجم وشكل الخطوط بسهولة ..
مع إضافة بعض النصوص والصور ..

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

9 تعليقات

  1. عمر الدليمي قال:
    21 يوليو 2008 الساعة 15:02

    رائع :) .. جميل جداً ..

    وجميل التصميم الجديد للمدونة :)

  2. cssbit قال:
    21 يوليو 2008 الساعة 15:09

    عبد الرحمن
    العفو، شكرا

    عمر الدليمي
    شكرا لك

    التصميم هو نفسه Default الذي يأتي مع wordpress، فقط أضفت التعديلات على ملف style.css مع بعض الإيقونات وصورة الهدير

  3. مبتدئ قال:
    21 يوليو 2008 الساعة 17:03

    رائع الدرس

    متابع بكل شوق كل الجديد المطروح في هذه المدونة الرائعة

    لك الشكرا و جعله الله في ميزان الحسنات

  4. محمد قال:
    21 يوليو 2008 الساعة 17:09

    hggggggggggggg

  5. cssbit قال:
    21 يوليو 2008 الساعة 17:11

    مبتدئ
    العفو عزيزي، اتمنى لك الاستفادة وتحت امرك اذا كان هناك شيء غير مفهوم

    محمد
    الله يستر ؟!!!

  6. محمد قال:
    21 يوليو 2008 الساعة 17:17

    @cssbit,
    في بعض الاحيان يخرج الأمر عن السيطرة :)

    تستحق كل ثناء على درسك المفيد هذا، طبعا هذا لا يخفى على مطور مثلك،

    في المرة القادمة سيكون الرد مفيدا ;)

  7. عادل قال:
    21 يوليو 2008 الساعة 17:56

    مبروك القالب الجديد وشكرا على الدروس المفيدة

  8. cssbit قال:
    21 يوليو 2008 الساعة 18:14

    العفو أخ عبد الهادي
    مرحبا بك

    شكرا اخي عادل ..

  9. نبيل قال:
    22 يوليو 2008 الساعة 22:04

    مثال جميل وبسيط ومفيد

التعليقات مغلقة.