آموزش تگ progress در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ progress در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Progress در HTML
تگ progress تگی است که با استفاده از آن میتوان میزان درصد از پیشرفت یک کار یا عمل یا در واقع همون پروژه را مشخص کرد.
Free-Learn
مثال از تگ progress در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 |
<body> میزان پیشرفت ساخت پروژه : <progress value="35" max="100"></progress> </body> |
مثال شماره ۲ : سفارشی سازی تگ Progress با استفاده از CSS
در دستورات زیر که متعلق به زبان CSS می باشد ، ۲ دستور داریم به اسم های :
- -webkit-progress-bar
- -moz-progress-bar
که ممکنه کمی براتون عجیب غریب باشه! نگران نباشید چیز خاصی نیست، webkit و moz فقط برای اینه که مرورگرهای گوگل کروم و موزیلا فایرفاکس از این ویژگی پشتیبانی کنند.
یعنی webkit برای مرورگرهای گوگل کروم (Chrome)،اوپرا/اپرا (Opera) و سافاری (Safari) و moz برای مرورگر موزیلا فایرفاکس می باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> progress { background-color: #f3f3f3; border: 0; height: 18px; border-radius: 9px; } progress::-webkit-progress-bar { background-color:#00b185; } progress::-moz-progress-bar { background-color:#00b185; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ progress در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | ۸٫۰ | ۱۶٫۰ | ۱۱٫۰ | ۶٫۰ | ۱۰٫۰ |
Free-Learn
جدول صفات تگ progress در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| max | number | بیشترین/حداکثر مقدار را برای تگ Progress مشخص میکند. |
| value | number | میزان/مقدار پیشرفت پروژه را مشخص میکند. |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ progress از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
تگ progress یک تگ جدید/اضافه شده در HTML5 می باشد.
اگر میخواهید یک گیج اندازه گیری (Gauge) داشته باشید و از طریق آن میزان فضا یا اندازه یک عنصر را به نمایش بگذارید سعی کنید حتما از تگ Meter که مناسب اینکار است استفاده نمایید.
Free-Learn
دستورات CSS پیش فرض
این تگ هیچ دستور CSS پیش فرضی ندارد.
Free-Learn
