stringtranslate.com

jQuery Móvil

jQuery Mobile es un framework web optimizado para dispositivos táctiles (también conocido como framework móvil), específicamente una biblioteca JavaScript , desarrollada por el equipo del proyecto jQuery . El desarrollo se centra en la creación de un framework compatible con muchos teléfonos inteligentes y tabletas , [3] necesario debido al creciente pero heterogéneo mercado de tabletas y teléfonos inteligentes. [4] El framework jQuery Mobile es compatible con otros frameworks de aplicaciones móviles [5] y plataformas como PhoneGap , Worklight, [6] etc.

A partir del 7 de octubre de 2021, jQuery Mobile ha quedado obsoleto. [7]

Características

(Fuente: del sitio web de jQuery Mobile) [3]

Ejemplo de uso

$ ( 'div' ). on ( 'tap' , function ( evento ){ alert ( 'elemento tocado ' ); });  
$ ( documento ). ready ( función (){ $ ( '. myList li' ). on ( 'haga clic en touchstart' , función () { $ ( '. myDiv' ). slideDown ( '500' ); }); });

Un ejemplo básico

Lo que sigue es un proyecto básico de jQuery Mobile que utiliza elementos semánticos HTML5 . Es importante vincular a las bibliotecas de JavaScript de jQuery y jQuery Mobile, y a la hoja de estilo (los archivos se pueden descargar y alojar localmente, pero se recomienda vincular a los archivos alojados en la CDN de jQuery ).

Una pantalla del proyecto se define mediante un sectionelemento HTML5, y data-roleof page. Tenga en cuenta que data-rolees un ejemplo del dataatributo HTML5, en este caso definido por jQuery Mobile. Una página puede tener elementos headery con of y , respectivamente. Entre ellos, puede haber un elemento, con un of y un of . Por último, puede estar presente un elemento, con of .footerdata-roleheaderfooterarticlerolemainclassui-contentnavdata-rolenavbar

Un documento HTML puede contener más de un sectionelemento y, por lo tanto, más de una pantalla de contenido . De esta manera, solo es necesario cargar un archivo que incluye varias páginas de contenido. Una página puede vincularse a otra página dentro del mismo archivo haciendo referencia al atributo id de la página (por ejemplo, href="#second").

En el ejemplo siguiente, se utilizan otros dos atributos de datos. El data-themeatributo le indica al navegador qué tema debe mostrar. El data-add-back-btnatributo agrega un botón Atrás a la página si se configura en true.

Por último, se pueden agregar íconos a los elementos a través del data-iconatributo. jQuery Mobile tiene cincuenta íconos de uso común incorporados.

Una breve explicación de los atributos de datos utilizados en este ejemplo:

data-role – Especifica la función del elemento, como encabezado, contenido, pie de página, etc.

data-theme – Especifica qué tema de diseño se utilizará para los elementos dentro de un contenedor. Puede configurarse como a o b.

data-position – Especifica si el elemento debe ser fijo, en cuyo caso se representará en la parte superior (para el encabezado) o inferior (para el pie de página).

data-transition – Especifica una de las diez animaciones integradas para usar al cargar páginas nuevas.

data-icon : especifica uno de los cincuenta íconos integrados que se pueden agregar a un elemento.

<!doctype html> < html >  < head > < meta  charset = "utf-8" > < title > Ejemplo de jQuery Mobile </ title > < meta  name = "viewport"  content = "initial-scale=1, user-scalable=no, width=device-width" > < link  rel = "stylesheet"  href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" >  </ head >  < body >  < section  data-role = "page"  id = "first"  data-theme = "a" >  < header  data-role = "header"  data-position = "fixed" >  < h1 > Encabezado de página 1 </ h1 >  </ header >  < article  role = "main"  class = "ui-content" >  < h2 > ¡Hola, mundo! </ h2 >  < a  href = "#second"  data-role = "button"  data-inline = "true"  data-transition = "flow"  data-icon = "carat-r"  data-iconpos = "right" > Ir a la página 2 </ a >  </ article >  < footer  data-role = "footer"  data-position = "fixed" >  < h4 > Pie de página de la página 1 </ h4 >  </ footer >  </ section >  < sección  data-role = "página"  id = "segundo"  data-theme = "b" >  < encabezado  data-role = "encabezado"  data-position = "fijo"  data-add-back-btn = "verdadero" >  < h1 > Encabezado de la página 2 </ h1 >  </ header >  < article  role = "main"  class = "ui-content" >  < h2 > Página de ejemplo </ h2 >  </ article >  < footer  data-role = "pie de página"  data-position = "fijo" >  < h4 > Pie de página de la página 2 </ h4 >  </ footer >  </ section > < script  src = "https://code.jquery.com/jquery-1.11.1.min.js" ></ script > < script  src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></ script >  </ body > </ html >

Tematización

jQuery Mobile ofrece un marco de temas que permite a los desarrolladores personalizar los esquemas de color y ciertos aspectos CSS de las funciones de la interfaz de usuario. Los desarrolladores pueden utilizar la aplicación jQuery Mobile ThemeRoller [8] para personalizar estas apariencias y crear experiencias de marca. Después de desarrollar un tema en la aplicación ThemeRoller, los programadores pueden descargar un archivo CSS personalizado e incluirlo en su proyecto para utilizar su tema personalizado. [9]

Cada tema puede contener hasta 26 "muestras" de color únicas, cada una de las cuales consta de una barra de encabezado, un cuerpo de contenido y estados de botones. La combinación de diferentes muestras permite a los desarrolladores crear una gama más amplia de efectos visuales de la que podrían lograr con una sola muestra por tema. Cambiar entre diferentes muestras dentro de un tema es tan simple como agregar un atributo llamado "data-theme" a los elementos HTML.

El tema predeterminado de jQuery Mobile viene con dos muestras de color diferentes, denominadas "a" y "b". A continuación, se muestra un ejemplo de cómo crear una barra de herramientas con la muestra "b":

< div  data-role = "header"  data-theme = "b" >  < h1 > Título de la página </ h1 >  </ div >

(Fuente: del sitio web de jQuery Mobile) [3]

Ya existen varios temas de estilo de código abierto desarrollados y respaldados por organizaciones de terceros. Uno de estos temas de estilo de código abierto es el tema de estilo Metro, desarrollado y publicado por Microsoft Open Technologies, Inc. [10] El tema de estilo Metro está pensado para imitar la interfaz de usuario de Metro (lenguaje de diseño) que Microsoft utiliza en sus sistemas operativos móviles.

Compatibilidad con navegadores móviles

Llave:

(Fuente: del sitio web de jQuery Mobile) [3]

Historial de versiones

Véase también

Referencias

  1. ^ jQuery Foundation - jquerymobile.com (16 de octubre de 2010). "jQuery Mobile Alpha 1 Released". blog.jquerymobile.com . Consultado el 22 de mayo de 2014 .
  2. ^ jQuery Foundation - jquery.org (10 de septiembre de 2012). "Cambios en la licencia de jQuery". Blog.jquery.com . Consultado el 9 de octubre de 2013 .
  3. ^ abcd "Compatibilidad con navegadores móviles graduados".
  4. ^ "El auge global del teléfono inteligente". Archivado desde el original el 17 de junio de 2018. Consultado el 27 de abril de 2011 .
  5. ^ "Razones por las que jQuery Mobile es adecuado para el desarrollo de aplicaciones web móviles".
  6. ^ "IBM Worklight - Estados Unidos". Worklight.com . Consultado el 9 de octubre de 2013 .
  7. ^ "Los encargados del mantenimiento de jQuery continúan con la iniciativa de modernización con la descontinuación de jQuery Mobile". Blog de jQuery . Consultado el 6 de diciembre de 2022 .
  8. ^ "Rodillo temático".
  9. ^ "Descripción general de los temas móviles de JQuery".
  10. ^ "Más novedades de MS Open Tech: anunciamos el tema de código abierto estilo Metro para jQuery Mobile". Archivado desde el original el 16 de agosto de 2014.

Lectura adicional

Enlaces externos