WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Toolbars


jQuery Mobile Toolbars

Toolbar components are regularly put inside headers and footers - for "easy-access" navigation:


Header Bars

The header is situated at the highest point of the page and more often than not contain a page title/logo or a couple of catches (normally home, choices or search).

You can add catches to one side as well as to the correct side in the header.

The code beneath, will include a "Home" catch to one side and a "Search" catch to one side of the header title text:

Example

<div information role="header">
  <a href="#" class="ui-btn ui-symbol home ui-btn-symbol left">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn ui-symbol look ui-btn-symbol left">Search</a>
</div>
Try it yourself »

The following code will just add a catch to one side of the header title:

Example

<div information role="header">
  <a href="#" class="ui-btn ui-btn-left ui-symbol home ui-btn-symbol left">Home</a>
  <h1>Welcome To My Homepage</h1>
</div>
Try it yourself »

The following code will just add a catch to the correct side of the header title:

Example

<div information role="header">
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn ui-btn-right ui-symbol home ui-btn-symbol left">Search</a>
</div>

Footer Bars

The footer is situated at the base of the page.

The footer is more adaptable than the header - it is increasingly useful and alterable all through pages, and can in this manner contain the same number of catches as needed:

Example

<div information role="footer">
  <a href="#" class="ui-btn ui-symbol in addition to ui-btn-symbol left">Add Me On Facebook</a>
  <a href="#" class="ui-btn ui-symbol in addition to ui-btn-symbol left">Add Me On Twitter</a>
  <a href="#" class="ui-btn ui-symbol in addition to ui-btn-symbol left">Add Me On Instagram</a>
</div>
Try it yourself »

Tip: The catches in the footer are not focused as a matter of course. To fix this, basically use CSS:

Example

<div information role="footer" style="text-align:center;">
Try it yourself »

You can likewise amass catches in the footer on a level plane or vertically:

Example

<div information role="footer" style="text-align:center;">
  <div data-role="controlgroup" information type="horizontal">
    <a href="#" class="ui-btn ui-symbol in addition to ui-btn-symbol left">Add Me On Facebook</a>
    <a href="#" class="ui-btn ui-symbol in addition to ui-btn-symbol left">Add Me On Twitter</a>
    <a href="#" class="ui-btn ui-symbol in addition to ui-btn-symbol left">Add Me On Instagram</a>
  </div>
</div>
Try it yourself »

Positioning Headers and Footers

The header and the footer can be situated in three ways:

  • Inline - Default. Headers and footers are inline with the page content
  • Fixed - Headers and footers will remain situated at the best and base of the page
  • Fullscreen - Behaves like fixed; headers and footers will remain situated at the best and base, yet additionally over the page content. It is moreover marginally observe through

Use the information position ascribe to position your headers and footers:

Inline Position (Default)

<div information role="header" data-position="inline"></div>
<div information role="footer" data-position="inline"></div>
Try it yourself »

Fixed Position

<div information role="header" data-position="fixed"></div>
<div information role="footer" data-position="fixed"></div>
Try it yourself »

To empower the fullscreen position, use information position="fixed" and add the information fullscreen ascribe to the element:

Fullscreen Position

<div information role="header" information position="fixed" data-fullscreen="true"></div>
<div information role="footer" information position="fixed" data-fullscreen="true"></div>
Try it yourself »

Tip: The fullscreen position is perfect for photographs, pictures and videos.

Tip: Tapping the screen will stow away and show headers and footers for both fixed and fullscreen positions.