حدد Insert > Spry > Spry Validation Select.
تاريخ آخر تحديث
May 06, 2021 06:21:14 PM GMT
ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
معلومات عن عنصر واجهة مستخدم Validation Select
عنصر واجهة مستخدم Spry Validation Select عبارة عن قائمة منسدلة تعرض الحالات الصالحة أو غير الصالحة عندما يجري المستخدم عملية تحديد. على سبيل المثال، يمكنك إدراج عنصر واجهة مستخدم Validation Select يحتوي على قائمة حالات، مجمعة في أقسام مختلفة ومقسومة على سطور أفقية. إذا قام المستخدم دون قصد بتحديد أحد هذه السطور المقسِّمة كمقابل لإحدى الحالات، فسيعيد عنصر واجهة مستخدم Validation Select رسالة إلى المستخدم تفيد بأن التحديد غير صالح.
يوضح المثال التالي عنصر واجهة مستخدم Validation Select موسع، وكذلك نموذج مطوي لعنصر واجهة المستخدم في حالات متنوعة:
A. عنصر واجهة مستخدم Validation Select عند التركيز B. عنصر واجهة مستخدم Select، حالة صالحة C. عنصر واجهة مستخدم Select، حالة مطلوبة D. عنصر واجهة مستخدم Select، حالة غير صالحة
يتضمن عنصر واجهة مستخدم Validation Select عددًا من الحالات (على سبيل المثال، صالحة وغير صالحة، وقيمة مطلوبة، وما إلى ذلك). يمكنك تبديل خصائص هذه الحالات باستخدام عارض الخصائص، استنادًا إلى نتائج التحقق المطلوبة. يمكن لعنصر واجهة مستخدم Validation Select إجراء التحقق في مراحل متنوعة— على سبيل المثال، عندما ينقر المستخدم خارج عنصر واجهة المستخدم، أو عندما يقوم المستخدم بإجراء تحديدات، أو عندما يحاول تقديم النموذج.
الحالة Initial
حالة عنصر واجهة المستخدم عند تحميل الصفحة في المستعرض، أو عندما يقوم المستخدم بإعادة تعيين النموذج.
الحالة Focus
حالة عنصر واجهة المستخدم عندما ينقر المستخدم فوق عنصر واجهة المستخدم.
الحالة Valid
حالة عنصر واجهة المستخدم بعدما حدد المستخدم عنصرًا صالحًا، ويمكن تقديم النموذج.
الحالة Invalid
حالة عنصر واجهة المستخدم بعدما حدد المستخدم عنصرًا صالحًا.
الحالة Required
حالة عنصر واجهة المستخدم بعدما فشل المستخدم في تحديد عنصر صالح.
في أي وقت يقوم عنصر واجهة مستخدم Validation Select بإدخال إحدى الحالات المذكورة أعلاه من خلال تفاعل المستخدم، يتم تطبيق منطق إطار عمل Spry لفئة CSS محددة على حاوية HTML لعنصر واجهة المستخدم في وقت التشغيل. على سبيل المثال، إذا حاول مستخدم تقديم نموذج، ولكنه لم يحدد عنصرًا من القائمة، يطبق Spry فئة على عنصر واجهة المستخدم بحيث يعرض رسالة الخطأ، "Please select an item". تتوفر القواعد، التي تتحكم في حالات تصميم رسائل الخطأ وعرضها، في ملف CSS المصاحب لعنصر واجهة المستخدم، SpryValidationSelect.css.
تشتمل HTML الافتراضية لعنصر واجهة مستخدم Validation Select، الموجود عادةً داخل نموذج، على علامة <span> للحاوية والتي تحيط بالعلامة <input> الخاصة بمنطقة النص. تتضمن HTML لعنصر واجهة مستخدم Validation Select أيضًا علامات برنامج نصي أعلى المستند وبعد علامات التغيير في HTML لعنصر واجهة المستخدم.
للاطلاع على شرح أشمل حول كيفية عمل عنصر واجهة مستخدم Validation Select، بما في ذلك تحليل كامل للتعليمة البرمجية الخاصة بعنصر واجهة مستخدم Validation Select، راجع www.adobe.com/go/learn_dw_spryselect_ae.
إدراج عنصر واجهة مستخدم Validation Select وتحريره
إدراج عنصر واجهة مستخدم Validation Select
-
-
أكمل مربع الحوار Input Tag Accessibility Attributes، ثم انقر فوق OK.
-
في طريقة العرض Code، قم بإضافة علامات خيارات تحتوي على قيم وعناصر القائمة. لا يُجري Dreamweaver هذا نيابة عنك تلقائيًا. لمزيد من المعلومات، راجع الموضوع السابق.
ملاحظة:
يمكنك أيضًا إدخال عنصر واجهة مستخدم Validation Select باستخدام الفئة Spry في اللوحة Insert.
تحديد عن حدوث التحقق
يمكنك تعيين المرحلة التي عندها يحدث التحقق- عندما ينقر المستخدم خارج عنصر واجهة المستخدم، بينما يكتب المستخدم، أو عندما يحاول تقديم النموذج.
-
حدد عنصر واجهة مستخدم Validation Select في النافذة Document.
-
في عارض الخصائص (Window > Properties)، حدد الخيار الذي يوضح الوقت الذي تريد حدوث التحقق فيه. يمكنك تحديد كل الخيارات أو النقر فوق Submit فقط.
Blur
التحقق في أي وقت يقوم فيه المستخدم بالنقر خارج حقل عنصر واجهة المستخدم.
Change
التحقق طالما يقوم المستخدم بعمل تحديدات.
Submit
التحقق عندما يحاول المستخدم تقديم النموذج. يتم تحديد خيار التقديم افتراضيًا، ولا يمكن إلغاء تحديده.
عرض حالات عنصر واجهة المستخدم في طريقة العرض Design
-
حدد عنصر واجهة مستخدم Validation Select في النافذة Document.
-
في عارض الخصائص (Window > Properties)، حدد الحالة التي تريد رؤيتها من القائمة المنبثقة Preview States. على سبيل المثال، إذا كنت تريد رؤية عنصر واجهة المستخدم في حالته الصالحة، فحدد Valid.
منع قيم فارغة أو السماح بها
بشكل افتراضي، تتطلب جميع عناصر واجهة مستخدم Validation Select، التي تقوم بإدراجها مع Dreamweaver قيام المستخدمين بتحديد عناصر القائمة التي لها قيمة مرتبطة بها عند نشر عنصر واجهة المستخدم على صفحة ويب. ومع ذلك، يمكنك تعطيل هذا الخيار.
-
حدد عنصر واجهة مستخدم Validation Select في النافذة Document.
-
في عارض الخصائص (Window > Properties)، قم بتحديد الخيار Do Not Allow Blank Values أو إلغاء تحديده، وفقًا لتفضيلاتك.
تحديد قيمة غير صالحة
يمكنك تحديد قيمة يتم تسجيلها كقيمة غير صالحة، إذا حدد المستخدم عنصر قائمة مرتبطًا بتلك القيمة. على سبيل المثال، إذا قمت بتحديد -1 كقيمة غير صالحة، وقمت بتعيين القيمة إلى علامة خيار، فسيعيد عنصر واجهة المستخدم رسالة خطأ، إذا حدد المستخدم عنصر قائمة.
<option value="-1"> ------------------- </option>
-
حدد عنصر واجهة مستخدم Validation Select في النافذة Document.
-
في عارض الخصائص (Window > Properties)، أدخل رقمًا لاستخدامه كقيمة غير صالحة في المربع Invalid Value.
تخصيص عنصر واجهة مستخدم Validation Select
بالرغم من أن عارض الخصائص يتيح لك إمكانية إجراء عمليات تحرير بسيطة على عنصر واجهة مستخدم Validation Select، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تغيير CSS لعنصر واجهة مستخدم Validation Select وإنشاء لوحة قابلة للطي مصممة حسب رغبتك.
تشير كل قواعد CSS في الموضوعات الواردة أدناه إلى القواعد الافتراضية الموجودة في الملف SpryValidationSelect.css. يقوم Dreamweaver بحفظ الملف SpryValidationSelect.css في المجلد SpryAssets الخاص بموقعك عند إنشاء عنصر واجهة مستخدم Spry Validation Select. ويعد الرجوع إلى هذا الملف أمرًا مفيدًا نظرًا لاحتوائه على معلومات معلق عليها عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.
ملاحظة:
على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Validation Select بسهولة مباشرةً في الملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS لعنصر واجهة المستخدم. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.
تصميم نص رسالة خطأ عنصر واجهة المستخدم Validation Select
افتراضيًا، تظهر رسائل الخطأ الخاصة بعنصر واجهة مستخدم Validation Select باللون الأحمر بحد متصل قدره 1 بكسل يحيط بالنص.
-
لتغيير تصميم نص رسائل خطأ عنصر واجهة مستخدم Validation Select، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير الخصائص الافتراضية، أو إضافة قيم وخصائص تصميم نص من اختيارك.
النص المطلوب تصميمه
قاعدة CSS ذات الصلة
الخصائص ذات الصلة المطلوب تغييرها
نص رسالة الخطأ
.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg color: #CC3333; border: 1px solid #CC3333;
تغيير ألوان خلفية عنصر واجهة مستخدم Validation Select
-
لتغيير ألوان خلفية عنصر واجهة مستخدم Validation Select، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير قيم لون الخلفية الافتراضية:
لون الخلفية المطلوب تغييره
قاعدة CSS ذات الصلة
الخاصية ذات الصلة المطلوب تغييرها
لون خلفية عنصر واجهة المستخدم في الحالة الصالحة
.selectValidState select, select.selectValidState background-color: #B8F5B1;
لون خلفية عنصر واجهة المستخدم في الحالة غير الصالحة
select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select background-color: #FF9F9F;
لون خلفية عنصر واجهة المستخدم عند التركيز
.selectFocusState select, select.selectFocusState background-color: #FFFFCC;
تسجيل الدخول إلى حسابك