CSMJU jQuery Mobile

เมนู
ถัดไป ก่อนหน้า

3.2 Toolbars

     e. Fixed toolbars

1 Fixed toolbars Basic

   เบราว์เซอร์ที่รองรับการ fix ตำแหน่งของ css ที่ใช้ plugin "fixedtoolbar" จะ fixส่วน header หรือ footer ส่วนเบราว์เซอร์ที่ไม่รองรับการfixตำแหน่ง toolbar จะเลื่อนไปตามตำแหน่งที่เลื่อน หากต้องการใช้งานเพียงแค่ เพิ่ม attribute ที่ชื่อว่า data-position="fixed" ลงในส่วนที่ต้องการ

ตัวอย่างโค้ด :Fixed Header / Fixed Header.html


<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

ตัวอย่างโค้ด :Fixed Footer / Fixed Footer.html


<div data-role="footer" data-position="fixed">
           	<h1>Fixed Footer!</h1>
</div>

Fullscreen Toolbars

   ถ้ามีการเปิดใช้งานแบบ Fullscreen เมื่อมีการสัมผัสหน้าจอจะไม่กลับไปเป็น static positioning แถบเครื่องมือนี้เหมาะสำหรับapps ที่แสดงภาพหรือวิดีโอที่ต้องการให้แสดงผลเต็มหน้าจอ หากต้องการใช้แถบเครื่องมือเพียงเพิ่ม attribute ที่ชื่อว่า data-fullscreen ลงในส่วนที่ต้องการ

ตัวอย่างโค้ด :Fullscreen Toolbars / Fullscreen Toolbars.html


<div data-role="header" data-position="fixed" data-fullscreen="true">
           	<h1>Fixed Header!</h1>
</div>

And an inset list

ตัวอย่างหน้าจอ

Embedded form

ตัวอย่างหน้าจอ