jQuery Mobile es un marco web optimizado para el tacto (también conocido como marco móvil), más específicamente una biblioteca JavaScript , desarrollada por el equipo del proyecto jQuery . El desarrollo se centra en la creación de un marco compatible con una amplia variedad de teléfonos inteligentes y tabletas , [3] que son necesarios debido al creciente pero heterogéneo mercado de tabletas y teléfonos inteligentes. [4] El marco jQuery Mobile es compatible con otros marcos de aplicaciones móviles [5] y plataformas como PhoneGap , Worklight [6] y más.
Desarrollador (es) | El equipo de jQuery |
---|---|
Versión inicial | 16 de octubre de 2010 [1] |
Lanzamiento estable | 1.4.5 / 31 de octubre de 2014 |
Versión de vista previa | 1.5.0-rc1 / 10 de septiembre de 2018 |
Repositorio | |
Escrito en | JavaScript |
Plataforma | Ver compatibilidad con navegadores móviles |
Tamaño | 351 KB / 142 KB (minificado) / 40 KB (minificado, comprimido en gzip) |
Tipo | Marco de aplicaciones móviles |
Licencia | MIT [2] |
Sitio web | jquerymobile |
Características
- Compatible con todos los principales navegadores de escritorio, así como con todas las principales plataformas móviles, incluidas Android , iOS , Windows Phone , Blackberry , WebOS , Symbian .
- Construido sobre el núcleo de jQuery, por lo que tiene una curva de aprendizaje mínima para las personas que ya están familiarizadas con la sintaxis de jQuery.
- Marco de tematización que permite la creación de temas personalizados.
- Dependencias limitadas y ligeras para optimizar la velocidad.
- La misma base de código subyacente se escalará automáticamente a cualquier pantalla.
- Configuración basada en HTML5 para diseñar páginas con un mínimo de secuencias de comandos.
- Navegación impulsada por AJAX con transiciones de página animadas que brinda la capacidad de crear URL semánticas a través de pushState.
- Widgets de interfaz de usuario optimizados al tacto y independientes de la plataforma.
(Fuente: del sitio web de jQuery Mobile) [3]
Uso de ejemplo
$ ( 'div' ). on ( 'toque' , función ( evento ) { alerta ( 'elemento tocado' ); });
$ ( documento ). ready ( function () { $ ( '.myList li' ). on ( 'click touchstart' , function () { $ ( '.myDiv' ). slideDown ( '500' ); }); });
Un ejemplo basico
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 jQuery y jQuery Mobile y a la hoja de estilo (los archivos se pueden descargar y alojar localmente, pero se recomienda vincularlos a los archivos alojados en jQuery CDN ).
Una pantalla del proyecto está definida por un section
elemento HTML5 y data-role
de page
. Tenga en cuenta que data-role
es un ejemplo del data
atributo HTML5 , en este caso definido por jQuery Mobile. Una página puede tener elementos header
y footer
con data-role
de header
y footer
, respectivamente. En el medio, puede haber un article
elemento, con un role
de main
y un class
de ui-content
. Por último, un nav
elemento, con data-role
de navbar
puede estar presente.
Un documento HTML puede contener más de un section
elemento y, por lo tanto, más de una pantalla completa de contenido . De esta forma, solo es necesario cargar un archivo que incluya varias páginas de contenido. Una página se puede vincular a otra página dentro del mismo archivo haciendo referencia al atributo de identificación de la página (por ejemplo href="#second"
).
En el siguiente ejemplo, se utilizan otros dos atributos de datos. El data-theme
atributo le dice al navegador qué tema representar. El data-add-back-btn
atributo agrega un botón de retroceso a la página si se establece en true
.
Por último, los iconos se pueden agregar a los elementos a través del data-icon
atributo. jQuery Mobile tiene incorporados cincuenta íconos de uso común.
Una breve explicación de los atributos de datos utilizados en este ejemplo:
rol de datos : especifica el rol 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. Se puede configurar en: 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 en la parte inferior (para el pie de página).
transición de datos : especifica una de las diez animaciones integradas para usar al cargar nuevas páginas.
data-icon : especifica uno de los cincuenta iconos integrados que se pueden agregar a un elemento.
< html > < cabeza >< meta charset = "utf-8" >< título > Ejemplo de jQuery Mobile título >< 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" > cabeza > < cuerpo > < sección data-role = "page" id = "first" data-theme = "a" > < header data-role = "header" data-position = "fijo" > < h1 > Encabezado de la página 1 h1 > encabezado > < article role = "main" class = "ui-content" > < h2 > ¡Hola, mundo! h2 > < Un href = "#second" de datos en roles = "botón" de datos en línea = "true" técnica de transición = "flujo" de datos-icon = "quilates-r" ficha iconpos = "right" > Ir a la Página 2 a > artículo > < pie de página data-role = "pie de página" data-position = "fijo" > < h4 > Pie de página de la página 1 h4 > pie de página > sección > < sección data-role = "page" id = "segundo" data-theme = "b" > < header data-role = "header" data-position = "fijo" data-add-back-btn = "true" > < h1 > Encabezado de la página 2 h1 > encabezado > < article role = "main" class = "ui-content" > < h2 > Página de ejemplo h2 > artículo > < pie de página data-role = "pie de página" data-position = "fijo" > < h4 > Pie de página de la página 2 h4 > pie de página > sección >< 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 > cuerpo >html >
Tematización
jQuery Mobile proporciona un marco temático que permite a los desarrolladores personalizar esquemas de color y ciertos aspectos CSS de las funciones de la interfaz de usuario. Los desarrolladores pueden usar la aplicación jQuery Mobile ThemeRoller [7] 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 usar su tema personalizado. [8]
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 crear con una sola muestra por tema. Cambiar entre diferentes muestras dentro de un tema es tan simple como agregar un atributo llamado "tema de datos" a los elementos HTML.
El tema predeterminado de jQuery Mobile viene con dos muestras de color diferentes, llamadas "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 hay un puñado de temas de estilo de código abierto que son desarrollados y respaldados por organizaciones de terceros. Uno de esos temas de estilo de código abierto es el tema de estilo Metro que fue desarrollado y lanzado por Microsoft Open Technologies, Inc. [9] El tema de estilo Metro está destinado a imitar la interfaz de usuario de Metro (lenguaje de diseño) que Microsoft usa en sus operaciones móviles. sistemas.
Soporte de navegador móvil
Plataforma | Versión | Nativo | Brecha del teléfono | Opera Mobile | mini Opera | Fennec | Ozono | Frente neto | ||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
0,9 | 8.5, 8.65 | 9.5 | 10 | 4.0 | 5,0 | 1.0 | 1,1 * | 0,9 | 4.0 | |||
iOS | v2.2.1 | A | A | |||||||||
v3.1.3, v3.2 | A | A | A | |||||||||
v4-7.0 | A | A | A | |||||||||
Symbian S60 | v3.1, v3.2 | A | A | A | A | A | C | C | ||||
v5.0 | C | C | C | A | C | A | ||||||
UIQ de Symbian | v3.0, v3.1 | C 8,65 | C | |||||||||
v3.2 | C | C | ||||||||||
Plataforma Symbian | v.3.0 | A | ||||||||||
BlackBerry OS | v4.5 | C | C | C | ||||||||
v4.6, v4.7 | C | C | C | B | ||||||||
v5.0 | B | A | C | A | ||||||||
v6.0 | A | A | A | |||||||||
Androide | v1.5, v1.6 | A | A | |||||||||
v2.1 | A | A | ||||||||||
v2.2 | A | A | A* | C* | A* | |||||||
Windows Mobile | v6.1 | C | C | C | C | B | C | B | C | |||
v6.5.1 | C | C | C | A | A | C | A | |||||
v7.0 | A | A | C | A | ||||||||
webOS | 1.4.1 | A | A | |||||||||
bada | 1.0 | A | ||||||||||
Maemo | 5,0 | B | B | C | B* | |||||||
MeeGo | 1,1 * | A* | A* | A* |
Clave:
- A - Alta calidad. Un navegador que sea capaz, como mínimo, de utilizar consultas de medios (un requisito para jQuery Mobile). Estos navegadores se probarán activamente, pero es posible que no reciban todas las capacidades de jQuery Mobile.
- B - Calidad media. Un navegador capaz que no tiene suficiente participación de mercado para justificar las pruebas diarias. Se seguirán aplicando correcciones de errores para ayudar a estos navegadores.
- C - Baja calidad. Un navegador que no es capaz de utilizar consultas de medios. No se les proporcionará ningún script de jQuery Mobile o CSS (recurriendo a HTML simple y CSS simple).
- * - Próximo navegador. Este navegador aún no se ha lanzado, pero se encuentra en pruebas alfa / beta.
(Fuente: del sitio web de jQuery Mobile) [3]
Historial de versiones
Fecha de lanzamiento | Número de versión |
---|---|
16 de octubre de 2010 | 1.0.0 Alfa 1 |
12 de noviembre de 2010 | 1.0.0 Alfa 2 |
4 de febrero de 2011 | 1.0.0 Alfa 3 |
31 de marzo de 2011 | 1.0.0 Alfa 4 |
7 de abril de 2011 | 1.0.0 Alfa 4.1 |
20 de junio de 2011 | 1.0.0 Beta 1 |
3 de agosto de 2011 | 1.0.0 Beta 2 |
8 de septiembre de 2011 | 1.0.0 Beta 3 |
29 de septiembre de 2011 | 1.0.0 RC1 |
19 de octubre de 2011 | 1.0.0 RC2 |
13 de noviembre de 2011 | 1.0.0 RC3 |
16 de noviembre de 2011 | 1.0.0 |
26 de enero de 2012 | 1.0.1 |
28 de febrero de 2012 | 1.1.0 RC1 |
6 de abril de 2012 | 1.1.0 RC2 |
13 de abril de 2012 | 1.1.0 |
28 de junio de 2012 | 1.1.1 RC1 |
12 de julio de 2012 | 1.1.1 |
1 de agosto de 2012 | 1.2.0 Alfa |
5 de septiembre de 2012 | 1.2.0 Beta |
14 de septiembre de 2012 | 1.2.0 RC1 |
21 de septiembre de 2012 | 1.2.0 RC2 |
2 de octubre de 2012 | 1.2.0 |
14 de enero de 2013 | 1.3.0 Beta |
4 de febrero de 2013 | 1.3.0 RC1 |
20 de febrero de 2013 | 1.3.0 |
19 de marzo de 2013 | 1.1.2 |
22 de Marzo de 2013 | 1.2.1 |
10 de abril de 2013 | 1.3.1 |
19 de julio de 2013 | 1.3.2 |
25 de julio de 2013 | 1.4.0 Alfa 1 |
15 de agosto de 2013 | 1.4.0 Alfa 2 |
24 de septiembre de 2013 | 1.4.0 Beta 1 |
24 de octubre de 2013 | 1.4.0 RC 1 |
23 de diciembre de 2013 | 1.4.0 |
12 de Febrero de 2014 | 1.4.1 |
28 de febrero de 2014 | 1.4.2 |
1 de julio de 2014 | 1.4.3 |
12 de septiembre de 2014 | 1.4.4 |
31 de octubre de 2014 | 1.4.5 (última versión estable) |
3 de enero de 2017 | 1.5.0-alpha.1 |
Ver también
- jQTouch
- jQuery
- Adaptación de contenido
- Estudio DaVinci
- iUI
- PhoneGap
- Tizen
- ViziApps
- Oreja
Referencias
- ^ Fundación jQuery - jquerymobile.com (16 de octubre de 2010). "Lanzamiento de jQuery Mobile Alpha 1" . blog.jquerymobile.com . Consultado el 22 de mayo de 2014 .
- ^ Fundación jQuery: jquery.org (10 de septiembre de 2012). "Cambios en la licencia de jQuery" . Blog.jquery.com . Consultado el 9 de octubre de 2013 .
- ^ a b c d "Soporte de navegador calificado móvil" .
- ^ "El ascenso global del teléfono inteligente" .
- ^ "Resons por qué jQuery Mobile es adecuado para el desarrollo de aplicaciones web móviles" .
- ^ "IBM Worklight - Estados Unidos" . Worklight.com . Consultado el 9 de octubre de 2013 .
- ^ "ThemeRoller" .
- ^ "Descripción general de la temática móvil de JQuery" .
- ^ "Más noticias de MS Open Tech: anunciando el tema de estilo Metro de código abierto para jQuery Mobile" .
Otras lecturas
- Doyle, Matt (18 de marzo de 2014). Domine las aplicaciones web móviles con jQuery Mobile (4ª ed.). Libros exaltados. pag. 567. ISBN 978-0-9873115-3-5.
- Pelletier, Jeff (25 de abril de 2013). Manual de la aplicación móvil: The Blueprint (1ª ed.). Publicación Withinsight . pag. 96. ISBN 978-0989072106.
- Bai, Giulio (23 de junio de 2011). First Look de jQuery Mobile (1ª ed.). Packt Publishing . pag. 216. ISBN 1-84951-590-5.
- Reid, Jon (7 de julio de 2011). jQuery Mobile (1ª ed.). O'Reilly Media . pag. 130 . ISBN 1-4493-0668-3.
- David, Matthew (21 de septiembre de 2011). Sitios web HTML5 para móviles: aceleración de HTML5 con jQuery Mobile, Sencha Touch y otros marcos (1ª ed.). Prensa Focal . pag. 250 . ISBN 0-240-81813-X.
- Broulik, Brad (30 de noviembre de 2011). Pro jQuery Mobile (1ª ed.). Presione . pag. 350. ISBN 1-4302-3966-2.
- Holzner, Steven E. (2 de enero de 2012). Sams Enséñate a ti mismo jQuery Mobile en 10 minutos (1ª ed.). Sams . pag. 240. ISBN 0-672-33557-3.
- Firtman, Maximiliano (31 de enero de 2012). jQuery Mobile: en funcionamiento (1ª ed.). O'Reilly Media . pag. 250. ISBN 1-4493-9765-4.
- Dutson, Phil (13 de julio de 2012). Sams Teach Yourself jQuery Mobile en 24 horas (1ª ed.). Sams . pag. 475. ISBN 0-672-33594-8.
- de Jonge, Adriaan, Dutson, Phillip (2 de noviembre de 2012). jQuery, jQuery UI y jQuery Mobile: recetas y ejemplos (1ª ed.). Addison-Wesley Professional . pag. 400. ISBN 978-0-321-82208-6.
enlaces externos
- Página web oficial
- El proyecto jQuery
- Documentación y demostración de jQuery Mobile
- jQuery Mobile Framework: escriba menos, haga más
- jQuery Mobile C # ASP.NET Por Matthew David Elgert
- PropertyCross, lo ayuda a seleccionar un marco móvil multiplataforma: jQuery Mobile