ملاحظة:

تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.

معلومات عن عنصر واجهة مستخدم Validation Checkbox

عنصر واجهة مستخدم Spry Validation Checkbox عبارة عن خانة اختيار أو مجموعة من خانات الاختيار في نموذج HTML تعرض الحالات الصالحة وغير الصالحة عندما يقوم المستخدم بتحديد خانة اختيار أو عدم تحديدها. على سبيل المثال، يمكنك إضافة عنصر واجهة مستخدم Validation Checkbox إلى نموذج قد يطلب فيه من المستخدم إجراء ثلاثة تحديدات. إذا لم يُجري المستخدم جميع التحديدات الثلاثة المطلوبة، سيعيد عنصر واجهة المستخدم رسالة خطأ تفيد بعدم الوصول إلى الحد الأدنى من التحديدات.

يبين المثال التالي عنصر واجهة مستخدم Validation Checkbox في حالات متنوعة:

عنصر واجهة مستخدم Validation Checkbox في العديد من الحالات
عنصر واجهة مستخدم Validation Checkbox في العديد من الحالات

A. مجموعة عناصر واجهة المستخدم Validation checkbox، حالة أدنى عدد من التحديدات B. عنصر واجهة مستخدم Validation Checkbox، حالة مطلوبة 

يتضمن عنصر واجهة مستخدم Validation Checkbox عددًا من الحالات (على سبيل المثال، صالحة وغير صالحة، وقيمة مطلوبة، وما إلى ذلك). يمكنك تبديل خصائص هذه الحالات باستخدام عارض الخصائص، استنادًا إلى نتائج التحقق المطلوبة. يمكن لعنصر واجهة مستخدم Validation Checkbox إجراء التحقق في مراحل متنوعة— على سبيل المثال، عندما ينقر المستخدم خارج عنصر واجهة المستخدم، أو عندما يقوم المستخدم بإجراء تحديدات، أو عندما يحاول تقديم النموذج.

الحالة Initial

حالة عنصر واجهة المستخدم عند تحميل الصفحة في المستعرض، أو عندما يقوم المستخدم بإعادة تعيين النموذج.

الحالة Valid

حالة عنصر واجهة المستخدم بعدما أجرى المستخدم تحديدًا أو عند الوصول إلى العدد الصحيح للتحديدات ويمكن إرسال النموذج.

الحالة Required

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

الحالة Minimum Number Of Selections

حالة عنصر واجهة المستخدم بعدما حدد المستخدم عددًا من خانات الاختيار أقل من العدد الأدنى المطلوب.

الحالة Maximum Number Of Selections

حالة عنصر واجهة المستخدم بعدما حدد المستخدم عددًا من خانات الاختيار أكثر من العدد الأقصى المسموح به من خانات الاختيار.

في أي وقت يقوم عنصر واجهة مستخدم Validation Checkbox بإدخال إحدى هذه الحالات من خلال تفاعل المستخدم، يطبق منطق إطار عمل Spry فئة CSS محددة على حاوية HTML لعنصر واجهة المستخدم في وقت التشغيل. على سبيل المثال، إذا حاول مستخدم تقديم نموذج، ولكنه لم يجري أي تحديدات، يطبق Spry فئة على عنصر واجهة المستخدم والتي تتسبب في عرض رسالة الخطأ، "Please make a selection". تتوفر القواعد، التي تتحكم في حالات تصميم رسائل الخطأ وعرضها، في ملف CSS المصاحب لعنصر واجهة المستخدم، SpryValidationCheckbox.css.

تشتمل HTML الافتراضية لعنصر واجهة مستخدم Validation Checkbox، الموجود عادةً داخل نموذج، على علامة <span> للحاوية والتي تحيط بالعلامة <input> الخاصة بخانة الاختيار. تتضمن HTML لعنصر واجهة مستخدم Validation Checkbox أيضًا علامات برنامج نصي أعلى المستند وبعد علامات التغيير في HTML لعنصر واجهة المستخدم.

للاطلاع على شرح أشمل حول كيفية عمل عنصر واجهة مستخدم Validation Checkbox، بما في ذلك تحليل كامل للتعليمة البرمجية الخاصة بعنصر واجهة مستخدم Validation Checkbox، راجع www.adobe.com/go/learn_dw_sprycheckbox_ae.

إدراج عنصر واجهة مستخدم Validation Checkbox وتحريره

إدراج عنصر واجهة مستخدم Validation Checkbox

  1. حدد Insert > Spry > Spry Validation Checkbox.
  2. أكمل مربع الحوار Input Tag Accessibility Attributes، ثم انقر فوق OK.

ملاحظة:

يمكنك أيضًا إدخال عنصر واجهة مستخدم Validation Checkbox باستخدام الفئة Spry في اللوحة Insert.

تحديد عن حدوث التحقق

يمكنك تعيين المرحلة التي عندها يحدث التحقق- عندما ينقر المستخدم خارج عنصر واجهة المستخدم، بينما يجري المستخدم التحديدات، أو عندما يحاول تقديم النموذج.

  1. حدد عنصر واجهة مستخدم Validation Checkbox في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، حدد الخيار الذي يوضح الوقت الذي تريد حدوث التحقق فيه. يمكنك تحديد كل الخيارات أو النقر فوق Submit فقط.

    Blur

    التحقق في أي وقت يقوم فيه المستخدم بالنقر خارج خانة الاختيار.

    Change

    التحقق طالما يقوم المستخدم بعمل تحديدات.

    Submit

    التحقق عندما يحاول المستخدم تقديم النموذج. يتم تحديد خيار التقديم افتراضيًا، ولا يمكن إلغاء تحديده.

تحديد أقصى وأدنى حد لنطاق التحديد

بشكل افتراضي، يتم تعيين عنصر واجهة مستخدم Validation Checkbox إلى default. ومع ذلك، في حالة إدراج عدد من خانات الاختيار على صفحتك، فيمكنك تحديد أقصى وأدنى حد لنطاق التحديد. على سبيل المثال، إذا كان لديك ست خانات اختيار ضمن العلامة <span> لعنصر واجهة مستخدم Validation Checkbox فردي، وكنت تريد التأكد من أن المستخدم يحدد ثلاث مربعات اختيار على الأقل، فيمكنك تعيين هذا التفضيل لعنصر واجهة المستخدم بالكامل.

  1. حدد عنصر واجهة مستخدم Validation Checkbox في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، حدد الخيار Enforce Range.
  3. أدخل أدنى أو أقصى عدد (أو كليهما) لخانات الاختيار التي تريد من المستخدم تحديدها.

عرض حالات عنصر واجهة المستخدم في طريقة العرض Design

  1. حدد عنصر واجهة مستخدم Validation Checkbox في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، حدد الحالة التي تريد رؤيتها من القائمة المنبثقة Preview States. على سبيل المثال، حدد Initial لرؤية عنصر واجهة المستخدم في حالته الأولية.

تخصيص رسائل خطأ عنصر واجهة مستخدم Validation Checkbox

افتراضيًا، تظهر رسائل الخطأ الخاصة بعنصر واجهة مستخدم Validation Checkbox باللون الأحمر بحد متصل قدره 1 بكسل يحيط بالنص. يمكنك تغيير CSS لعنصر واجهة مستخدم Validation Checkbox وإنشاء لوحة قابلة للطي مصممة حسب رغبتك. للاطلاع على قائمة أكثر تقدمًا لمهام التصميم، راجع www.adobe.com/go/learn_dw_sprycheckbox_custom_ae.

  1. افتح الملف SpryValidationCheckbox.css.

    يقوم Dreamweaver بحفظ الملف SpryValidationCheckbox.css في المجلد SpryAssets الخاص بموقعك عند إنشاء عنصر واجهة مستخدم Spry Validation Checkbox. ويعد الرجوع إلى هذا الملف أمرًا مفيدًا نظرًا لاحتوائه على معلومات معلق عليها عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.

  2. استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير الخصائص الافتراضية، أو إضافة قيم وخصائص تصميم نص من اختيارك:

    النص المطلوب تصميمه

    قاعدة CSS ذات الصلة

    الخصائص ذات الصلة المطلوب تغييرها

    نص رسالة الخطأ

    .checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg

    color: #CC3333; border: 1px solid #CC3333;

    ملاحظة:

    على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Validation Checkbox بسهولة مباشرةً في الملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS لعنصر واجهة المستخدم. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت