Skip to main content

49 Cursos de JQuery – Jquery-mobile


Tutorial #49 del curso de Jquery, en este tutorial veremos como añadir botones al header y al footer de una página en jquery-mobile, además de personalizar el los botones del footer.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JQuery - Mobile - botones header y footer</title>
    <link href="jquery-mobile/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>

    <div data-role="page" id="pagina1">

      <div data-role="header">
        <h2>Botones</h2>
        <a href="">botón</a>
        <a href="">botón 2</a>
      </div>
      <div data-role="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis suscipit, modi nemo, harum quasi officiis assumenda mollitia deserunt iusto illo, veniam quas voluptas pariatur culpa labore autem perferendis sit ullam!</p>
      </div>

      <div data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
        <a href="" data-icon="delete">Salir</a>
        <a href="">Mensaje</a>
        <a href="" data-icon="plus">Nuevo</a>
        </div>
      </div>

    </div>

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
  </body>
</html>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.