Comenzar con jQuery mobile

Donec tempus urna risus
4 mayo, 2014
Color Maker
17 mayo, 2014

jquery-mobile-logo-980x300 Hoy inicio a postear respecto a HTML5 y jQuery debido a que he empezado a trabajar en algunos proyectos específicos a este tema.

Para comenzar con esto en mi Blog, no me parece mal empezar explicando algo bien básico que es iniciar un código con jQuery mobile.

Mi idea es hacer la típica pantalla que se ven hoy en los smartphones donde se puede ver la barra de título, y la posibilidad de ingresar a dos paneles, uno desde la izquierda y otro desde la derecha accionado los botones correspondientes.

Captura de pantalla de Simulador iOS 13.05.2014 14.24.52Captura de pantalla de Simulador iOS 13.05.2014 14.24.54Captura de pantalla de Simulador iOS 13.05.2014 14.24.57

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
Primero y principal, para trabajar en HTML5 y que el browser lo tome como tal, deben de agregar en primer lugar en su archivo html lo siguiente:

<!DOCTYPE html/>

Esta claro que deben descargar el jQuery mobile, e incluirlo en el proyecto mediante los tags script.

 

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="js/jquery.mobile-1.4.2.min.css" />
        <script src="js/demos/js/jquery.js"></script>
        <script src="js/jquery.mobile-1.4.2.min.js"></script>
    </head>

Por último, para generar las pantallas que arriba mostré, basta con la siguiente porción de código:

 <div data-role="page" id="mainpage">
        <div data-role="panel" id="leftpanel"  data-position="left" data-display="overlay" data-theme="a">
            <h3>Panel Inzquierdo</h3>
            Panel desplegable desde la izquierda
        </div><!-- /panel -->
        <div data-role="panel" id="rightpanel"  data-position="right" data-display="overlay" data-theme="b">
            <h3>Panel Derecho</h3>
            Panel desplegable desde la derecha
        </div><!-- /panel -->

        <div data-role="header">
            <a href="#leftpanel" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bars"> Izq</a>
            <h1>Titulo de ejemplo</h1>
            <a href="#rightpanel" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-bars"> Der</a>
        </div>
        <div data-role="main" class="ui-content">
                <h3>Contenido</h3>
                Hola Mundo!
        </div>
        
        <!-- content -->
        <!-- footer -->
        
    </div><!-- page -->

Como podrán apreciar es muy fácil, quedando solo ahora darle el contenido que les resulte a ustedes.

Les dejo el código completo del archivo html para que puedan copiar y pegar.

<!DOCTYPE html/>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="js/jquery.mobile-1.4.2.min.css" />
        <script src="js/demos/js/jquery.js"></script>
        <script src="js/jquery.mobile-1.4.2.min.js"></script>
    </head>
    
<body>
    

    <div data-role="page" id="mainpage">
        <div data-role="panel" id="leftpanel"  data-position="left" data-display="overlay" data-theme="a">
            <h3>Panel Inzquierdo</h3>
            Panel desplegable desde la izquierda
        </div><!-- /panel -->
        <div data-role="panel" id="rightpanel"  data-position="right" data-display="overlay" data-theme="b">
            <h3>Panel Derecho</h3>
            Panel desplegable desde la derecha
        </div><!-- /panel -->

        <div data-role="header">
            <a href="#leftpanel" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bars"> Izq</a>
            <h1>Titulo de ejemplo</h1>
            <a href="#rightpanel" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-bars"> Der</a>
        </div>
        <div data-role="main" class="ui-content">
                <h3>Contenido</h3>
                Hola Mundo!
        </div>
        
        <!-- content -->
        <!-- footer -->
        
    </div><!-- page -->

</body>
</html>

No dejen de comentar!

Deja un comentario