ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
عنصر واجهة مستخدم Validation Radio Group عبارة عن مجموعة من أزرار الخيارات مع دعم تحقق للتحديد. يفرض عنصر واجهة المستخدم تحديد زر خيار واحد من المجموعة.
يبين المثال التالي عنصر واجهة مستخدم Validation Radio Group في حالات متنوعة.
A. رسائل خطأ عنصر واجهة مستخدم Validation Radio Group B. مجموعة عناصر واجهة مستخدم Validation Radio Group
يشتمل عنصر واجهة مستخدم Validation Radio Group على ثلاث حالات غير الحالات الأولية: صالحة، وغير صالحة، وقيمة مطلوبة. يمكنك تبديل خصائص هذه الحالات عن طريق تحرير ملف CSS المقابل (SpryValidationRadio.css)، استنادًا إلى نتائج التحقق المطلوبة. يمكن لعنصر واجهة مستخدم Validation Radio Group إجراء التحقق في مراحل متنوعة: عندما ينقر المستخدم خارج عنصر واجهة المستخدم، أو عندما يقوم المستخدم بإجراء تحديدات، أو عندما يحاول تقديم النموذج.
في أي وقت يقوم عنصر واجهة مستخدم Validation Radio Group بإدخال إحدى هذه الحالات من خلال تفاعل المستخدم، يتم تطبيق منطق إطار عمل Spry لفئة CSS محددة على حاوية HTML لعنصر واجهة المستخدم في وقت التشغيل. على سبيل المثال، إذا حاول مستخدم تقديم نموذج، ولكنه لم يجري أي تحديدات، يطبق Spry فئة على عنصر واجهة المستخدم والتي تتسبب في عرض رسالة الخطأ، "Please make a selection". تتوفر القواعد، التي تتحكم في حالات تصميم رسائل الخطأ وعرضها، في ملف CSS المصاحب لعنصر واجهة المستخدم، SpryValidationRadio.css.
تتألف التعليمة البرمجية لـ HTML الافتراضية لعنصر واجهة مستخدم Validation Radio Group، الموجود عادةً داخل نموذج، من علامة span التي تحيط بالعلامة input type="radio" الخاصة بمجموعة أزرار الخيارات. تتضمن التعليمة البرمجية لـ HTML لعنصر واجهة مستخدم Validation Radio Group أيضًا علامات برنامج نصي أعلى المستند وبعد التعليمة البرمجية لـ HTML لعنصر واجهة المستخدم.
للاطلاع على شرح أشمل حول كيفية عمل عنصر واجهة مستخدم Validation Radio Group، بما في ذلك تحليل كامل للتعليمة البرمجية الخاصة بعنصر واجهة مستخدم Validation Radio Group، راجع www.adobe.com/go/learn_dw_spryradio_ae.
ملاحظة:
يمكنك أيضًا إدراج عنصر واجهة مستخدم Radio Group باستخدام الفئة Spry في اللوحة Insert.
يمكنك تعيين المرحلة التي عندها يحدث التحقق- عندما ينقر المستخدم خارج عنصر واجهة المستخدم، بينما يجري المستخدم التحديدات، أو عندما يحاول تقديم النموذج.
افتراضيًا، تتطلب عناصر واجهة مستخدم Validation Radio Group من المستخدم إجراء تحديد قبل تقديم النموذج. ومع ذلك، يمكنك جعل التحديدات اختيارية للمستخدم.
يمكنك تحديد قيمة يتم تسجيلها كفارغة أو غير صالحة، إذا حدد المستخدم زر خيار مرتبطًا بإحدى هذه القيم. إذا حدد المستخدم زر خيار بقيمة فارغة، يعيد المستخدم رسالة الخطأ "Please make a selection." إذا حدد المستخدم زر خيار بقيمة غير صالحة، يعيد المستخدم رسالة الخطأ "Please select a valid value."
-
في عارض الخصائص، حدد القيم الفارغة أو غير الصالحة. لإنشاء عنصر واجهة مستخدم يعرض رسالة الخطأ القيمة الفارغة "Please make a selection"، اكتب none في المربع النصي Empty Value. لإنشاء عنصر واجهة مستخدم يعرض رسالة الخطأ "Please select a valid value" التي تفيد بوجود قيمة غير صالحة، اكتب invalid في المربع النصي Invalid Value.
على الرغم من أن عارض الخصائص يتيح لك إجراء تحريرات بسيطة لعنصر واجهة مستخدم Validation Radio Group، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تبديل CSS لعنصر واجهة مستخدم Validation Radio Group بحيث يمكنك إنشاء عنصر واجهة مستخدم مصمم حسب رغبتك. للاطلاع على قائمة أكثر تقدمًا، راجع www.adobe.com/go/learn_dw_spryradio_custom_ae.
تشير كل قواعد CSS في الموضوعات الواردة أدناه إلى القواعد الافتراضية الموجودة في الملف SpryValidationRadio.css. يقوم Dreamweaver بحفظ الملف SpryValidationRadio.css في المجلد SpryAssets لموقعك في أي وقت تقوم فيه بإنشاء عنصر واجهة مستخدم Spry Validation Radio Group. ويعد الرجوع إلى هذا الملف أمرًا مفيدًا نظرًا لاحتوائه على معلومات معلق عليها عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.
ملاحظة:
على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Validation Radio Group بسهولة مباشرةً في ملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS عنصر واجهة المستخدم. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.
يتضمن الملف SpryValidationRadio.css تعليقات ممتدة، تشرح التعليمة البرمجية والغرض من قواعد معينة. لمزيد من المعلومات، راجع التعليقات الموجودة في الملف.
افتراضيًا، تظهر رسائل الخطأ الخاصة بعنصر واجهة مستخدم Validation Radio Group باللون الأحمر بحد متصل قدره 1 بكسل يحيط بالنص.
-
لتغيير تصميم نص رسائل خطأ عنصر واجهة مستخدم Validation Radio Group، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير الخصائص الافتراضية، أو إضافة قيم وخصائص تصميم نص من اختيارك.
النص المطلوب تصميمه
قاعدة CSS ذات الصلة
الخصائص ذات الصلة المطلوب تغييرها
نص رسالة الخطأ
.radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg color: #CC3333; border: 1px solid #CC3333;
إن بنود Creative Commons لا تشمل منشورات Twitter™ وFacebook.