¿Diferencia entre jQuery y jQuery Mobile?

92

Soy nuevo en el desarrollo web móvil y acabo de crear una aplicación móvil con PhoneGap, empleando el uso frecuente de jQuery.

Pero naturalmente hubo un par de fallas relacionadas con la forma en que formateé las cosas y la forma en que realmente aparecían en las pantallas de los dispositivos móviles con las que estaba probando, y al tratar de resolverlas, me encontré con muchas sugerencias para facilitarme las cosas al usar jQuery móvil.

Ahora, esto me confunde: jQuery no tenía rollos en el formato. Ese fue solo mi conocimiento de nivel principiante de CSS móvil lo que causó los problemas.

Entonces, ¿qué hace exactamente jQuery mobile y en qué se diferencia de jQuery ordinario? Si ya conozco jQuery, ¿qué va a ser nuevo para mí?

jquery jquery-mobile nombre_usuario_temporal
fuente
2
"No podía creer que nadie me hubiera preguntado esto antes". En realidad lo hicieron: stackoverflow.com/q/6636388/368167
Tamer Shlash
¿Qué es el CSS móvil?
Legends

Respuestas:

94

jQuery está diseñado exclusivamente para simplificar y estandarizar las secuencias de comandos en todos los navegadores. Se enfoca en cosas de bajo nivel: crear elementos, manipular el DOM, administrar atributos, realizar solicitudes HTTP, etc.

jQueryUI es un conjunto de componentes y características de la interfaz de usuario construido sobre jQuery (es decir, necesita jQuery para funcionar): botones, cuadros de diálogo, controles deslizantes, pestañas, animaciones más avanzadas, funcionalidad de arrastrar / soltar.

jQuery y jQueryUI están diseñados para ser 'agregados' a su sitio (escritorio o móvil) - si desea agregar una característica en particular, jQuery o jQueryUI podrían ayudarlo.

jQuery Mobile , sin embargo, es un marco completo. Está destinado a ser su punto de partida para un sitio móvil. Requiere jQuery y utiliza funciones de jQuery y jQueryUI para proporcionar componentes de interfaz de usuario y funciones de API para crear sitios compatibles con dispositivos móviles. Aún puede usar tanto o tan poco como desee, pero jQuery Mobile puede controlar toda la ventana gráfica de una manera compatible con dispositivos móviles si lo permite.

Otra diferencia importante es que jQuery y jQueryUI apuntan a ser una capa encima de su HTML y CSS. Debería poder dejar su marcado solo y mejorarlo con jQuery. Sin embargo, jQuery Mobile proporciona formas de definir dónde desea que aparezcan los componentes utilizando solo HTML, por ejemplo (desde el sitio de jQuery Mobile):

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

El data-roleatributo le dice a jQuery Mobile que convierta esta lista en un componente de interfaz de usuario compatible con dispositivos móviles y los atributos data-insety data-filterestablecen las propiedades de eso, sin escribir una sola línea de JavaScript. Los componentes jQueryUI, por otro lado, normalmente se crean escribiendo unas pocas líneas de JavaScript para instanciar el componente en el DOM.

Stu Cox
fuente
Como alguien que acaba de 'pasar' de jQuery + UI en sitios web basados ​​en navegador para comprender jQuery Mobile para dispositivos móviles, debo decir que estoy luchando por ver cómo esta respuesta en particular ha recibido 41 votos a favor pero NO comentarios. Señala específicamente en su impulso principal que, a diferencia de jQueryUI que está "construido sobre jQuery", jQuery Mobile es "sin embargo, un marco completo". Esto está totalmente en desacuerdo con las otras respuestas a continuación, que establecen (con bastante precisión, ¡creo!) Que jQuery Mobile también requiere que jQuery se ejecute, y aumenta mi confusión personal sobre qué .js y .css necesito.
Andy Lorenz
3
Lo siento, tienes razón, no dejé en claro que jQuery Mobile también requiere jQuery, lo actualizaré. Aunque tenga en cuenta que mi respuesta no está realmente diseñada para decirle cómo comenzar a usar jQuery Mobile (esa no es la pregunta original), solo para brindar una descripción general amplia de las diferencias conceptuales.
Stu Cox
cosas geniales Stu, gracias por modificar tu respuesta, que ahora tiene mucho más sentido. Es posible que se sorprenda de lo difícil que es para los 'novatos de jquery mobile' comenzar, ¡incluso el sitio web de jquerymobile no lo hace obvio! Eso en sí mismo conduce a otro punto confuso: ¿qué versión de jquery requiere jquerymobile? En el momento de escribir este artículo, jquerymobile.com solo implica que 1.4.2 es compatible con jQuery 1.8 - 1.10 / 2.0, ¡pero no puedo encontrar ningún lugar donde las versiones y las dependencias js / css se indiquen específicamente!
Andy Lorenz
28

Que es jQuery mobile

JQM (jQuery mobile) es un sistema de interfaz de usuario para teléfonos móviles que se basa en jQuery. jQuery es necesario para que JQM funcione. A diferencia de otros marcos de telefonía móvil similares, JQM tiene como objetivo el soporte para todas las principales plataformas móviles, tabletas, lectores electrónicos y de escritorio, y no solo los navegadores webkit móviles. Una de las características más notables del marco es el sistema de navegación Ajax que usa transiciones de página animadas (muy bueno).

¿Qué puede ser nuevo para ti?

Una cosa sobre JQM que lanza una bola curva a los nuevos usuarios es la navegación ajax. Viniendo de jquery, probablemente esté acostumbrado a incluir su javascript en cada página y luego usar dom ready ( $(function(){ ... }o $(document).ready(function(){ .... }) para activar todas sus divertidas actividades de javascript. Pero debido a que JQM usa la navegación ajax, el sistema colocará otras páginas en el mismo dominio que la primera página y no cargará sus scripts contenidos en <head>. Cuando la página siguiente se cargue a través de ajax, notará que sus cosas internas $(function(){ ...}no funcionarán en la segunda página. La solución a esto es vinculante para el evento pageinit. Estos siguientes ejemplos lo ayudarán al comienzo de su viaje:

$(document).on('pageinit', function(){ // this fires for each new page

});

Para apuntar a una determinada página, agrega la identificación de la página:

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

Comprender los eventos de la nueva página lo ayudará mucho al comenzar con JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html ¡ Buena suerte!

codaniel
fuente
5

jQuery es un marco de JavaScript AJAX que manipula / atraviesa DOM. Abstrae gran parte de la complejidad entre los diferentes navegadores automáticamente. Hay innumerables complementos de jQuery que simplifican muchas tareas.

jQuery Mobile es un marco de interfaz de usuario orientado a aplicaciones móviles que se basa en jQuery. Tiene componentes temáticos y de interfaz de usuario.

En total, son complementarios. No tiene que usar jQuery Mobile para usar jQuery. Pero para usar jQuery Mobile, debe usar jQuery.

Daniel A. White
fuente
Entonces, ¿podría decir que jQuery Mobilees la versión móvil de jQuery UI?
Jeff Hines
@JeffHines - algo. son bases de código diferentes, pero logran objetivos similares de diferentes maneras.
Daniel A. White
Excelentes comentarios, Daniel A. White. No tiene que usar jQuery Mobile para usar jQuery. Pero para usar jQuery Mobile, debe usar jQuery.
user3174782
Ahora se está trabajando en una versión alfa. jquerymobile.com/changelog/1.5.0-alpha1
Jackson Ng
2

No tengo suficientes puntos para comentar arriba, así que agregue al hilo para responder la segunda pregunta de Andy sobre dependencias.

Creo que lo que estás buscando está aquí: jQuery Mobile Demo

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

<body>
    ...content goes here...
</body>
</html>
TransitDataHead
fuente