سمة العنوان على العناصر المعوقة في Firefox

Question

أقوم بإنشاء تطبيق ديناميكي للغاية على الويب باستخدام الكثير من JavaScript للتعامل مع أحداث المستخدم. أنا بصدد جعل الأمور أكثر قابلية للاستخدام ، واجهت مشكلة لم أواجهها من قبل.

أنا أستخدم jQuery ، لذلك عامل ذلك في إجاباتك. شكرا لك مقدما.

لدي مجموعة من عناصر الأزرار المحددة على النحو التالي:

<input type="button" title="My 'useful' text here." disabled="disabled" />

لدي هذه الأزرار مع نمط افتراضي من:

div#option_buttons input {
     cursor: help;
}

بعد ذلك ، باستخدام jQuery أقوم بتشغيل شيء من هذا القبيل كإدارة نقرة على مربع تحديد:

window.current_column = '';
$('select.report_option_columns').live('click', function() {
    var column = $(this).val();
    if ( column == window.current_column ) {
        // clear our our previous selections
        window.current_column = '';
        // make this option no longer selected
        $(this).val('');

        $('div#option_buttons input').attr('disabled','disabled');
        $('div#option_buttons input').attr(
            'title',
            'You must select a column from this list.'
        );
        $('div#option_buttons input').css('cursor', 'help');
    } else {
        window.current_column = column;
        $('div#option_buttons input').attr('disabled','');
        $('div#option_buttons input').attr(
            'title',
            'Add this option for the column "' + column + '"'
        );
        $('div#option_buttons input').css('cursor', 'default');
    }
});

لذلك ، كما ترون ، عند تحديد عمود في مربع تحديد (غير مبين هنا) ، أريد تمكين الزر وتصرف مثل زر ما (مع أحداث النقرات الخاصة بي). ولكن عندما لا يتم تحديد عمود (بما في ذلك التحميل الافتراضي) ، أريد تعطيل الزر. أراد مطور قابلية الاستخدام فيي إعطاء المستخدمين أدلة سياقية خفية حول ما يمكنهم فعله لتمكين الزر من خلال التقديم الأصلي لسمة العنوان كملالية أدوات خفيفة الوزن. أفعل ذلك بالفعل في مناطق أخرى من التطبيق (هذا وحش مجنون للمشروع) وقد أظهرت اختبارات قابلية الاستخدام لدينا أن المستخدمين قادرون على الأقل على إدراك أنه عندما يتغير المؤشر إلى "المساعدة" التي يمكنهم التحوم بها على العنصر والحصول على بعض المعلومات حول ما يجري.

ولكن هذه هي المرة الأولى التي جربت فيها هذا بعنصر النموذج. على ما يبدو عندما أضع معطلًا = "معطل" في العنصر ، فإنه يتجاهل تمامًا سمة العنوان ولن يعرض نصيحة الأداة أبدًا.

الآن ، أعلم أن لدي بعض الخيارات (على الأقل الخيارات التي يمكن أن أفكر فيها):

1. اكتب المكونات الإضافية الخاصة بي TABLE TIP المخصصة التي تعتبر أكثر قوة قليلاً.
2. لا "تعطيل" العنصر ، ولكن نمطه على أنه معاق. كان هذا هو الخيار الذي كنت أميل إليه أكثر (من حيث سهولة التطور) لكنني أكره الاضطرار إلى القيام بذلك.
3. اترك الزر كما تم تمكينه ولكن لا تعالج حدث النقر. لا أحب هذا الخيار كثيرًا لأنني أحب أن أترك الأشياء مصممة أصليًا كما ينبغي أن تكون منطقية. يشعر زر المعوقين "أكثر صحة" ، ويتم التعرف على شكل زر معطل على الفور كزر معطل.

لذا ، مع كل ما قيل ، هل أفتقد شيئًا؟ هل هناك شيء سهل يمكنني فعله لم أفكر فيه؟ لقد فشلت عمليات البحث عن Google في هذا الموضوع ، لذلك اعتقدت أنني سأرمي هذا على Stackoverflow للحصول على بعض العيون الجديدة على هذا.

**تعديل**

لقد وجدت سؤالًا آخر stackoverflow حول هذا الموضوع نفسه ، على الرغم من أن هذا الشخص استخدم مجموعة مختلفة جدًا من المصطلحات التي تصف مشكلته (ربما لم أجدها).

عنوان URL للسؤال هو: لا يعرض Firefox تلميحات الأدوات على حقول الإدخال المعوقة

كل من الإجابات على هذا السؤال جيدة جدًا ، على الرغم من أنني أود معرفة ما إذا كان لدى أي شخص أي اقتراحات أخرى. ربما شيء أكثر jQuery محددة؟ شكرًا لك مرة أخرى.

Answer 1

هناك العديد من المكونات الإضافية للتحقق من الصحة القوية للغاية. يمكنك العثور عليها في منطقة jQuery Plugins.

خيار آخر بالنسبة لك على الرغم من أنني أحب أن أحبه ويميل إلى أن أتجه الآن ، يستخدم Adays المكون الإضافي "tipsy". يمكنك وضع القليل "؟" الرموز على يمين حقول النص الخاصة بك ويمكن للناس الماوس فوقها للحصول على نصيحة أداة "تشبه Facebook". هذا البرنامج المساعد حاد للغاية وأنا أوصي به بشدة.

حظا طيبا وفقك الله!

Answer 2

لقد واجهت مشكلة مماثلة وأحيطت بالعنصر المعاق في عنصر آخر وتفاعل مع هذا div ، كنت أستخدم Tiptip لإظهار Tooltip لمربع الاختيار المعاق

<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >   
        <input disabled="disabled" type="checkbox">
</div>

Answer 3

لم أختبر ما إذا كان هذا يحل المشكلة في العنوان المفقود أم لا ، ولكن يمكنك أيضًا تعطيل الزر (الأزرار) باستخدام jQuery $(document).ready()

التحيات ، harpax

Answer 4

إذا لم يكسر هذا التصميم الخاص بك تمامًا ، فيمكنك استبدال الزر الخاص بك بـ "Span" ، "P" ، ... علامة "نص" مفيد "هنا".

وقم بتبديله بالزر فقط عندما يقوم المستخدم بالتحرك الصحيحة.