الفرق بين المراجعتين ل"HTML/progress"
ط (استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1') |
(إضافة قسمين) |
||
| سطر 3: | سطر 3: | ||
مثال عن شريط تقدّم يُظهِر إنجاز المُهمة بنسبة 70%:<syntaxhighlight lang="html"> | مثال عن شريط تقدّم يُظهِر إنجاز المُهمة بنسبة 70%:<syntaxhighlight lang="html"> | ||
| − | <progress value="70" max="100">70 %</progress> | + | <progress value="70" max="100">70%</progress> |
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == بطاقة العنصر == | ||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 50: | سطر 51: | ||
إن لم تُستعمَل الخاصية <code>value</code> فهذا يُشير إلى أنَّ التقدّم غير معروف (indeterminate)، وهذا يعني أنَّ المهمة قيد التنفيذ لكن لا يُعرَف كم ستستغرق وقتًا أو ما هو الزمن المتوقع لإنهائها. | إن لم تُستعمَل الخاصية <code>value</code> فهذا يُشير إلى أنَّ التقدّم غير معروف (indeterminate)، وهذا يعني أنَّ المهمة قيد التنفيذ لكن لا يُعرَف كم ستستغرق وقتًا أو ما هو الزمن المتوقع لإنهائها. | ||
| − | يمكن استخدام المُحدِّد <code>:indeterminate</code> في CSS لتحديد أشرطة التقدم غير معروفة الحالة، ولتغيير حالة شريط التمرير إلى غير معروفة بعد إعطاء الخاصية value قيمةً ما، فيجب حذف الخاصية باستخدام <code>element.removeAttribute("value")</code>. | + | يمكن استخدام المُحدِّد [[CSS/:indeterminate|<code>:indeterminate</code>]] في [[CSS]] لتحديد أشرطة التقدم غير معروفة الحالة، ولتغيير حالة شريط التمرير إلى غير معروفة بعد إعطاء الخاصية value قيمةً ما، فيجب حذف الخاصية باستخدام <code>element.removeAttribute("value")</code>. |
| + | |||
| + | == التنسيق الافتراضي == | ||
| + | يختلف تنسيق العنصر <code><progress></code> بين المتصفحات. تضبط أغلبية المتصفحات قيمة الخاصية <code>[[CSS/display|display]]</code> إلى <code>inline-block</code>، والخاصية <code>[[CSS/height|height]]</code> إلى <code>1em</code> والخاصية <code>[[CSS/width|width]]</code> إلى <code>10em</code>، إضافةً إلى ضبط الخاصية <code>[[CSS/vertical-align|vertical-align]]</code> إلى <code>-0.2em</code>. أما الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> فتختلف المتصفحات على قيمتها:<syntaxhighlight lang="css"> | ||
| + | progress { | ||
| + | display: inline-block; | ||
| + | height: 1em; | ||
| + | width: 10em; | ||
| + | vertical-align: -0.2em; | ||
| + | box-sizing: border-box|content-box; /* تختلف القيمة حسب المتصفح */ | ||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | |||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
*معيار [https://html.spec.whatwg.org/multipage/forms.html#the-progress-element HTML Living Standard]. | *معيار [https://html.spec.whatwg.org/multipage/forms.html#the-progress-element HTML Living Standard]. | ||
المراجعة الحالية بتاريخ 04:24، 25 فبراير 2018
يُمثِّل العنصر <progress> تقدم إكمال مهمة ما، ويُعرَض عادةً على شكل شريط تقدم (progress bar).
مثال عن شريط تقدّم يُظهِر إنجاز المُهمة بنسبة 70%:
<progress value="70" max="100">70%</progress>
بطاقة العنصر
| تصنيفات المحتوى | عنصر تنظيمي، وعنصر عادي. |
|---|---|
| المحتوى المسموح | المحتوى العادي، لكن لا يجوز ورود العنصر <progress> ضمنه.
|
| الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى العادي. |
| واجهة DOM | HTMLProgressElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| 6.0 | 6.0 | مدعوم | 5.2 | 11.0 |
أضيف هذا العنصر أوّل مرة إلى HTML5، ولم يكن موجودًا من قبل في HTML 4.
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
max
تصف هذه الخاصية ما هو حجم العمل الكلي الذي يُمثِّله العنصر <progrees>، ويجب أن تكون هذه القيمة أكبر من الصفحة وقد تكون عشرية، والقيمة الافتراضية هي 1.
value
تُحدِّد هذه الخاصية كم أنُجِزَ من المهمة، ويجب أن تكون قيمة هذه الخاصية عددًا عشريًا بين 0 وقيمة الخاصية max، أو بين 0 و 1 إذا لم تُحدَّد قيمة للخاصية max.
إن لم تُستعمَل الخاصية value فهذا يُشير إلى أنَّ التقدّم غير معروف (indeterminate)، وهذا يعني أنَّ المهمة قيد التنفيذ لكن لا يُعرَف كم ستستغرق وقتًا أو ما هو الزمن المتوقع لإنهائها.
يمكن استخدام المُحدِّد :indeterminate في CSS لتحديد أشرطة التقدم غير معروفة الحالة، ولتغيير حالة شريط التمرير إلى غير معروفة بعد إعطاء الخاصية value قيمةً ما، فيجب حذف الخاصية باستخدام element.removeAttribute("value").
التنسيق الافتراضي
يختلف تنسيق العنصر <progress> بين المتصفحات. تضبط أغلبية المتصفحات قيمة الخاصية display إلى inline-block، والخاصية height إلى 1em والخاصية width إلى 10em، إضافةً إلى ضبط الخاصية vertical-align إلى -0.2em. أما الخاصية box-sizing فتختلف المتصفحات على قيمتها:
progress {
display: inline-block;
height: 1em;
width: 10em;
vertical-align: -0.2em;
box-sizing: border-box|content-box; /* تختلف القيمة حسب المتصفح */
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.