تصميم تطبيقات الجوال / بناء الملاحة مع jQuery

الهواتف الذكية مجهزة الآن ببعض متصفحات الويب الفعالة للغاية. جافا سكريبت أقوى من أي وقت مضى ، ويمكن تمديدها بمساعدة مكتبات الأكواد مثل jQuery. عندما تضيف أحدث مواصفات HTML5 / CSS3 ، فمن الممكن إنشاء تطبيقات ويب للجوال سريعة للغاية مع بعض التعليمات البرمجية الأساسية للواجهة الأمامية.

سأوضح في هذا البرنامج التعليمي كيف يمكنك إنشاء موقع ويب / تطبيق ويب مستند إلى الهاتف المحمول. سنستخدم استعلامات وسائط CSS3 لاستهداف أجهزة محددة ودقة الشاشة. بالإضافة إلى القليل من jQuery يساعد على تنشيط القائمة وتحميل محتوى الصفحة الخارجي باستخدام مكالمات Ajax. والأفضل من ذلك ، أن التخطيط يمكن توسيعه لعرضه بشكل صحيح في متصفحات سطح المكتب العادية مثل Chrome أو Firefox.

• عرض حي
• مصدر الرمز

تحديد هيكل الصفحة

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

X-UA-متوافق يستخدم لوصف كيفية عرض المستند في مستعرضات معينة. إنه سيناريو مثير للاهتمام عند الترميز في HTML5 ، لذلك لا داعي للقلق بشأن هذا. ومع ذلك الفوقية العرض العلامة مهمة جدا. يقوم بتعيين نافذة متصفح الجوال إلى 100٪ بدلاً من تأثير التكبير القياسي.

من الممكن أيضًا تعطيل التكبير / التصغير المستخدم مع قيمة المحتوى المستخدم تحجيم = لا. ولكن في هذه الحالة ، نريد فقط تعيين عرض ملء الشاشة ليكون هو نفسه عرض الجهاز الخاص بنا. تسمح علامات تطبيق الويب من Apple بحفظ موقع الويب كرمز للشاشة الرئيسية لجهاز iPhone أو iPod Touch. ليس من الضروري تماما ولكن بالتأكيد يستحق وجود.

محتوى الجسم الداخلي

داخل علامة الجسم ، قمت بإعداد div المجمع باستخدام المعرف #W. في الداخل ، قسمت التصميم إلى قسمين آخرين باستخدام المعرفات #pagebody و #navmenu. يقتصر عرض الصفحة بأكملها على 640 بكسل حسب الاختيار بحيث يتم تغيير حجم المخطط إلى رقم محدد.

 
  
هونج كونج موبايل
 
 
 
مرحبا بكم في موقع الجوال!
 
 
 
 
 
روابط القائمة
 
 
 
الصفحة الرئيسية
 
معلومات عنا
 
يعلن
 
اكتب لنا
 
جهات الاتصال
 
سياسة خاصة
 
 
 

يتم إعطاء قائمة التنقل قيمة فهرس z منخفضة #pagebody هو دائما في القمة. هذا أمر بالغ الأهمية لأن شفرة JavaScript ستنقل فوق نص الصفحة عددًا معينًا من البكسلات لتكشف عن التنقل أسفلها.

لقد استخدمت رمز التجزئة (#) أمام كل صفحة .html لإيقاف بعض السلوك السيئ في Safari للجوال. كلما نقرت فوق رابط ، يظهر شريط URL ويدفع المحتوى لأسفل. ولكن عند الرجوع إلى المعرف ، لا يتم إعادة تحميل أي شيء إلا من خلال مكالمات JavaScript.

المغلق المواقع

لا يوجد الكثير من المحتوى المربك داخل كود CSS الخاص بنا. تتم معظم المواقع يدويًا ثم يتم معالجتها من خلال مسج. ولكن هناك بعض القطع المثيرة للاهتمام في وثيقتنا.

/ **group core body ** / #w #pagebody position: نسبي؛ اليسار: 0 ؛ أقصى عرض: 640 بكسل ؛ دقيقة العرض: 320 بكسل ؛ مؤشر z: 99999 ؛  #w #navmenu background: # 475566؛ الارتفاع: 100 ٪ ؛ العرض محجوب؛ الموقف: ثابت. العرض: 300 بكسل ؛ اليسار: 0 بكسل ؛ أعلى: 0 بكسل ؛ مؤشر z: 0 ؛ 

يحدد هذا الجزء العلوي الأنماط لكلا القسمين من الصفحة. يبلغ عرض قائمة التنقل 300 بكسل فقط ، مما يترك مجالًا كبيرًا حتى يظل محتوى الصفحة مرئيًا. يقع زر فتح / إغلاق القائمة مباشرة على الجانب الأيسر ويمكن الوصول إليه دائمًا. القطعة المهمة هنا هي قيمة خاصية z-index واستخدامها الموقف: ثابت. على navmenu لدينا.

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

/ **group header ** / #w # pagebody header # toolbarnav display: block؛ الموقف: ثابت. اليسار: 0 بكسل ؛ أعلى: 0 بكسل ؛ مؤشر z: 9999 ؛ الخلفية: # 0b1851 url ('img / tabbar-solid-bg.png') أعلى اليسار بلا تكرار؛ دائرة نصف قطرها الحدود: 5px ؛ -Moz-border-radius: 5px ؛ -Wkkit-border-radius: 5px ؛ نصف قطرها: 5 بكسل ؛ الحد الأدنى السفلي نصف القطر الأيمن: 0؛ -Moz-border-radius-bottomright: 0؛ -wkkit-border-bottom-right-radius: 0؛ الحدود السفلية اليسرى نصف القطر: 0؛ -Moz-border-radius-bottomleft: 0؛ -wkkit-border-bottom-left-radius: 0؛ الارتفاع: 44 بكسل ؛ العرض: 100 ٪ ؛ أقصى عرض: 640 بكسل ؛  #w #pagebody header # toolbarnav h1 text-align: center؛ الحشو أعلى: 10px. الحشوة اليمنى: 40 بكسل ؛ اللون: # e6e8f2 ؛ وزن الخط: غامق ؛ حجم الخط: 2.1em ؛ text-shadow: 1px 1px 0px # 313131؛ 

قواعد المحمول

من السهل ملاحظة أنني أستخدم أيضًا صورة خلفية لملمس شريط الرأس الأزرق. يبلغ حجمها 640 × 44 بكسل لتتناسب مع بنية التخطيط المتناسقة. لكنني قمت أيضًا بتطوير صورة @ 2x لشاشات شبكية العين لجهاز iPhone / iPad. يمكنك رؤية كل من الصور أدناه ، أو الحصول عليها من شفرة المصدر التجريبي.

• System/demo/img/[email protected]
• System/demo/img/[email protected]

أقوم بإعداد CSS للجوال لهذه الوظيفة في ملف آخر باسم responsive.css. أنه يحتوي على استعلامات وسائط اثنين والتي تحل محل شريط العنوان bg وأيقونة زر القائمة لأجهزة شبكية العين.

/ ** شاشة شبكية العين ** / شاشةmia فقط و (-Webkit-min-device-pixel-ratio: 2) ، فقط الشاشة و (min - moz-device-pixel-ratio: 1.5) ، الشاشة فقط و ( min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') أعلى اليسار بلا تكرار؛ حجم الخلفية: 640 بكسل × 44 بكسل ؛  #w #pagebody header # menu-btn background: url ('img/[email protected] ') no-repeat؛ حجم الخلفية: 53 بكسل × 30 بكسل ؛ 

تصميم القائمة السهام

في منطقة التنقل ، قمت أيضًا بتضمين رمز سهم صغير على الجانب الأيمن من كل ارتباط قائمة. يمكن استبدال هذا بسهولة مع صورة من أي عمل فني مشترك. ولكن معظم عشاق CSS3 سوف يحبون اختبار هذه الطريقة.

#w #navmenu ul li a :: after content: "؛ display: block ؛ العرض: 6px ؛ الارتفاع: 6px ؛ الحد الأيمن: 3px solid # d0d0d8 ؛ الحد العلوي: 3px solid # d0d0d8؛ position: absolute؛ right : 30 بكسل ؛ أعلى: 45٪ ؛ - تحويل النص الإلكتروني: تدوير (45deg) ؛ - تحويل - موز: تدوير (45deg) ؛ - تحويل -: تدوير (45deg) ؛ تحويل: تدوير (45deg) ؛ #w #navmenu ul li a: hover :: after border-colour: # cad0e6؛

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

ولكن الآن دعنا ننتقل إلى أجزاء وأجزاء شفرة JavaScript. تذكر أن هذا يتطلب تضمينًا في مكتبة jQuery لكي يعمل الرمز الخاص بي بشكل صحيح.

مسج الرسوم المتحركة

في كتابة هذه الرموز المخصصة ، قمت بإنشاء مستند جديد يحمل الاسم script.js. لا تتردد في كتابة هذه مباشرة في > العلامات ، أو قم بتنزيل مثالي من التعليمات البرمجية المصدر التجريبي.

$ (document) .ready (function () var pagebody = $ ("# pagebody") ؛ var themenu = $ ("# navmenu") ؛ var topbar = $ ("# toolbarnav") ؛ var content = $ (" #content ") ؛ var viewport = width: $ (window) .width () ، الارتفاع: $ (window) .height () ؛ // استرداد المتغيرات كـ // viewport.width / viewport.height 

function openme () $ (function () topbar.animate (left: "290px" ، المدة: 300 ، قائمة الانتظار: false) ؛ pagebody.animate (left: "290px" ، المدة: 300 ، قائمة الانتظار: خطأ) ؛) ؛  دالة closeme () var closeme = $ (function () topbar.animate (left: "0px"، المدة: 180 ، قائمة الانتظار: false) ؛ pagebody.animate (left: "0px"، المدة: 180 ، قائمة الانتظار: خطأ) ؛) ؛ 

// تحميل محتوى الصفحة للتنقل $ ("a.navlink"). live ("انقر" ، الدالة (e) e.preventDefault () ؛ var linkurl = $ (this) .attr ("href") ؛ var linkhtmlurl = linkurl.substring (1 ، linkurl.length) ؛ var imgloader = ''؛ 

اقترب مني()؛ $ (function () topbar.css ("top"، "0px")؛ window.scrollTo (0، 1)؛)؛

content.html (imgloader)؛ setTimeout (function () content.load (linkhtmlurl، function () / * no callback * /)، 1200)؛