در این قسمت و قسمت بعدی در مورد شمارنده ها یا Counter صحبت خواهیم کرد. با استفاده از این ویژگی میتونیم شمارنده رو برای المنتهای مختلف با استفاده از CSS خالص قرار بدیم. برای این موضوع ما از این لینکبه عنوان منبع استفاده میکنیم.
همونطور که میدونین نمایش دادن اطلاعات بصورت مناسب یک مزیت عالی محسوب میشه. یکی از روشهای نمایش دادن اطلاعات اینه که اونا رو بصورت سلسله مراتبی و پشت سر هم قرار بدیم و به کاربران بفهمونیم که کدام مورد اول هست.
یک راه برای نمایش دادن سلسله مراتبی بودن اطلاعات، اینه که برای اونا شماره قرار بدیم. بجز Ordered list در HTML دیگه هیچ المنت دیگه ای وجود نداره که با استفاده از CSS بتونیم شماره اون رو افزایش بدیم. اگر ما بخوایم چنین کاری رو انجام بدیم باید از Preprocessor ها استفاده کنیم و اعداد رو در خروجی به وجود بیاریم. مثلا میتونیم با استفاده از PHP چنین کاری رو انجام بدیم:
1 2 3 4 5 6 7 8 9 10 | <ul class="numbered-list"> for($i=1;$i<=$posts->total_count;$i++):?> <li class="numbered-list__item"> <span class="numbered-list__counter"> echo$i?> </span> <!--Remainingmarkup--> </li> endfor?> </ul> |
میبینید که در بالا یک حلقه for قرار داده شده و به ازای تعداد پستها، حلقه اجرا خواهد شد. در هر بار تکرار حلقه شماره اون چاپ میشه و بعد از اون با استفاده از ++ یکی به i اضافه میشه. این کد برای نمونه هست.
اشاره به این کد مفید هست و به شما دید میده ولی باید در نظر بگیرید که این کد محدودیتهایی رو داره. اگه بخوایم بجای اعداد از حروف الفبایی یا اعداد لاتین یا کاراکترهای یونانی و ... استفاده کنیم چی؟ پیاده سازی هر کدام از موارد گفته شده نیازمند استفاده از کتابخانه های خاص خود هست. پس باید یه فکر دیگه بکنیم.
اینجا هست که شمارنده ها در CSS خودشون رو نشون میدن و میتونیم با استفاده از اونا بدون استفاده از هیچ پیش نیاز دیگه ای، کارهای مورد نظرمون رو انجام بدیم.
پشتیبانی مرورگرها از این ویژگی خیلی خوب هست و تقریبا همه مرورگرهای فعلی از اون پشتیبانی میکنن.
حتی میتونین از شمارنده ها در Internet Explorer 8 با خیال راحت استفاده کنید.
قبل از اینکه شروع به شمارش با استفاده از CSS کنیم، شما باید بدونین که شمارش شامل موارد زیر میشه:
در جلسه بعد از ابتدا و بصورت مرحله به مرحله کدنویسی رو شروع میکنیم و شما رو با حالتهای مختلف اون آشنا میکنیم.
در جلسات بعد با ادامه آموزش در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 370