-->

viernes, 31 de mayo de 2019

65.- Touch (JQuery Mobile)

Los eventos táctiles se activan cuando el usuario toca la pantalla (página).

 Los eventos táctiles también funcionan en computadoras de escritorio: ¡ toca y desliza con el mouse!.

jQuery Mobile Tap


El evento tap se dispara cuando el usuario toca un elemento.

El siguiente ejemplo dice: Cuando un evento de tap se dispara en un elemento <p>; ocultar el elemento <p> actual:


$("p").on("tap",function(){
  $(this).hide();
});


jQuery Mobile Taphold


El evento taphold se activa cuando el usuario toca un elemento y lo mantiene presionado durante un segundo:



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>
<script>
$(document).on("pagecreate","#pageone",function(){
   $("p").on("taphold",function(){
   $(this).hide();
  });
});
</script>

</head>

<body>
 <div data-role="page" id="pageone">
  <div data-role="header">
   <h1>El tap Event</h1>
  </div>

   <div data-role="main" class="ui-content">
   <p>Si me tocas y mantienes presionado por un segundo, Desaparezco.</p>
   <p>Tocame y presioname por un segundo!</p>
   <p>a mi tambien!</p>
  </div>

   <div data-role="footer">
   <h1>Pie de pagina</h1>
  </div>
 </div>



</body>
</html>

Resultado:

Al presionar por un segundo el primer párrafo


jQuery Mobile Swipe

El evento de deslizamiento se activa cuando el usuario mueve un elemento horizontalmente más de 30px:

$("p").on("swipe",function(){
  $("span").text("Swipe detected!");
});

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>

<script>

$(document).on("pagecreate","#pageone",function(){
   $("p").on("swipe",function(){
   $("span").text("Swipe detected!. Arrastraste horizontalmente");
  });
});

 </script>

</head>
<body>


 <div data-role="page" id="pageone">
  <div data-role="header">
   <h1>El Swipe Event</h1>
  </div>

  <div data-role="main" class="ui-content">
   <p>Arrastra este texto horizontalmente o arrastra en la caja.</p>
   <p style="border:1px solid black;height:200px;width:200px;"></p>
   <p><span style="color:red"></span></p>
  </div>

  <div data-role="footer">
   <h1>Pie de pagina</h1>
  </div>
 </div>


</body>
</html>

Resultado:

Al intentar arrastrar en el cuadro:



jQuery Mobile Swipeleft

El evento swipeleft se activa cuando el usuario desliza sobre un elemento en la dirección izquierda más de 30px:

Ejemplo

$("p").on("swipeleft",function(){
  alert("You swiped left!");
});

Swiperight móvil jQuery

El evento Swiperight se activa cuando el usuario arrastra un elemento a la derecha en más de 30px:

Ejemplo

$("p").on("swiperight",function(){
  alert("You swiped right!");
});

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>

<script>

$(document).on("pagecreate","#pageone",function(){

 $("p").on(
   "swipeleft",function(){
   alert("Arrastraste a la izquierda!");
  });

 $("p").on(
   "swiperight",function(){
   alert("Arrastraste a la derecha!");
  });

});

</script>

</head>
<body>


 <div data-role="page" id="pageone">
  <div data-role="header">
   <h1>El Evento Swipe izq y derecho</h1>
  </div>

   <div data-role="main" class="ui-content">
   <p>Arrastra este texto horizontalmente o arrastra en la caja.</p>
   <p style="border:1px solid black;height:200px;width:200px;"></p>
   <p><span style="color:red"></span></p>
  </div>

   <div data-role="footer">
   <h1>Pie de pagina</h1>
  </div>
 </div>


</body>
</html>

Resultado:






Publicado por en No hay comentarios:
Etiquetas:

64.- Eventos (JQuery Mobile)

Eventos = Son todas las diferentes acciones de los visitantes a las que puede responder una página web.
Puedes usar cualquier evento estándar de jQuery en jQuery Mobile.
Además, jQuery Mobile también ofrece varios eventos que están hechos a medida para la navegación móvil:
  • Eventos táctiles: se activan cuando un usuario toca la pantalla (toca y desliza)
  • Eventos de desplazamiento: se activa cuando un usuario se desplaza hacia arriba y hacia abajo
  • Eventos de orientación: se activan cuando el dispositivo gira vertical u horizontalmente
  • Eventos de página: se activan cuando una página se muestra, oculta, crea, carga y / o descarga

Inicializando eventos móviles de jQuery


En jQuery, aprendió a usar el evento de documento ready para evitar que se ejecute cualquier código de jQuery antes de que el documento termine de cargarse.


Evento de jQuery document ready

<script>
$(document).ready(function(){

   // jQuery methods go here...
});
</script>

Sin embargo, en jQuery Mobile, usamos el evento pagecreate, que ocurre cuando la página se ha creado en el DOM, pero antes de que se complete la carga.


jQuery Mobile pagecreate event

<script>
$(document).on("pagecreate","#pageone",function(){

    // jQuery events go here...

 });
</script>

Nota: el método jQuery on () se utiliza para adjuntar controladores de eventos.

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>

<script>
 $(document).on("pagecreate","#pageone",function(){
   $("p").on("tap",function(){
   $(this).hide();
  });
 });
</script>

</head>
<body>


 <div data-role="page" id="pageone">
  <div data-role="header">
   <h1>El tap Event</h1>
  </div>

   <div data-role="main" class="ui-content">
   <p>Si me tocas, Desaparezco!!.</p>
   <p>Tocame tambien!</p>
   <p>Tocame!</p>
  </div>

   <div data-role="footer">
   <h1>Pie de pagina</h1>
  </div>
 </div>


</body>
</html>

Resultado:

 Al tocar la primera linea




Publicado por en No hay comentarios:
Etiquetas:

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:
Suscribirse a: Entradas (Atom)