Un menu a tab con jQuery Mobile

Mattepuffo's logo
Un menu a tab con jQuery Mobile

Un menu a tab con jQuery Mobile

Programmazione, Javascript - AJAX

jQuery Mobile id default no nprevede componenti per creare menu a tab (al contrario ad esempio di Sencha Touch).

E' possibile, però, facilmente ovviare al problema.

Supponiamo di avere due pagine e di voler mettere il menu in basso e in maniera fissa.

 

Il tutto sta nel aggiungere una lista nel footer ed impostare al footer la posizione fissa:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link type="text/css" rel="stylesheet" href="css/photoswipe.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/style_collection.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div data-role="page" id="home" data-theme="a"><!-- HOME -->
<div data-role="content">
<h1>HOME</h1>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#adv">Advertising</a></li>
</ul>
</div>
</div>
</div><!-- END HOME -->

<div data-role="page" id="adv" data-theme="a"><!-- ADV -->
<div data-role="content">

ADVERTISING

</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#adv">Advertising</a></li>
</ul>
</div>
</div>

</div><!-- END ADV -->

Abbiamo due pagine con footer fisso (data-position="fixed").

Dentro abbiamo un div con data-role navbar con dentro una lista.

Così abbiamo il nostro menu a tab.

Ovviamente possiamo mettere altre impostazioni come le icone oltre al titolo del link.

JQM ha già un bel set di icone predefenite, ma ovviamente possiamo anche cambiarle e metterne di personali.

Ovviamente possiamo anche decidere di mettere il meni nell'header se lo vogliamo in alto.

Qui potete la documentazione abbastanza completa.

Condividi

Commentami!