Latest web development tutorials

مسج شريط أدوات موبايل

عناصر شريط الأدوات الموجود عادة في الرأس والذيل - جعل الملاحة سهولة الوصول إلى:



رئيس نقابة

عمود رأس يحتوي عادة على صفحة العنوان / شعار أو واحد أو اثنين من الأزرار (عادة في الصفحة الرئيسية، أو خيار البحث).

يمكنك إضافة أزرار إلى الجانب الأيسر أو الأيمن من الرأس.

سوف التعليمة البرمجية التالية إضافة زر إلى اليسار من الرأس من نص العنوان، إضافة زر على يمين رئيس عنوان النص:

أمثلة

<div-دور البيانات = "رأس">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left"> الرئيسية </A>
<H1> مرحبا بكم في صفحتي الرئيسية </ H1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left"> البحث </A>
</ div>

محاولة »

سوف التعليمة البرمجية التالية إضافة زر إلى اليسار من رئيس عنوان النص:

أمثلة

<div-دور البيانات = "رأس">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left"> الرئيسية </A>
<H1> مرحبا بكم في صفحتي الرئيسية </ H1>
</ div>

محاولة »

ومع ذلك، إذا كنت وضعت وضعت وصلة زر بعد <h1> تحليل عنصر لن تكون قادرة على عرض النص إلى اليمين. لإضافة زر على يمين رئيس العنوان، تحديد فئة باسم "BTN اجهة المستخدم اليمين":

أمثلة

<div-دور البيانات = "رأس">
<H1> مرحبا بكم في صفحتي الرئيسية </ H1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left"> البحث </A>
</ div>

محاولة »

مصباح رأس قد تحتوي على واحد أو اثنين من الأزرار، والذيل سبيل المثال لا الحصر.


شريط الذيل

أكثر مرونة من شريط رأس العمود الخلفي - في جميع أنحاء صفحاتها أكثر وظيفية وتقلبه، ويمكن أن تحتوي على العديد من الأزرار:

أمثلة

<div-دور البيانات = "تذييل">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> اتبعني في الفيسبوك </A>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> لي على متابعة التغريد </A>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> لي على متابعة إينستاجرام </A>
</ div>

محاولة »

ملاحظة: الذيل والرأس نمط مختلف (لا الحشو والفضاء، وليس يتركز على زر). يمكننا استخدام نمط بسيط لحل هذه المشكلة:

أمثلة

<div-دور البيانات = "تذييل" على غرار = "مواءمة النصوص: مركز؛">

محاولة »

يمكنك أيضا استخدام زر في مجموعات أفقية أو عمودية الخلفية:

أمثلة

<div-دور البيانات = "تذييل" على غرار = "مواءمة النصوص: مركز؛">
<div-دور البيانات = "controlgroup " من نوع البيانات = "أفقي">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> اتبعني في الفيسبوك </A>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> لي على متابعة التغريد </A>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> لي على متابعة إينستاجرام </A>
</ div>
</ div>

محاولة »

تحديد المواقع شريط شريط الرأس والذيل

الرأس والذيل يمكن وضعه في ثلاث طرق:

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

استخدام خاصية موقف البيانات لتحديد شريط الرأس والذيل شريط:

المواقع المضمنة (الافتراضي)

<div data-role="header" data-position="inline" ></div>
<div data-role="footer" data-position="inline" ></div>

محاولة »

وضع ثابت

<div data-role="header" data-position="fixed" ></div>
<div data-role="footer" data-position="fixed" ></div>

محاولة »

لتمكين وضع ملء الشاشة، استخدم موقف البيانات = "ثابت"، وإضافة سمة البيانات ملء الشاشة إلى العنصر:

ملء الموقع

<div data-role="header" data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true" ></div>

محاولة »

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

نصيحة: المواقع الثابتة والتي تستهدف ملء الشاشة من خلال النقر على الشاشة سيتم عرض وإخفاء رأس العمود وبار الذيل.


أمثلة

مزيد من الأمثلة

على الرموز يعرض شريط الأدوات فقط
على يعرض شريط الرموز فقط يمكنك استخدام فئة BTN اجهة المستخدم-رمز-notext.