كيفية تطبيق سمات واجهة المستخدم المتعددة

Question

هل لدى أي شخص أي تقنيات/نصائح/حيل لمساعدتي في تنظيم وتنفيذ العديد من سمات واجهة المستخدم في تطبيق واحد في تطبيق واحد؟

لقد أدت إلى استخدام !important كما يبدو أنها أكثر طريقة لإجبار التجاوزات على الأسلوب - لكن هذه الطريقة ليست مرغوبة للغاية.

Answer 1

نعم ، لكن ذلك يعتمد على ما تعنيه.

دعنا نقول أنك تريد أن يتم تصميم العنصر A باستخدام السمة X ، والعنصر B مع السمة Y. JQuery السماوية لديها هذه الميزة مدمجة. عندما تذهب لتنزيل سمة (هنا)، انقر إعدادات الموضوع المتقدمة على اليمين. هنا ، يمكنك تعيين "نطاق CSS". سيتيح لك هذا تطبيق فصول jQuery UI (أي ui-corners-all, ، وما إلى ذلك) من موضوع محدد. هنا الوصف الذي يقدمونه لهذا الخيار:

يتيح لك هذا الحقل تحديد نطاق CSS للحد من موضوعك في جزء معين من الصفحة. هذا مفيد عند استخدام موضوعات متعددة على الصفحة. إذا لم تقدم نطاق CSS ، فسيتم تطبيق موضوعك على جميع عناصر واجهة المستخدم على الصفحة.

في معظم المواقف ، لن تحتاج إلى تحديد نطاق CSS. يرجى ملاحظة: إذا قمت بتقديم نطاق CSS ، فلن تحصل على صفحة مثال مضمّنة في التنزيل.

يمكنك أيضا تغيير اسم المجلد:

يتيح لك هذا الحقل تحديد اسم مجلد السمة في التنزيل الخاص بك. هذا مفيد إذا كنت تخطط لاستخدام سمات متعددة على الصفحة. انها الافتراضات إلى "الموضوع".

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

كيف تستعمل:

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

<div class='ui-rounded-corners aClass'>
    Content    
</div>

Answer 2

سيكون لديك بعض المشكلات إذا قمت بتطبيق هذه التقنية على واجهة المستخدم واجهة المستخدم التي تراكب وتم إلحاقها بالجسم - مربع الحوار ، DatePicker ، الإكمال التلقائي ....

في حالة الإكمال التلقائي ، يمكنك القيام بما يلي للحصول على عنصر الأصل مع فئة النطاق - إضافة فئة STRIP إلى UL من الإكمال التلقائي نفسه لا يكفي.

jQuery('.autocomplete').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
    }
});

Answer 3

مرحبًا - تم البحث لساعات ، وأخيراً وجدت الطريق للقيام بذلك من مجموعة FilamentGroup ، مع أمثلة تعليمية وأمثلة عمل.
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/