-->

domingo, 12 de mayo de 2019

63.- Usar Temas en las paginas (JQuery Mobile)

jQuery Mobile proporciona dos temas de estilo diferentes, "a" y "b", cada uno con diferentes colores para botones, barras, bloques de contenido, etc.

Para personalizar el aspecto de su aplicación, use el atributo de tema de datos y asigne el atributo con una letra.

<div data-role="page" data-theme="a|b">

Value Description
aTexto CustomBlack sobre un fondo gris claro para el contenido de la página

Texto negro sobre un fondo gris para encabezados y pies de página

Texto negro sobre un fondo gris claro para botones

Texto blanco sobre fondo azul para botones activos.

Texto azul en enlaces

Texto gris claro (marcador de posición) o texto negro (valor) sobre un fondo blanco para los campos de entrada
b Texto blanco sobre un fondo gris oscuro para el contenido de la página.

Texto blanco sobre un fondo gris oscuro para encabezados y pies de página

Texto blanco sobre un fondo de carbón para botones

Texto blanco sobre un fondo azul "cian" para botones activos

Texto azul "cian" en los enlaces.

Texto gris (marcador de posición) o texto blanco (valor) sobre un fondo negro para los campos de entrada
Para los botones con clase = "ui-btn", use la clase "ui-btn-a | b" para diseñar el botón gris (predeterminado) o negro:
<a href="#" class="ui-btn ui-btn-a|b">Button</a>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 <div data-role="page" id="pageone" data-theme="a">
  <div data-role="header">
   <h1>Encabezado</h1>
  </div>

   <div data-role="main" class="ui-content">
   <p>Algo de textot..</p>
   <a href="#">A Standard Text Link</a>
   <a href="#" class="ui-btn">Link Button</a>
   <p>A List View:</p>
   <ul data-role="listview" data-autodividers="true" data-inset="true">
    <li><a href="#">Adele</a></li>
    <li><a href="#">Billy</a></li>
   </ul>
   <label for="fullname">Input Field:</label>
   <input type="text" name="fullname" id="fullname" placeholder="Name..">
   <label for="switch">Toggle Switch:</label>
   <select name="switch" id="switch" data-role="slider">
    <option value="on">On</option>
    <option value="off" selected>Off</option>
   </select>
  </div>
  
  <div data-role="footer">
   <h1>Pie de pagina</h1>
  </div>
</div>


</body>
</html>

Resultado

Cambiando el tema a "b"

<div data-role="page" id="pageone" data-theme="b">

 Resultado:


Nota: El tema "a" se usa para la mayoría de los elementos, y los elementos secundarios a menudo heredan el tema de su padre (o página).

Configurando Tema al Encabezado y pie de pagina



 <div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

 Resultado:
Configurando Tema a botones

 <a href="#" class="ui-btn ui-btn-b">Black Button</a>

 Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>

 <div data-role="page" id="pageone">
  <div data-role="header">
   <h1>Insert Page Title Here</h1>
  </div>

   <div data-role="main" class="ui-content">
   <p>Normal Buttons:</p>
   <a href="#" class="ui-btn">Gray Button (default)</a>
   <a href="#" class="ui-btn ui-btn-b">Black Button</a>
   <br>
   <p>Inline Buttons:</p>
   <a href="#" class="ui-btn ui-btn-inline">Gray Button (default)</a>
   <a href="#" class="ui-btn ui-btn-inline ui-btn-b">Black Button</a>
  </div>
  
  <div data-role="footer">
   <h1>Insert Footer Text Here</h1>
  </div>
 </div>

</body>
</html>
Resultado:

Configurando Tema a Iconos
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>

 <div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
   <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a>
   <a href="#" class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a>
  </div>
 </div>

</body>
</html>
Resultado:

Nota: verificar que esta configurado no mostar texto usando ui-btn-icon-notext

 Configurando Tema a Popups

 Ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>

 <div data-role="page">
  <div data-role="header">
   <h1>Welcome To My Homepage</h1>
  </div>

   <div data-role="main" class="ui-content">
   <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all">Show Popup</a>
   <div data-role="popup" id="myPopup" class="ui-content" data-theme="b">
    <a href="#" data-rel="back" class="ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
    <p>I am a themed popup!.</p>
    <p>I have a close button at the top right corner.</p>
    <p><b>Tip:</b> You can also click outside to close me.</p>
   </div>
  </div>

   <div data-role="footer">
   <h1>Footer Text</h1>
  </div>
 </div>

</body>
</html>

 Resultado
 Al hacer Click

 Configurando Tema a botones dentro de Header y footer

 Ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>

 <div data-role="page">
  <div data-role="header">
   <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
   <h1>Welcome To My Homepage</h1>
   <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a>
  </div>

   <div data-role="main" class="ui-content">
   <p>The buttons are for demonstration purposes only, and will not have any effect.</p>
  </div>

   <div data-role="footer" style="text-align:center;">
   <div data-role="controlgroup" data-type="horizontal">
     <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
     <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
     <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
   </div>
  </div>
 </div>
</body>
</html>
Resultado:

Para agregar temas a los diferentes elementos agregar las siguientes clases:

 Agregando Tema barras de Navegación

Ejemplo


<div data-role="footer" data-theme="b">
  <h1>Insert Footer Text Here</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
      <li><a href="#" data-icon="arrow-r">Button 2</a></li>
      <li><a href="#" data-icon="arrow-r">Button 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
    </ul>
  </div>
</div>
Agregando Tema a paneles

Ejemplo


<div data-role="panel" id="myPanel" data-theme="b">
Agregando Tema a boton y Contenido desplegable

Ejemplo


<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>
Agregando Tema a listas

Ejemplo


<ul data-role="listview" data-theme="b">
  <li><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
</ul>
Agregando Tema a botones divididos

Ejemplo


<ul data-role="listview" data-split-theme="b">
Agregando Tema a listas desplegables

Ejemplo


<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>
Agregando Tema a formularios

Ejemplo


<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">

<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
Agregando Tema a formularios desplegables

Ejemplo


<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>
Añadir nuevos temas
jQuery Mobile también te permite agregar nuevos temas a tus páginas móviles.

Agrega o edita nuevos temas editando el archivo CSS (si has descargado jQuery Mobile). Simplemente copie un bloque de estilos y cambie el nombre de las clases con un nombre de letra (cz), y ajuste los colores y las fuentes como desee.


También puede agregar nuevos estilos usando clases de tema en el documento HTML: agregue la clase "ui-bar- (az)" para las barras de herramientas, "ui-body- (az)" para el contenido y ui-page-theme- ( az) "para la página.

Ejemplo

<style>
.ui-bar-f {
    color: red;
    background-color: yellow;
}

.ui-body-f {
    font-weight: bold;
    color: white;
    background-color: purple;
}

.ui-page-theme-f {
    font-weight: bold;
    background-color: green;
}
</style>
Ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: rgb(59, 2, 2);
background-color: rgb(219, 186, 219);
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
</head>
<body>

 <div data-role="page" data-theme="f">
  <div data-role="header" data-theme="f">
   <h1>Formularios Colapsables</h1>
  </div>

   <div data-role="main" class="ui-content ui-body-f">
   <form method="post" action="demoform.asp">
    <fieldset data-role="collapsible">
     <legend>Click me - para desplegarme!</legend>
     <label for="name">Nombre completo:</label>
     <input type="text" name="text" id="name">
     <p>Color favorito:</p>
     <div data-role="controlgroup">
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue">
     </div>
     <input type="submit" data-inline="true" value="Submit">
    </fieldset>
   </form>
  </div>

 </div>

</body>
</html>

 Resultado:
Nota: 

En versiones anteriores de jQuery Mobile, JavaScript se usaba para manejar cómo un elemento debía heredar el tema principal. A partir de 1.4, el marco se centra en mejorar el rendimiento y JavaScript ha sido reemplazado por CSS puro. 

El equipo de jQuery Mobile ha creado una herramienta que te ayuda a crear tu propio tema personalizado: el ThemeRoller . También puede usar esta herramienta para actualizar temas anteriores para que sean compatibles con la nueva versión.


Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)