jQuery Mobile Panel

Mattepuffo's logo
jQuery Mobile Panel

jQuery Mobile Panel

Programmazione, Javascript - AJAX

Era da un bel pò che non usavo jQuery Mobile (che avevo sostituito con Sencha Touch) e sono rimasto sorpeso delle novità che trovato l'altra settimana.

Sia in termini di grafica, che di componenti migliorati / nuovi.

Uno di questi è il Panel, un componente che è nascosto di default e che si attiva al click su un bottone / link.

Oggi vediamo un semplice esempio; prima di tutto includiamo ciò che ci serve:

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Io ho preso tutto direttamente dal web.

Dopo di che costruiamo una pagina di prova:

    <body>
        <div data-role="page">

            <div data-role="header" data-position="fixed">
                <a href="#menu_panel" data-icon="bars" data-iconpos="notext">Menu</a>
                <h1>JQM Panel</h1>
            </div>

            <div data-role="content">    
                CONTENUTO
            </div>

            <div data-role="panel" data-position-fixed="true" data-theme="a" data-display="overlay" id="menu_panel">
                <ul data-role="listview" data-theme="a" class="nav-search">
                    <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#panel-fixed-page2">Voce 1</a></li>
                    <li><a href="#panel-fixed-page2">Voce 2</a></li>
                </ul>
            </div>

        </div>
    </body>

Come vedete abbiamo una pagina con un header e un link.

Sotto abbiamo il contenuto, e poi il panel che di default è nascosto.

Il link punta proprio a questo div; dentro al panel possiamo metterci quello che vogliamo.

Se guardate, la prima voce contiente un link con data-rel="close"; questo si occupa di chiudere il panel.

Per visualizzarlo abbiamo tre modalità:

  • overlay (quello che ho usato nell'esempio)
  • reveal
  • push (dovrebbe essere quello di default se non specificato)

Gli ultimi, in verità, sono motlo simili.

Questo è il funzionamento di base; spulciatevi le API per vedere tutto ciò che è possibile fare in più!

Ciao!

Condividi

Commentami!