APP DESIGN

-

Een menubalk

Voor snelle navigatie is het belangrijk om in je app een menubalk te hebben. We laten een manier zien.

De opsomming pagina twee enz. is hier overbodig. We selecteren het en verwijderen het.

Let op!!! HTML verwijderen in een app is levensgevaarlijk. Als je een tag teveel verwijdert doet de navigatie het vaak niet meer. Sla je bestand altijd eerst op voordat je wat weggooit!!!

Ga naar het jquery-mobiel tabblad

kies voor jquery mobile knop

Stel het aantal knoppen in en kies voor horizontaal of verticaal. Je kunt ook nog een pictogram invoegen.

Het ziet er vervolgens zo uit:

In live-view

Vervolgens moet je in de html de hyperlinks gaan invullen:

Achter de # komt de verwijzing, bijvoorbeed #page of #page2. De naam van de knop stel je in door "knop" te wijzigen in bijvoorbeeld "home", "pagina2" enz.

Alternatief

Natuurlijk kan het ook anders door gebruikt te maken van HTML5 en jquery.

Plak onderstaande code in je pagina, in de div "content"

<div data-role="navbar">
<ul>
<li><a href="#page" class="ui-btn-active ui-state-persist">home</a></li>
<li><a href="#page2">pagina 2</a></li>
<li><a href="#page3">pagina 3</a></li>
<li><a href="#page4">pagina 4</a></li>
</ul>
</div>

Dit geeft het volgende resultaat:

vb2

 

Een heleboel van dit soort codes zijn hier terug te vinden.

CSS

De CSS die we de afgelopen tijd geleerd hebben kun je onverkort toepassen op je app.

In het midden zetten

Als je de menubalk in het midden wilt zetten kun je kiezen voor een id of een klasse.

1. id

de code voor de menubalk:

<div data-role="navbar">
<ul>
<li><a href="#page" class="ui-btn-active ui-state-persist">home</a></li>
<li><a href="#page2">pagina 2</a></li>
<li><a href="#page3">pagina 3</a></li>
<li><a href="#page4">pagina 4</a></li>
</ul>
</div>

je geeft de div het id "menu"

<div id = "menu" data-role="navbar">

vervolgens in css:

#menu {
width: 50%;
margin-right: auto;
margin-left: auto;
border-radius: 15px;
background-color: #F00;
}

2. Klasse

.menu {
width: 50%;
margin-right: auto;
margin-left: auto;
border-radius: 15px;
background-color: #F00;
}

Effecten

Je kunt een groot aantal effecten bereiken door toevoegingen in de code

<div data-role="navbar">
<ul>
<li><a href="#page" data-transition = "flip" class="ui-btn-active ui-state-persist">home</a></li>
<li><a href="#page2" data-transition = "fade">pagina 2</a></li>
<li><a href="#page3" data-transition = "slidedown">pagina 3</a></li>
<li><a href="#page4">pagina 4</a></li>
</ul>
</div>

Klasses

Als je drukt op de klasse knop dan zie je dat er een heleboel klasses te kiezen zijn. Deze worden verzorgd door jquery

 

Er zijn zowel mogelijkheden voor effecten, als voor kleuren. Je kunt deze toepassen op de elementen van je app.

 

Opdracht:

1. Voer bovenstaande handelingen uit op iedere pagina van je app en controleer in de browser of het allemaal klopt.

2. Pas een aantal classes toe op de elementen van je app.

Je hebt nu een app die bestaat uit 4 pagina's met op iedere pagina een menubalk.

 

 

 

 

 

 

 

©jw webdesign