این آموزش در تاریخ ۱۴۰۲/۰۶/۲۹ آپدیت شده است.
آموزش صفحه بندی یا Pagination در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفحه بندی یا Pagination در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تعریف صفحه بندی یا Pagination در CSS
خب اصلا صفحه بندی یا Pagination یا ناوبری صفحه چیه؟ فک کنم دیگه تا الان برای یکبارم که شده صفحه بندی های یک سایت رو دیده اید، این صفحه بندی ها معمولا در پایان هر صفحه قرار میگیرند و کاربر با کلیک بروی شماره صفحه میتواند به صفحه مورد نظر منتقل شود.
خب اصلا چجور میشه که صفحه بندی درست میشه؟ یا اصلا چه موقع صفحه بندی بکار میاد؟ یا اصلا چرا باید از صفحه بندی استفاده کرد!؟
خب ببینید دوستان سادس، در یک سایت وقتی داده ها از پایگاه داده فراخوانی میشن خب ممکنه تعداد اون داده ها چند ده یا چند صدتا باشن! خب منطقی نیست که بیایم و همه ی اون داده هارو درون یک صفحه نمایش بدیم.
اینکار هم منطقی نیست هم سرعت سایت گرفته میشه هم بار اضافی روی سرور و پایگاه داده ایجاد میشه، پس منطقی ترین و بهینه ترین کار اینه که داده هارو صفحه بندی کنیم.
مثلا ۵۰ تا داده هست میتونیم تقسیم بر ۱۰ کنیم میشه ۵ ، یعنی ۵تا ۱۰تایی از داده ها، بعد دیگه تو هر صفحه ۱۰تا از داده هارو نشون میدیم و با استفاده از صفحه بندی کاربر میتونه به بقیه داده ها دسترسی پیدا کنه.
اینکه داده هارو از پایگاه داده بگیره و در صفحه بخواد نشون بده و صفحه بندی به نسبت اون داده ها بخواد درست شه این دیگه کاره زبان های سمت سرور مثه PHP هست، ولی خب ظاهر صفحه بندی با CSS هست که در ادامه میخوایم یاد بگیریم چجوری میشه ظاهر صفحه بندی رو طراحی کنیم.
پس بطور کلی میتونیم بگیم یک صفحه بندی ۲ بُعد داره :
- بُعد ظاهر و طراحی : که توسط HTML و CSS ایجاد میشه
- بُعد برنامه نویسی : همونطور که گفتم میتونه توسط زبان های سمت سرور مثه PHP و.. ایجاد بشه
Free-Learn
ایجاد ستون اصلی صفحه بندی
خب ما باید اول از هرچیزی ستون یا اون ساختار اصلی صفحه بندی مون رو ایجاد نماییم، همونطور که میدونید تگ a تگی است که با استفاده از آن میتوان یک لینک را در یک صفحه وب ایجاد کرد، خب پس اینجاهم برای اینکه شماره های موجود در صفحه بندی هامون قابل کلیک باشن میتونیم از این تگ استفاده نماییم.
پس میایم اول یک ظرف برای نگهداری شماره های صفحه بندی ایجاد میکنیم، خیلی راحت با استفاده از تگ Div میتوانیم این ظرف را ایجاد نماییم.
بعدش درون این ظرف میایم و از تگ a به نسبت شماره صفحه هامون استفاده مینماییم. چون میخوایم یک لینک داشته باشیم برای اولین صفحه و یک لینک برای آخرین صفحه و ۳ تا هم برای شماره گذاری.
|
1 2 3 4 5 6 7 |
<div class="MyPagin"> <a href="#">اولین صفحه</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">آخرین صفحه</a> </div> |
اگه لطف بفرمایید و بروی دکمه ( امتحان کنید ) کلیک نمایید ، همانطور که مشاهده مینمایید خب ما ستون اصلی رو با استفاده از تگ های DIV و A ایجاد کردیم.
در ادامه میخوایم یکمی بیشتر روی استایل یا شکل شمایل لینک هامون کار کنیم و خوشکلترش کنیم، پس اینجا دیگه باید از CSS استفاده نماییم.
|
1 2 3 4 5 6 7 8 9 10 |
.MyPagin { display: inline-block; } .MyPagin a { color: black; float: right; padding: 8px 16px; text-decoration: none; } |
Free-Learn
اضافه کردن رنگ زمینه به آیتم ها
در ادامه میخوایم رنگ زمینه به شماره های صفحه بندی مون اضافه نماییم، من میخوام وقتی ماوس بروی شماره صفحه ها رفت رنگ زمینه اون شماره تغییر کنه.
مثال : در مثال زیر وقتی ماوس روی آیتم ها قرار میگیره ، رنگ زمینه بهش اضافه میشه
|
1 2 3 |
.MyPagin a:hover{ background-color:#f2f2f2; } |
Free-Learn
اضافه کردن صفحه فعال به صفحه بندی
صفحه فعال یعنی اون صفحه ای که کاربر داخلش قرار داره، معمولا این صفحه رو رنگ زمینه بهش میدن که مثلا مشخص باشه و کاربر بدونه داخل اون صفحه هس
نکته : ما باید کاری کنیم که وقتی ماوس بروی آیتم های صفحه بندی میره رنگ زمینه اون صفحه فعال تغییر نکنه ، پس باید از انتخابگر not استفاده کنیم.
|
1 2 3 4 5 6 7 8 |
.MyPagin a:hover:not(.active) { background-color:#f2f2f2; } .MyPagin a.active{ background-color:#2196F3; color:#fff; } |
Free-Learn
تزئین بیشتر صفحه بندی
مثال : در نهایت کمی بیشتر به ظاهر صفحه بندی مون میرسیم
|
1 2 3 4 5 6 7 8 9 |
.MyPagin a { color: black; float: right; padding: 8px 16px; margin:0 2px; text-decoration: none; border:2px solid #000; border-radius:50px; } |
Free-Learn
مثال های بیشتر
مثال شماره ۱
|
1 2 3 4 5 6 7 8 9 |
.pagination a{ color: #000; float: left; padding: 8px 16px; margin:0 2px; text-decoration: none; transition: background-color 0.3s; border: 2px solid #ddd; } |
