• Header 1
• Header 2
• Header 3
• Header 4
• Header 5
• Header 6
• Header 7

Personnaliser le header avec jQuery Mobile

Utilisez :
data-back-btn-text="previous"
data-icon="arrow-l" ou data-icon="arrow-r"

Personnaliser le header avec jQuery Mobile

Utilisez :
data-back-btn-text="previous"
data-icon="arrow-l" ou data-icon="arrow-r"
data-theme="b" et choisissez les thèmes de "a" à "e"

Personnaliser le header avec jQuery Mobile

Utilisez :
data-icon="delete" ou data-icon="check"

Personnaliser le header avec jQuery Mobile

Utilisez :
data-icon="gear"
class="ui-btn-right" lorsque vous souhaitez un bouton placé à droite et aucun à gauche
data-theme="e"

Personnaliser le header avec jQuery Mobile

Utilisez :
data-role="button" pour obtenir un bouton simple

Personnaliser le header avec jQuery Mobile

Repérez dans le fichier jquery.mobile-1.3.0.css :
le style .ui-bar-a et modifiez la valeur du background-image

Possibilité de créer un header personnalisé sans que celui-ci s'applique aux autres en ajoutant une class : .ui-bar-a.persoHeader puis en modifiant les propriétés CSS et en appliquant le CSS dans le HTML.

Simplifiez-vous la vie ! Accédez à un générateur de dégradé CSS

Personnaliser le header avec jQuery Mobile

Ajoutez dans le fichier jquery.mobile-1.3.0.css :
.ui-bar-a.persoHeaderOk{ border: none; color:#FC0; text-shadow:none; background:url(../images/body-header.png) left top repeat; position:fixed; width:100%; height:40px; } .accueil h2{ margin-top:40px; }

Simplifiez-vous la vie ! Accédez à un générateur de dégradé CSS