موبايل التطبيق تصميم / ديف مخصص المواضيع مع jQuery موبايل
في البرنامج التعليمي jQuery Mobile السابق الخاص بنا ، قمت بتقديم الكثير من الإطار الأساسي وكيفية البدء في إنشاء موقع الويب الأول الخاص بك. مكتبة JS خفيفة الوزن وسهلة الالتقاط فيما يتعلق بصعوبة التعلم. هناك أيضًا ورقة أنماط CSS عامة مضمنة في الملفات حتى تتمكن من تخصيص العناصر في تخطيطك.
بالنسبة إلى هذا الجزء الثاني ، أود قضاء بعض الوقت في التعمق في هذه الفكرة المتعلقة بسمات jQuery Mobile. لقد تم إحداث ثورة في صناعة التصميم بأكملها من خلال jQM وقد تم تحسين عملية إنشاء قالب متنقل من البداية بشكل كبير. jQuery Mobile ليست مجرد مكتبة نصية ، بل إطار عمل كامل للبناء عليه وإنتاج قوالب متنقلة فعالة.
محتويات ورقة الأنماط الافتراضية
يجب أن أبدأ بتوضيح نوع كود CSS المضمّن في الملفات الافتراضية بالضبط. تم تقسيم ورقة الأنماط من jQM 1.0 إلى قسمين رئيسيين - بناء و المواضيع.
رمز الهيكل هو الأشياء التي يمكنك تجاهلها في الغالب. يستخدم هذا لتعيين الهوامش ، الحشو ، الارتفاع / العرض ، أشكال الخطوط ، إلى جانب العديد من الإعدادات الافتراضية للمتصفح الأخرى. ثم يتم فصل السمات الداخلية عن A-E والتي يتحكم كل منها في المؤثرات البصرية المختلفة في التصميم الخاص بك. يمكن أن يشمل ذلك ألوان الخلفية ، التدرجات ، الظلال المسقطة ، إلخ.
يمكن أيضًا الإشارة إلى كل عنصر من عناصر السمات الداخلية حوامل. عند إنشاء قالب للجوال ، ستلتزم عمومًا بسمة واحدة. ولكن في كل سيناريو تقريبًا ، يمكن تحسين التصميم باستخدام أنظمة ألوان مختلفة. لا تتضمن ورقة الأنماط الافتراضية سوى عينات A-E ولكن يمكنك إنشاء حوامل F-Z لإضافة 21 بديلًا آخر في مكتبة السمات الخاصة بك. فقط لتوضيح هذه الشروط مرة أخرى أ موضوع يعتبر ملف CSS واحدًا يمكن أن يشمل 26 مختلفة حوامل المسمى A-Z.
تبديل الأنماط
إذا لم تختر تحديد أي حوامل ، فسيتمسك jQuery Mobile بالحامل A افتراضيًا. إذا لم تكن على دراية بالفعل ، فإن مستندات jQuery Mobile تستخدم سمات بيانات HTML5 للعديد من الوظائف الداخلية. يتضمن أحد هذه التغييرات تغيير العينات عبر سمة سمة البيانات. راجع مثال الكود أدناه لمعرفة ما أقصده.
صفحة jQM الافتراضية
هنا بعض المحتويات الداخلية.
لاحظ أنني وضعت سمة سمة البيانات على div صفحة الجذر. هذا يعني أن لون الحامل الجديد سيؤثر على كل شيء بداخله والذي يتضمن مناطق الرأس والمحتوى. أنا يمكن أن تشمل بالإضافة إلى ذلك بيانات موضوع = "ج" في div head لتغيير هذا المحتوى فقط من بقية صفحتي.
مكونات سواتش
يجب أن تكون واضحة إلى حد ما كيفية تنفيذ هذه العينات المختلفة داخل تخطيط واحد. لذا دعونا الآن نلقي نظرة على كود jQM CSS حتى نتمكن من تحليل المكونات الفردية للحامل. تحقق من أحدث ملف jQuery Mobile 1.4.5 CSS المستضاف على CDN الخاص بهم.
يجب أن تلاحظ كيف يتم فصل كل حامل بتعليق واضح وينتهي كل فصل من الفئات الداخلية بالحروف المناسبة. فمثلا .واجهة المستخدم بار واحد و .واجهة المستخدم للجسم واحد يتم تطبيقها على أشرطة رأس / تذييل الصفحة ومناطق المحتوى بشكل افتراضي. تقوم معظم الخصائص بتطبيق إعادة تعيين على ألوان الخطوط والارتباطات وتدرجات الخلفية والتفاصيل الصغيرة الأخرى. أدرجت ببساطة واجهة المستخدم بار واحد رموز لتعطيك فكرة عن العناصر التي نستهدفها.
/* ا ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A؛ الخلفية: # 111111 ؛ اللون: # fffff؛ وزن الخط: غامق ؛ text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000؛ background-image: -webkit-gradient (خطي ، أعلى اليسار ، أسفل اليسار ، من (# 3c3c3c) ، إلى (# 111)) ؛ / * Saf4 +، Chrome * / background-image: -webkit-linear-gradient (# 3c3c3c، # 111)؛ / * Chrome 10+، Saf5.1 + * / background-image: -moz-linear-gradient (# 3c3c3c، # 111)؛ / * FF3.6 * / background-image: -ms-linear-gradient (# 3c3c3c، # 111)؛ / * IE10 * / background-image: -o-linear-gradient (# 3c3c3c، # 111)؛ / * Opera 11.10+ * / / background-image: linear-gradient (# 3c3c3c، # 111)؛ .ui-bar-a ، .ui-bar-a input ، .ui-bar-a select ، .ui-bar-a textarea ، .ui-bar-a button font-family: Helvetica، Arial، sans- الرقيق. .ui-bar-a .ui-link-inherit color: #fff؛ .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /؛ وزن الخط: غامق ؛ .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /؛ .ui-bar-a .ui-link: active color: # 2489CE / * a-bar-link-active * /؛ .ui-bar-a .ui-link: تمت الزيارة color: # 2489CE / * a-bar-link-visit * /؛
إذا كنت تبحث فقط لإنشاء حامل مخصص ، فإنني أوصي بإسناد القالب إلى أحد النسخ الأصلية. ستصبح العملية أكثر سلاسة إذا بدأت كتابة الرموز في مستند CSS جديد. لن يكون لديك متاعب التحرير في الملف الأصلي ويمكنك البدء في العمل على قائمة نظيفة. لكن المجالات الرئيسية التي تريد التركيز عليها تشمل ما يلي:
- أشرطة رأس وتذييل الصفحة
- محتوى الجسم ونص الصفحة
- أنماط القائمة
- ينص الزر الافتراضي / التحويم / نشط
- عناصر تحكم إدخال النموذج (إضافية)
ترميز تصميم شريط جديد
من نفس ملف CSS ، نظرنا إلى نسخ / لصق جميع رموز swatch A (الأسطر 12-150) السابقة في ملف جديد. يمكننا استخدام اسم الحامل G لتنفيذ هذه الأنماط الجديدة. الآن بعد نسخ الرمز الذي تريد إعادة تسميته كل مثيل فئة تنتهي في -ا إلى -ز, لأن هذه هي الطريقة التي سيتعرف بها jQuery Mobile على الأساليب التي يجب استخدامها.
أود أن أبدأ بإعادة تصميم شريط الرأس bg لمحاكاة تدرج iOS الأكثر دراية. هذا يمكن القيام به فقط داخل .واجهة المستخدم بار-ز محدد. نريد تحرير خصائص الخلفية وصورة الخلفية لتغيير تأثيرات التدرج اللوني. تحقق من الكود أدناه وشاشة عرض التدرج الجديد.
.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /؛ الحدود اليسرى: 0px ؛ الحدود اليمنى: 0px ؛ الخلفية: # 6d83a1 ؛ اللون: #fff / * a-bar-colour * /؛ وزن الخط: غامق ؛ text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957؛ صورة الخلفية: - التدرج اللوني على الويب (الخطي ، 0٪ 0٪ ، 0٪ 100٪ ، من (# b4bfce) ، توقف اللون (0.5 ، # 899cb3) ، توقف الألوان (0.505 ، # 7e94b0) ، إلى (# 6d83a1))؛ خلفية الصورة: -تدرج-خطي-التدرج (أعلى ، # b4bfce ، # 899cb3 50٪ ، # 7e94b0 52٪ ، # 6d83a1) ؛ / * Chrome 10+، Saf5.1 + * / background-image: -moz-linear-gradient (top، # b4bfce، # 899cb3 50٪، # 7e94b0 52٪، # 6d83a1)؛ / * FF3.6 * / background-image: -ms-linear-gradient (top، # b4bfce، # 899cb3 50٪، # 7e94b0 52٪، # 6d83a1)؛ / * IE10 * / background-image: -o-linear-gradient (top، # b4bfce، # 899cb3 50٪، # 7e94b0 52٪، # 6d83a1)؛ / * Opera 11.10+ * / / background-image: gradient-gradient (top، # b4bfce، # 899cb3 50٪، # 7e94b0 52٪، # 6d83a1)؛
أنا أستخدم نظام اللون الأزرق الموجود في معظم تطبيقات iOS الافتراضية. يتم تعيين خلفيتي في البداية على لون صلب للأجهزة التي لا يمكنها تقديم تدرجات CSS3. بعد ذلك ، أستخدم توقفات الألوان حول علامة 50٪ لإعادة إنشاء التأثير اللامع التقليدي على طراز Apple. وأيضًا داخل المُحدد نفسه ، قمت بتعديل ظل النص قليلاً مع لون ونطاق أكثر دقة.
أزرار وتأثيرات النص
من المهم عند أخذ عينات الترميز في الاعتبار على وجه التحديد ما هي مناطق الواجهة التي تحتاج إلى عناية. يبدو شريط الرأس رائعًا مع هذه الخلفية الجديدة ، ولكن التعديل الأخير الذي أرغب في إجراؤه سيطابق أنماط الأزرار الأقرب إلى تطبيقات iOS.
.ui-btn-up-g border: 1px solid # 375073؛ الخلفية: # 4a6c9b ؛ وزن الخط: غامق ؛ اللون: # ff؛ text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d؛ مربع الظل: لا شيء ؛ -webkit-box-الظل: لا شيء ؛ الظل مربع الظل: لا شيء ؛ خلفية الصورة: - التدرج اللوني على الويب (الخطي ، 0٪ 0٪ ، 0٪ 100٪ ، من (# 89a0be) ، توقف اللون (0.5 ، # 5877a2) ، توقف الألوان (0.505 ، # 476999) ، إلى (# 4a6c9b))؛ خلفية الصورة: -تدرج-خطي-التدرج (أعلى ، # 89a0be ، # 5877a2 50٪ ، # 476999 52٪ ، # 4a6c9b) ؛ / * Chrome 10+، Saf5.1 + * / background-image: -moz-linear-gradient (top، # 89a0be، # 5877a2 50٪، # 476999 52٪، # 4a6c9b)؛ / * FF3.6 * / background-image: -ms-linear-gradient (top، # 89a0be، # 5877a2 50٪، # 476999 52٪، # 4a6c9b)؛ / * IE10 * / background-image: -o-linear-gradient (top، # 89a0be، # 5877a2 50٪، # 476999 52٪، # 4a6c9b)؛ / * Opera 11.10+ * / / background-image: gradient-linear (top، # 89a0be، # 5877a2 50٪، # 476999 52٪، # 4a6c9b)؛ دائرة نصف قطرها الحدود: 4px ؛ -Wkkit-border-radius: 4px؛ -Moz-border-radius: 4px ؛ .ui-btn-up-g .ui-btn-inner، .ui-btn-hover-g .ui-btn-inner، .ui-btn-down-g .ui-btn-inner border-radius: 0؛ -Webkit-border-radius: 0؛ -Moz-border-radius: 0؛ .ui-btn-hover-g border: 1px solid # 1b49a5؛ الخلفية: # 2463de. وزن الخط: غامق ؛ اللون: # ff؛ text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d؛ مربع الظل: لا شيء ؛ -webkit-box-الظل: لا شيء ؛ الظل مربع الظل: لا شيء ؛ خلفية الصورة: - التدرج اللوني على الويب (الخطي ، 0٪ 0٪ ، 0٪ 100٪ ، من (# 779be9) ، توقف الألوان (0.5 ، # 376fe0) ، توقف الألوان (0.505 ، # 2260dd) ، إلى (# 2463de))؛ خلفية الصورة: -تدرج-خطي-التدرج (أعلى ، # 779be9 ، # 376fe0 50 ٪ ، # 2260dd 52 ٪ ، # 2463de) ؛ / * Chrome 10+، Saf5.1 + * / / background-image: -moz-linear-gradient (top، # 779be9، # 376fe0 50٪، # 2260dd 52٪، # 2463de)؛ / * FF3.6 * / background-image: -ms-linear-gradient (top، # 779be9، # 376fe0 50٪، # 2260dd 52٪، # 2463de)؛ / * IE10 * / background-image: -o-linear-gradient (top، # 779be9، # 376fe0 50٪، # 2260dd 52٪، # 2463de)؛ / * Opera 11.10+ * / / background-image: gradient-linear (top، # 779be9، # 376fe0 50٪، # 2260dd 52٪، # 2463de)؛ دائرة نصف قطرها الحدود: 4px ؛ -Wkkit-border-radius: 4px؛ -Moz-border-radius: 4px ؛
تقع منطقة الشفرة التي نقوم بتحريرها الآن ضمن فئات أزرار واجهة المستخدم. هناك 3 طرق مختلفة للقلق مع: .BTN-واجهة المستخدم ما يصل ز, .BTN-UI-تحوم-ز, و .BTN-واجهة المستخدم لأسفل-ز. أركز في الغالب على التأثيرات القياسية (btn-up) و hover (btn-hover) من خلال تحرير الظل المربع والتدرجات الخطية. كما قمت بتوسيع تأثير الزوايا الدائرية بحيث تظهر الأزرار أكثر مستطيلة.
لهذا السبب ، أحتاج إلى إزالة دائرة نصف قطرها الحدود الداخلية من فئة بعنوان .BTN-واجهة المستخدم الداخلي. يتم إرفاق هذه الفئة بعنصر span داخل كل رابط ربط في شريط الرأس. بدون إعادة تعيين خصائص نصف قطر الحدود ، ستلاحظ وجود ثغرات صغيرة في التصميم كلما مررت بالماوس فوق زر. بينما تقضي وقتًا أطول في الترميز في سمات jQuery Mobile ، ستحفظ هذه الفروق الدقيقة للمشاريع المستقبلية.
مقدمة ل ThemeRoller
إذا كنت تستمتع بتسخير يديك ، فأنا أوصي بشدة بالالتزام بالتحريرات المخصصة. ليس فقط لديك المزيد من التحكم ولكن من الأسهل بكثير تصحيح المشكلات داخل CSS إذا قمت بإجراء جميع التعديلات بنفسك. لكن بالنسبة للعديد من المصممين ، هذه العملية مرهقة وستستغرق ببساطة وقتًا أطول من اللازم. لحسن الحظ ، أصدر فريق jQuery Mobile محررًا عبر الإنترنت تحت اسم ThemeRoller.
من هذه الصفحة يمكنك الوصول إلى تحرير أول 3 حوامل A-C أو حتى إنشاء واحدة خاصة بك. إذا نظرت إلى الشريط الجانبي الأيسر ، يمكنك التبديل بين هذه الإعدادات الثلاثة أو إجراء تغييرات بسرعة على خيارات السمات العامة. وتشمل هذه خصائص CSS مثل حدود نصف القطر أو ظلال المربع أو خطوط الصفحة الافتراضية. لاحظ عند تحديد أي من العينات المضبوطة مسبقًا أنه يمكننا تحرير نفس المناطق كما كان من قبل - الأشرطة العلوية / السفلية ، ومحتوى الجسم ، وحالات الزر الثلاثة.
لكن الميزة المفضلة لدي هي الوصول المباشر إلى حوامل Adobe Kuler. يمكنك بالفعل إنشاء أنظمة ألوان قليلة داخل حساب Kuler الخاص بك واستيرادها إلى ThemeRoller. تدعم الواجهة وظيفة السحب والإفلات ، لذلك من السهل تجربة بعض الأفكار المختلفة في غضون دقائق.
في النهاية ، لا توجد طريقة مطلقة لبناء حوامل jQM بشكل صحيح. يفضل بعض المصممين تشفير CSS الثابت بينما يحب الآخرون تطبيق الويب ThemeRoller البديهي. طالما كنت تتبع بنية الفصل الدراسي ، يجب أن تحصل على نفس النتائج في كلتا الحالتين.
موارد مفيدة
- موبايل مسج موبايل - الوثائق
- استخدام وتخصيص سمات jQuery Mobile
