مسج أشرطة الأدوات موبايل
وكثيرا ما وضعت شريط ادوات عناصر داخل الرؤوس والتذييلات - ل "سهولة الوصول" الملاحة:
البارات رأس
يقع الرأس في الجزء العلوي من الصفحة، وعادة ما تحتوي على صفحة العنوان / شعار أو واحد أو اثنين من الأزرار (عادة المنزل، خيارات أو البحث).
يمكنك إضافة أزرار إلى اليسار و / أو إلى الجانب الأيمن في الرأس.
رمز أدناه، سوف تضيف زر "الوطن" إلى اليسار و "بحث" زر على يمين عنوان النص الرأس:
مثال
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> انها محاولة لنفسك » سوف التعليمة البرمجية التالية فقط إضافة زر إلى الجانب الأيسر من عنوان الرأس:
مثال
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> انها محاولة لنفسك » سوف التعليمة البرمجية التالية فقط إضافة زر إلى الجانب الأيمن من العنوان الرأس:
مثال
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> انها محاولة لنفسك » ورأس يمكن أن تحتوي على واحد أو اثنين من الأزرار، في حين أن تذييل ليس له حد.
البارات تذييل
يقع تذييل الصفحة في أسفل الصفحة.
تذييل أكثر مرونة من رأس - هو أكثر وظيفية وللتغيير خلال الصفحات، وبالتالي يمكن أن تحتوي على العديد من الأزرار حسب الحاجة:
مثال
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> انها محاولة لنفسك » نصيحة: لا يتم توسيط أزرار في تذييل افتراضيا. لحل هذه المشكلة، ببساطة استخدام CSS:
يمكنك أيضا أزرار المجموعة في تذييل أفقيا أو عموديا:
مثال
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> انها محاولة لنفسك » وضع الرؤوس والتذييلات
رأس وتذييل يمكن وضعه في ثلاث طرق:
- Inline - افتراضي. الرؤوس والتذييلات هي مضمنة مع محتوى الصفحة
- Fixed - الرؤوس والتذييلات سيبقى وضع في أعلى وأسفل الصفحة
- Fullscreen - يتصرف وكأنه ثابت. ستبقى الرؤوس والتذييلات وضعه في أعلى وأسفل، ولكن أيضا على محتوى الصفحة. بل هو أيضا انظر من خلال قليلا
استخدام السمة موقف البيانات لوضع الرؤوس والتذييلات:
مضمنة الوظيفة (افتراضي)
<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> انها محاولة لنفسك » نصيحة: إن موقف ملء الشاشة مثالية لالتقاط الصور، والصور وأشرطة الفيديو.
نصيحة: سوف التنصت على الشاشة إخفاء ورؤوس المعرض والتذييلات لكل من مواقع ثابتة وملء الشاشة.
المزيد من الأمثلة
عرض فقط رمز في أشرطة الأدوات
باستخدام ui-btn-icon-notext فئة لعرض فقط رمز في أزرار رأس وتذييل الصفحة.