javascript - removeattribute - jquery mobile w3school

¿Cómo eliminar el estilo jQuery Mobile?

Question

Elegí jQuery Mobile sobre otros marcos por sus capacidades de animación y compatibilidad con páginas dinámicas.

Sin embargo, estoy teniendo problemas con el estilo. Me gustaría mantener el estilo de página básico para realizar transiciones de página. Pero también necesito personalizar completamente el aspecto de los encabezados, listas de vista, botones, cuadros de búsqueda ... No basta con los colores. Necesito manejar dimensiones, posiciones, márgenes, almohadillas, etc.

Por lo tanto, lucho con divs extra y clases agregadas por jQuery Mobile para anularlas con CSS. Pero lleva mucho tiempo, y sería mucho más rápido reescribir css desde cero ...

¿Hay alguna manera de cargar un archivo css jQuery Mobile mínimo?

¿O debería mirar hacia otro framework móvil? Necesito manejar transiciones de página, llamadas ajax, compatibilidad con Cordova y, por supuesto, un html / css completamente personalizable ...

Answer 1

Métodos de mejora de marcado de prevención:

Esto se puede hacer de varias maneras, a veces tendrá que combinarlos para lograr un resultado deseado.

• Método 1:

  Puede hacerlo agregando este atributo:

  data-enhance="false"

  al encabezado, contenido, contenedor de pie de página.

  Esto también debe cambiarse en la fase de carga de la aplicación:

  $(document).on("mobileinit", function () {
  $.mobile.ignoreContentEnabled=true;
  });

  Inicialízalo antes de que se inicialice jquery-mobile.js (mira el ejemplo a continuación).

  Se puede encontrar más sobre esto aquí:

  http://jquerymobile.com/test/docs/pages/page-scripting.html

  Ejemplo: http://jsfiddle.net/Gajotres/UZwpj/

  Para volver a crear una página, usa esto:

  $(''#index'').live(''pagebeforeshow'', function (event) {
  $.mobile.ignoreContentEnabled = false;
  $(this).attr(''data-enhance'',''true'');
  $(this).trigger("pagecreate")
  });

• Método 2:

  La segunda opción es hacerlo manualmente con esta línea:

  data-role="none"

  Ejemplo: http://jsfiddle.net/Gajotres/LqDke/

• Método 3:

  Ciertos elementos HTML pueden evitarse con la mejora de marcado:

   $(document).bind(''mobileinit'',function(){
  $.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
  //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
  });

  Ejemplo: http://jsfiddle.net/Gajotres/gAGtS/

  Vuelva a inicializarlo antes de inicializar jquery-mobile.js (consulte el ejemplo a continuación).

Lea más sobre esto en mi otro tutorial: jQuery Mobile: mejora de marcado de contenido agregado dinámicamente

Answer 2

... o simplemente use la versión oficial, sin temas , del CSS creado específicamente para permitir el diseño de un tema personalizado mientras se mantiene toda la funcionalidad de jQuery Mobile.

No tienes que pelear con hacks y anulaciones todo el tiempo y obtienes un CSS más ligero.

Ganar-ganar

editar: También respondió here

Answer 3

Para ser sincero, estoy bastante decepcionado porque jQuery Mobile no nos proporcionó un kit de inicio relativamente libre de estilo, para trabajar simplemente con lo que has dicho: Ajax, transiciones, cordova ...

Sobrescribir las clases de CSS generadas es una locura absoluta, pero he hecho algunos trabajos de skunk y logré reducir el tamaño del archivo css descomprimido de 233kb a meramente 27kb, mientras mantuve los aspectos importantes del CSS como transiciones, visualización de una página. , etc. De esta forma comenzarás casi como si empezases con un archivo css vacío.

Quizás subiré el archivo en Github, si hay alguna demanda para él. Deseo hacer más pruebas para ver que no dejé nada importante atrás.

Answer 4

a partir de jQuery Mobile 1.4.0, el atributo de datos data-enhanced datos se agregó a la mayoría de los componentes. Establecer este atributo como verdadero hará que jQuery Mobile ignore la mejora de estilo para el componente, por lo que tendrá que diseñar el elemento por su cuenta.

información adicional sobre esto en las notas de la versión de jQuery Mobile 1.4.0 aquí http://jquerymobile.com/upgrade-guide/1.4/

Answer 5

soy un experto, pero me encantaría compartir un método extraño contigo. En realidad, es una tarea muy agitada: lo que necesitas es editar el jqm css línea por línea borrando los valores de las propiedades, simplemente déjalos en blanco antes; solo tiene que cuidar las secciones deseadas del archivo CSS para ajustar o eliminar el valor

No olvides adjuntar tu enlace rel de tu propio CSS a la cabeza de tu página HTML

Espero que funcione para ti