2011-12-27 8 views
56

Estoy trabajando en una aplicación web que tiene su propio aspecto. Deseo utilizar jQuery Mobile solo para el soporte de eventos táctiles.¿Cómo se usa jQuery Mobile solo para su compatibilidad con eventos táctiles (sin mejoras de UI)?

Cuando vinculo jquery.mobile.min.js (sin vincular el css), el diseño de mi página se rompe.

¿Cómo puedo configurar (inicializar) jQuery Mobile para usar solo el soporte de eventos táctiles? ¿Enlazaría los eventos en el enlace jQuery para documentos ya que no tendría ningún evento relacionado con la página JQM?

Editar

ver este ejemplo en jsFiddle: http://jsfiddle.net/redhotsly/JGgrw/. El html contiene un <button> pero jQuery Mobile creó un <span> a su izquierda. Si inspecciona el marcado resultante (F12), verá que jQuery Mobile también agregó una clase CSS a mi botón.

Editar:

Necesito una solución en la que no tendré modificar el script JQM. Necesito usar el script oficial de un CDN.

Respuesta

49

si lo que desea unirse a tocar eventos/gesto que haría uso de jGestures en su lugar:

http://jgestures.codeplex.com/

Niza jQuery plugin poco que he utilizado en los proyectos antes con una gran variedad de eventos que se unen a:

eventos disponibles:

orientationChange El dispositivo se gira hacia la derecha o hacia la izquierda. Este evento es desencadenado por el dispositivo y puede usar un giroscopio interno.

pellizco Se activa durante un gesto de pellizco (dos dedos que se alejan o se acercan).

rotar Se activa durante un gesto de rotación (dos dedos giran en sentido horario o antihorario).

swipemove Se activa durante un gesto de golpe movimiento (dedo (s) que se mueve alrededor del dispositivo, por ejemplo, arrastrando)

swipeone se activa después de un gesto de golpe movimiento con un solo punto de contacto (un dedo fue movido alrededor del dispositivo)

swipetwo se activa después de un gesto de deslizar movimiento con dos puntos de contacto (dos dedos se movían alrededor del dispositivo)

swipethree Se activa después de un gesto de deslizar movimiento con tres puntos de contacto (tres dedos se movían alrededor del dispositivo)

swipefour Se activa después de un gesto de deslizar movimiento con cuatro puntos de contacto (cuatro dedos se mueven alrededor del dispositivo)

swipeup Se activa después de un estricto hacia arriba deslizar movimiento gesto

swiperightup Se activa después de un gesto hacia la derecha y hacia arriba golpe movimiento

swiperight Se activa después de una estricta deslizar hacia la derecha movimiento gesto

swiperightdown se activa después de un aparejo * htwards y hacia abajo golpe movimiento gesto

swipedown se activa después de un estricto hacia abajo deslizar movimiento gesto

swipeleftdown Se activa después de un movimiento de deslizamiento hacia la izquierda y hacia abajo gestu re

swipeleft se activa después de un estricto deslizar hacia la izquierda movimiento gesto

swipeleftup se activa después de un golpe movimiento gesto hacia la izquierda y hacia arriba

tapone Se activa después de un solo (un dedo) gesto de tap

taptwo Se activa después de un gesto de toque doble (dos dedos)

tapthree Se activa después de un triple (tres dedos) pulse gesto

pinchopen se activa cuando un gesto pinchopen (dos dedos que se alejan el uno del otro) se produjeron y los puntos de contacto (dedos) son eliminado el dispositivo.

pinchclose se activa cuando un gesto pinchclose (dos dedos moviéndose uno hacia el otro) se produjo y los puntos de contacto (dedos) son retira el dispositivo.

rotatecw se desencadena cuando un gesto rotación en sentido horario (dos dedos de rotación en sentido horario) se produjo y los puntos de contacto (dedos) son retira el dispositivo.

rotateccw se desencadena cuando un gesto de rotación en sentido antihorario (dos dedos giratorios en sentido antihorario) ocurrió y los puntos de contacto (dedos) se retira el dispositivo.

+3

Parece que la respuesta a mi pregunta es _ "no es posible en este momento, use otra biblioteca" _. Entonces eso es lo que haré. Gracias. – Sylvain

+0

esto no funciona en las computadoras portátiles táctiles o tabletas táctiles con pantalla 1080p ... extraño :( – Sijav

+0

@Sijav Puede valer la pena informar que a los jgestures chicos :) –

13

JQM está ahora desacoplado:

Widgets: Ahora desacoplados para flexibles construye

hemos querido desvincular todos nuestros widgets de la página del plugin para un tiempo largo y estamos felices de anunciar que finalmente aterrizamos este cambio. Entonces, ¿qué significa exactamente desacoplado de todos modos? Bueno, los widgets y utilidades individuales siempre se han descompuesto en archivos de script separados . Sin embargo, el complemento de la página fue responsable de al manejar la inicialización automática de todos los complementos oficiales encontrados en el marcado en la creación de la página. Esta situación imposibilitó que eliminara los complementos que no necesita sin causar errores, y generalmente establece un mal precedente para futuras adiciones de widgets.

Ahora, casi todos los widgets de interfaz de usuario en la biblioteca de jQuery Mobile son completamente desacoplados por lo que simplemente se pueden eliminar si no se necesitan para un proyecto en particular . Este cambio le permite reducir drásticamente el tamaño de la biblioteca al incluir únicamente el conjunto específico de widgets o las características que necesita, además de los pocos archivos básicos necesarios. Mientras que todavía planea hacer más de desacoplamiento y la limpieza, los archivos siguientes están desacoplados y con seguridad se puede quitar de la marca archivo antes de hacer una estructura de encargo:

  • página de encabezado/content/pie de página
  • plegable
  • grupo control
  • fieldcontain
  • fixheaderfooter
  • botón
  • checkboxradio
  • seleccione
  • deslizador
  • TextInput
  • enlaces theming
  • vista de lista
  • barra de navegación
  • rejilla

Vamos a trabajar en un mapa dependencia porque unos pocos reproductores se basan en otros para trabajar. Por ejemplo, el complemento de marcación de botón es invocado por muchos de los widgets anteriores, por lo que solo se puede excluir, pero si no está utilizando cualquiera de los widgets que dependen de los botones.

Todavía estamos trabajando en nuestras recomendaciones para correlacionar las dependencias del complemento y desacoplar las cosas aún más. En última instancia, esto se mostrará en en una herramienta de creación de descargas, ¡así que estad atentos!

Puede dirigirse a su GIT Repo y sólo tiene que descargar lo que quiere:

+0

Gracias pero no quiero tomar una copia de los archivos de script individuales. Deseo hacer un enlace al script móvil jquery oficial en CDN. – Sylvain

+1

No creo que liberen las libs desacopladas en CDN, tal vez jQM 1.1 tenga esta opción que está programada para lanzarse a mediados/finales de feb. –

+0

Posiblemente, pero incluso así, me gustaría saber cómo inicializar JQM de una manera que no cambie la interfaz de usuario. – Sylvain

2

el cuidado de este problema en particular en el inicio a es casi imposible, lo mejor es utilizar los datos en roles = "ninguno" en el elemento de interfaz de usuario que no desea que el estilo por defecto suceda como tales:

<button type="button" data-role="none">Click Me!</button>​​​​​​​​​ 

echarle un vistazo en http://jsfiddle.net/JGgrw/13/

+0

Ya veo. Para aplicar esto a mi sitio, tendría que ejecutar '$ ('*'). Attr ('data-role', 'none');' antes del '

46

Si desea utilizar jQuery Mobile para eventos de toque solamente, añadir esta pieza de la escritura antes se carga la biblioteca móvil jQuery:

<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend( $.mobile , {autoInitializePage: false})});</script> 

Esto impide jQuery móvil desde la inicialización de la página y tocar el DOM , dejando tu diseño solo.

+1

Hola eivers. Esto fue de gran ayuda para mí, pero todavía estaba frustrado porque mi sitio se basa en gran medida en el cambio de navegación y el móvil jQuery estaba cambiando los # a /. Puede incluir un enlace a http://stackoverflow.com/a/8159996/3917091 que sugiere agregar '$ .mobile.pushStateEnabled = false;', porque todavía está activado con mobileinit. –

+1

muy buena respuesta que ayuda a cargar solo eventos estándar móviles jquery. – Sijav

31

jQuery Mobile ahora tiene un generador de descargas que le permite seleccionar solo las partes que desea, en este caso, solo tiene que seleccionar la casilla de verificación táctil en la sección de eventos.

http://jquerymobile.com/download-builder/

5

Otra nueva opción es jQuery-Mobile-Events, he estado en la lucha con este problema y sólo parece que este complemento útil.

La compilación personalizada del generador de descargas de jQuery Mobile no funciona para mí. Y jGestures no tiene el evento taphold que necesito.

Cuestiones relacionadas