framework - jquery mobile online
¿Cómo se usa jQuery Mobile solo para el soporte de eventos táctiles(sin mejoras de UI)? (7)
Estoy trabajando en una aplicación web que tiene su propio aspecto. Deseo utilizar jQuery Mobile solo para el soporte de eventos táctiles.
Cuando conecto 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
Vea 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 tenga que modificar el script de JQM. Necesito usar el script oficial de un CDN.
En caso de que alguien más se encuentre con esto (y no necesite el archivo de uno de los CDN de jQuery), estos son los pasos que tomé para extraer solo los desencadenadores de evento JQM:
-
git clone [email protected]:jquery/jquery-mobile
-
cd jquery-mobile
- edite
js/jquery.mobile.js
en su editor favorito - reemplace el
define(...);
declaración condefine([''./events/touch'', ''./events/orientationchange'']);
-
make
- su
compiled/jquery.mobile.js
solo eventos ahora estácompiled/jquery.mobile.js
ycompiled/jquery.mobile.min.js
¡Ahora puede usar $(el).tap(fn)
y demás sin preocuparse de que JQM elimine su marcado!
Otra nueva opción es jQuery-Mobile-Events . He tenido problemas con este problema y solo encuentro útil este complemento.
La compilación personalizada de Download Builder de jQuery Mobile no funciona para mí. Y http://jgestures.codeplex.com/ no tiene el evento taphold
que necesito.
Si desea utilizar jQuery Mobile solo para eventos táctiles, agregue este fragmento de script antes de cargar la biblioteca móvil de jQuery:
<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend( $.mobile , {autoInitializePage: false})});</script>
Esto evita que jquery mobile inicialice la página y toque el DOM, dejando así su diseño solo.
Si solo quieres enlazar a eventos táctiles / gestuales, usaría jGestures en su lugar:
http://jgestures.codeplex.com/
Un bonito y pequeño plugin jquery que he usado en proyectos anteriores con una gran variedad de eventos para enlazar:
Eventos disponibles:
orientacióncambiar El dispositivo se gira en sentido horario o antihorario. Este evento es desencadenado por el dispositivo y podría usar un giroscopio interno.
pizca 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 movimiento de deslizamiento (dedo (s) que se mueven alrededor del dispositivo, por ejemplo, arrastrando)
swipeone se activa después de un gesto de movimiento deslizante con un punto de contacto (se movió un dedo alrededor del dispositivo)
swipetwo Se activa después de un gesto de movimiento deslizante con dos puntos de contacto (se movieron dos dedos alrededor del dispositivo)
swipethree Se activa después de un gesto de movimiento deslizante con tres puntos de contacto (tres dedos se movieron alrededor del dispositivo)
swipefour se activa después de un gesto de movimiento con cuatro puntos de contacto (se movieron cuatro dedos alrededor del dispositivo)
swipeup se activa después de un estricto gesto de deslizamiento hacia arriba
swiperightup se activa después de un gesto de deslizar hacia la derecha y hacia arriba
swiperight se activa después de un estricto gesto de deslizar hacia la derecha
swiperightdown se activa después de un rig * htwards y hacia abajo deslice el gesto del movimiento
deslizamiento se activa después de un estricto gesto de movimiento hacia abajo
swipeleftdown Se activa después de un gesto de deslizar hacia la izquierda y hacia abajo
swipeleft se activa después de un gesto estricto del movimiento hacia la izquierda
swipeleftup se activa después de un gesto de deslizar hacia la izquierda y hacia arriba
Tapone se activa después de un solo gesto de toque (un dedo)
taptwo se activa después de un gesto de toque doble (dos dedos)
el tapthree se activa después de un gesto de toque triple (tres dedos)
pinchopen se activa cuando se produce un gesto de pinchopen (dos dedos que se alejan el uno del otro) y los puntos de contacto (dedos) se retiran del dispositivo.
pinchclose se activa cuando se produce un gesto de pinchclose (dos dedos moviéndose uno hacia el otro) y los puntos de contacto (dedos) se retiran del dispositivo.
rotatecw Se activa cuando se produce un gesto de rotación en el sentido de las agujas del reloj (dos dedos que giran en el sentido de las agujas del reloj) y los puntos de contacto (dedos) se retiran del dispositivo.
rotateccw Se activa cuando se produce un gesto de rotación en el sentido contrario a las agujas del reloj (dos dedos giran en sentido antihorario) y los puntos de contacto (dedos) se retiran del dispositivo.
jQM ahora está desacoplado:
Widgets: ahora desacoplado para construcciones flexibles
Hemos querido separar todos nuestros widgets del complemento de la página durante mucho tiempo y nos complace anunciar que finalmente obtuvimos este cambio. Entonces, ¿qué significa exactamente desacoplado de todos modos? Bueno, los widgets y utilidades individuales siempre se han dividido en archivos de script separados. Sin embargo, el plugin de la página fue responsable de 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ó la eliminación de complementos que no necesita sin causar errores y, en general, establece un mal precedente para futuras adiciones de widgets.
Ahora, prácticamente todos los widgets de UI en la biblioteca de jQuery Mobile están 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 funciones que necesita, además de los pocos archivos básicos necesarios. Si bien aún planeamos hacer más desacoplamiento y limpieza, los siguientes archivos ahora están desacoplados y se pueden eliminar de manera segura del archivo make antes de realizar una compilación personalizada:
- encabezado de página / contenido / pie de página
- plegable
- grupo de control
- fieldcontain
- fixheaderfooter
- botón
- casilla de verificación
- seleccionar
- control deslizante
- entrada de texto
- enlaces tematizando
- vista de la lista
- navbar
- cuadrícula
Trabajaremos en un mapa de dependencia porque algunos widgets dependen de otros para que funcionen. Por ejemplo, muchos de los widgets mencionados anteriormente llaman al complemento de marcado de botón, por lo que solo se puede excluir, pero si no está utilizando ninguno de los widgets que dependen de los botones.
Todavía estamos trabajando en nuestras recomendaciones para mapear las dependencias de los complementos y desacoplar las cosas aún más. En última instancia, esto aparecerá en una herramienta de creación de descargas, ¡así que estad atentos!
Puede dirigirse a su informe GIT y simplemente descargar lo que desee:
jQuery Mobile ahora tiene un generador de descargas que le permite seleccionar solo las partes que desea, en este caso, solo necesita seleccionar la casilla de verificación táctil en la sección de eventos.
ocuparse de este problema en particular en el momento del inicio es casi imposible, su mejor opción es usar data-role = "none" en el elemento ui para que no desee que el estilo predeterminado ocurra como tal:
<button type="button" data-role="none">Click Me!</button>
échale un vistazo en http://jsfiddle.net/JGgrw/13/