programa - jquery replace all

Cómo cambiar entre dos diseños basados ​​en Jquery(cuando se utiliza escritorio y dispositivo móvil)

Question

Quiero crear un sitio web receptivo. Si el navegador es de tamaño móvil, el contenido debe mostrarse con una vista de lista de estilo de iPhone. Si el navegador tiene un tamaño de escritorio, el contenido debe mostrarse con pestañas:

Cual es la mejor manera de hacer esto? No quiero usar archivos separados para Mobile / Desktop. Quiero que responda.

Aquí está algo de la investigación que he hecho.

Intento 1: solución de CSS puro.

Una solución pura de CSS sería la mejor, ya que CSS ofrece consultas de medios, lo que facilita cambiar de diseño. CSS ofrece métodos para crear pestañas . Pero no parece ofrecer un método para una lista de estilo de iPhone. (Casi puede falsificarlo con una lista de acordeones, pero esto no lleva al usuario a una página separada, como en una aplicación de iPhone verdadera).

Intento 2: solución Jquery ( ver violín )

• Jquery Mobile ofrece una manera fácil de crear vistas de lista de estilo de iPhone
• Jquery UI ofrece una manera fácil de crear pestañas .
• Enquire.js ofrece un equivalente de Javascript para consultas de medios.

En este violín , he intentado combinar Jquery Mobile y Jquery Ui. Enquire.Js se utiliza para llamar a la biblioteca necesaria según la pantalla.

Cuando se llama a una biblioteca, alterará la estructura dom. Por lo tanto, se debe eliminar la biblioteca innecesaria, de lo contrario, si el usuario cambia el tamaño del navegador (es decir, cambia entre el escritorio móvil), la biblioteca no utilizada se romperá y causará conflictos para la biblioteca llamada.

En mi violín, he intentado hacer esto, pero parece que no funciona:

$(document).ready(function() {
enquire.register("screen and (max-width: 600px)", function() {
$(''script[src~="jquery-ui.js"]'').remove();
$(''link[rel=stylesheet][href~="jquery-ui.css"]'').remove();
$(''head'').append(''<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />'');
$(''head'').append(''<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"><//script>'');
$("#tabs").tabs("destroy");
}).listen();
enquire.register("screen and (min-width: 601px)", function() {
$(''script[src~="jquery.mobile-1.0a3.min.js"]'').remove();
$(''link[rel=stylesheet][href~="jquery.mobile-1.0a3.min.css"]'').remove();
$(''head'').append(''<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />'');
$(''head'').append(''<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><//script>'');
$("#tabs").tabs();
}).listen();
});

Aunque se elimine la biblioteca no utilizada, causa conflictos para la nueva biblioteca. Además, debe cambiar el tamaño del navegador antes de llamar a cualquiera de los diseños. Si el usuario no cambia el tamaño del navegador, el contenido quedará sin estilo.

Intento 3: Dom Cloning ( ver violín )

Este intento es similar al intento 2, excepto que en la carga de la página almacena el DOM en una variable. Luego, cuando el usuario reajusta el tamaño del navegador, el DOM existente se reemplaza con el DOM almacenado. He seguido el esquema del método aquí , pero parece que no funciona. La dom simplemente se elimina en lugar de ser reemplazada.

Agradecería cualquier ayuda con esto, ya que me he estado rasgando los pelos para encontrar una solución. (Sé que hice una pregunta similar a esta, pero sentí que esta nueva pregunta era lo suficientemente diferente como para justificar una nueva publicación).

Intento 4: Asignación dinámica de atributos de datos

Jquery Mobile usa atributos de datos en el margen para que funcionen los scripts. Intenté aplicarlos dinámicamente, por lo que solo se escriben en el documento cuando el navegador está en tamaño móvil. Sin embargo, cuando se vuelve a clasificar según el tamaño del navegador, las pestañas del escritorio todavía están rotas.

Answer 1

Definitivamente iré por Attemp 1 y trataré de simular una "página separada". Es mucho más ligero y flexible en este caso.

Los intentos 2 y 3 tienen demasiada sobrecarga en mi opinión.

Algunos pensamientos sobre UX

Desde la perspectiva de UX, diría que no es bueno cambiar el concepto de navegación de la manera que se muestra arriba. Los usuarios pueden confundirse al cambiar el tamaño de la ventana de su navegador.

Answer 2

No creo que haya una necesidad de reinventar la rueda aquí. Responsive Design ha existido desde hace bastante tiempo y ya se ha tomado el desarrollo web por sorpresa. Dicho eso, sugeriría que puedas usar cualquiera de los no. de los trabajos de marcos receptivos funciona por ahí que te gusta. Mi favorito personal y sugiero usar es el trabajo de marco de Twitter Bootstrap. Es increíblemente liviano y fácil de usar, cuando se da cuenta de cómo funcionan. No necesita preocuparse solo por el iPhone y el Escritorio. Twitter Bootstrap abastece a los otros dispositivos y también a las tablas et-al.

Ahora directamente a su pregunta, ya que quería mostrar el mismo contenido con pestañas tanto en Mobile como en Desktop, sin tener dos archivos html separados. Lo que he presentado a continuación es una demostración de muestra.

Tengo un archivo html simple con todo el contenido, usé Twitter bootstrap como un trabajo de marco receptivo.

HTML

Por favor, mira el violín, es demasiado grande (contenido) para pegar aquí :)

CSS

A excepción de Loading bootstrap.css y bootstrap-responsive.css, necesito mi CSS personalizado para adaptarme al diseño de mi página.

La parte más importante de CSS que realmente hace el truco aquí es la consulta de medios. Especifico el ancho del dispositivo y le pido al CSS que se muestre de esta manera, cuando este ancho del dispositivo ha llegado. Media Query Syntax es como:

@media (max-width:480px) {
// Custom for device that has width 480px;
}

Ahora iPhone tiene un ancho de 480 px para el diseño y cuando el dispositivo en el que se está viendo mi página, quiero que mis elementos se adapten a la pantalla de 480 píxeles.

Aquí está el CSS personalizado para la página:

.container {
margin-top: 10px;
}
.ora, .ban, .man{display:none;}
.fruit-content{width:100%;}
li{display:inline-block;width:24%;text-align:center;border-bottom:1px solid #fff;background: #C0C;}
ul.upperul{margin:0 0 0 0px;width:103%;}
.custom-row{border:1px solid green;}
.selected{background: #c0c0c0;}
@media (max-width:480px) {
li{display: block;width: 100%;text-align: left;}
.custom-row{border:1px solid #000000;}
ul.upperul{margin-left: 0px;width:100%;}
}

JS

Ahora viene la parte de la funcionalidad acerca de cambiar el contenido con pestañas. Usé jQuery con solo unas pocas líneas de código para configurar el contenido en una forma tabulada:

$(function() {
$("li").live("click" , function() {
$(this).css("background","#c0c0c0").siblings().css("background","#C0C");
$(".des").hide().eq($(this).index()).show();
})
.eq(0).addClass(''selected'');
});

Finalmente Todo el bloque de construcción de estas piezas está aquí en un violín:

MANIFESTACIÓN

El resultado de pantalla completa está aquí , cambie el tamaño de su navegador y vea cómo se comporta el contenido y se logra la capacidad de respuesta.