jQuery Toolbar mobile

éléments de barre d'outils habituellement situés dans la tête et la queue - rendent la navigation un accès facile à:

Head Bar

colonne Head contient généralement la page titre / logo ou un ou deux boutons (généralement la page d'accueil, ou une option de recherche).

Vous pouvez ajouter des boutons sur le côté gauche ou à droite de la tête.

Le code suivant va ajouter un bouton à la gauche de la tête du texte du titre, ajouter un bouton à droite de la tête du texte du titre:

Le code suivant va ajouter un bouton à la gauche de la tête du texte du titre:

Toutefois, si vous mettez le lien de bouton est placé après les <h1> élément ne sera pas en mesure d'afficher le texte à droite. Pour ajouter un bouton à droite de la tête du titre, indiquez la classe comme "ui-btn-right":

	En-tête peut contenir un ou deux boutons, la queue sans limitation.

barre de queue

Plus souple que la barre d'en-tête de colonne arrière - tout au long de leurs pages les plus fonctionnelles et la variabilité, il peut contenir autant de boutons:

Note: La queue et la tête style différent (pas de remplissage et de l' espace, et le bouton est pas centré). Nous pouvons utiliser un modèle simple pour résoudre ce problème:

Vous pouvez également utiliser le bouton dans les combinaisons horizontales ou verticales arrière:

Positionnement de la barre de barre tête et la queue

Tête et la queue peuvent être positionnés de trois façons:

• Inline - par défaut. United bar d'en-tête intérieure et bar et contenu de la page arrière.
• Fixe - bar tête et la queue barre fixe vers le haut et en bas de la page.
• Fullscreen - Mode de positionnement fixe est essentiellement le même avec la barre tête et la queue barre fixe vers le haut et le bas de la page. Mais quand il était hors de l'écran lors du défilement de la barre d'outils ne sera pas affiché à nouveau automatiquement, à moins de toucher l'écran, l'image ou la catégorie vidéo a été soulevée dans le sens de l'application est très utile. Notez que cette barre d'outils en mode portera sur le contenu de la page, il est donc préférable d'utiliser lors d'occasions spéciales.

Utilisation de la propriété des données position pour localiser la barre tête et la queue bar:

Pour permettre un positionnement en mode plein écran, utilisez la position de données = "fixe", et ajoutez l'attribut de données-fullscreen à l'élément:

Astuce: Full ciblage applique à des photos, des images et des vidéos.

Astuce: positionnement fixe et le ciblage en plein écran en cliquant sur l'écran va afficher et masquer la tête de la colonne et la barre de queue.

D'autres exemples

Sur la barre d' outils affiche des icônes seulement
Sur la barre d'outils affiche des icônes que vous pouvez utiliser la classe ui-btn-icon-notext.