jquery-ui - ejemplo - tooltip jquery

Un diseño de página completo con paneles redimensionables usando jQuery UI

Question

Estoy tratando de crear el diseño general de una aplicación web. La aplicación es de pantalla completa y tiene un encabezado fijo y tres columnas / paneles. El panel central consta de dos filas:

Los paneles deben ser redimensionables al arrastrar los bordes del panel con el mouse (vea las flechas en la imagen de arriba).

Los paneles individuales deben tener barras de desplazamiento verticales en caso de que se desborde el contenido, es decir, no una barra de desplazamiento de la ventana del navegador global.

Usando jQuery y jQuery UI Resizable, he creado este JSFiddle (que funciona parcialmente) .

HTML:

<div class="header">
  Fixed header    
</div>
<div class="wrapper">
   <div class="inner-wrapper">
       <div class="left pane">Left</div>
       <div class="center pane">
           <div class="inner">
               <div class="top">Center top</div>
               <div class="bottom">Center bottom</div>
           </div>
       </div>
       <div class="right pane">Right</div>
   </div>
</div>

CSS:

html, body {
    height: 100%;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-color: moccasin;  
}
.wrapper {
    position:absolute;
    top: 21px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: fuchsia;
}
.inner-wrapper,
.center.pane .inner {
    display: table;
    width: 100%;
    height: 100%;
}
.pane {
    display: table-cell;
}
.left.pane {
   background-color: olivedrab; 
}
.center.pane {
    background-color: lightblue;
}
.center.pane .inner .top,
.center.pane .inner .bottom{
    display: table-row;  
}
.center.pane .inner .top {
    background-color: lightcoral;   
}
.center.pane .inner .bottom {   
    background-color: orange;
    height: 100%;
    width: 100%;
}
.right.pane {
    background-color: #999;
}

JavaScript:

$(function () {
    $(".left.pane").resizable({
        handles: "e, w"
    });
    $(".right.pane").resizable({
        handles: "e, w"
    });
    $(".center.pane .inner .bottom").resizable({
        handles: "n, s"
    });
});

Tiene varios problemas, incluyendo:

• Al cambiar el tamaño a la izquierda, a la derecha también se le cambia el tamaño (que no debería)
• Al cambiar el tamaño de Izquierda a ancho completo, el contenido del Centro se oculta debajo de la Derecha
• Cuando se cambia el tamaño a la derecha, la envoltura (color fucsia) es parcialmente visible
• La parte inferior central se redimensiona a través de la parte superior de la parte superior central, no a través de su propia parte superior

Soy consciente del complemento jQuery Layout, pero por lo que puedo ver, no ofrece el diseño que busco. Además, quiero que sea lo más simple posible.

Además, he probado el complemento Splitter de Methvins, pero no pude hacerlo funcionar.

Mi pregunta:

¿Alguna sugerencia sobre cómo crear un diseño como en la imagen de jQuery UI Resizable y qué tengo en el JSFiddle ?

Answer 1

Encontré uno que parece aceptable para este requisito, si buscas algo más minimalista en comparación con jEasy UI. :)

• http://w2ui.com/web/demo/layout
• Tampoco es un proyecto muerto; Parece aún activo en github https://github.com/vitmalina/w2ui/ , lo cual es bueno.

Lo probaré. Sólo quería compartir esto, para ahorrar tiempo de búsqueda de otros, con suerte.

Answer 2

Estoy usando este plugin con jQuery

http://www.bramstein.com/projects/jlayout/jquery-plugin.html

Answer 3

Hay complementos más apropiados, basados ​​en jQuery para obtener lo que quieres.

OPCION 1 :

Personalmente utilicé en mi proyecto UI Layout .

Es un proyecto casi antiguo (hace 6 años), pero a mediados de 2014 se reinicia su desarrollo, incluso si no hay más información después de septiembre de 2014 .

En realidad, la última versión estable es 1.4.3, lanzada en septiembre ''14. Nuevo sitio web es:

• https://github.com/allpro/layout/

OPCION 2 :

Si necesita una solución más completa, podría pensar en jEasy UI , que es un marco completo que

[...] te ayuda a construir tus páginas web fácilmente

Es un tipo de reemplazo de la interfaz de usuario jQuery , con algunos widgets similares (diálogos, acordeones, ...) y algo exclusivo, como el módulo Layout , ya vinculado en mi respuesta.

OPCIÓN 3 : la solución analógica a la anterior, es Zino UI , otro marco completo de UI que tiene un componente específico dedicado a " Dividir diseño "

OPCIÓN 4 : jQWidgets es otra biblioteca, con propósitos similares a los anteriores.

Alternativa relacionada (similar) :

También hay otra alternativa, que permite dividir los paneles en las ventanas del navegador, pero además permite arrastrar y soltar paneles individuales creando diferentes pestañas y subventanas de lado a lado.

Esto se llama Golden Layout . Es diferente de los anteriores, por muchas razones también es más poderoso, pero seguramente en este momento no tiene soporte de Touch ...

Answer 4

Hubo algunos pequeños problemas que causaron el comportamiento que no te gusta.

Estos fueron arreglados en este Fiddle

Los problemas fueron:

Al cambiar el tamaño a la izquierda, a la derecha también se le cambia el tamaño (que no debería)

Se corrigió estableciendo un ancho inicial (en porcentaje)

Al cambiar el tamaño de Izquierda a ancho completo, el contenido del Centro se oculta debajo de la Derecha

No se pudo reproducir

Cuando se cambia el tamaño a la derecha, la envoltura (color fucsia) es parcialmente visible. La parte inferior central se redimensiona a través de la parte superior de la parte superior central, no a través de su propia parte superior

Se corrigió estableciendo la izquierda en 0 durante el cambio de tamaño.

$(".right.pane").resizable({
    handles: "e, w",
    resize: function(event, ui) {
      ui.position.left = 0;
    }
  });

La parte inferior central se redimensiona a través de la parte superior de la parte superior central, no a través de su propia parte superior

Esto se debe a que JQuery UI Resizable utiliza un posicionamiento relativo que no funciona en las celdas de la tabla. Se corrigió agregando un div de contenido que maneja el cambio de tamaño.

<div class="top pane"> 
   <div class="top-content">Center top</div>
</div>

Answer 5

OK, espero que mi última edición. Revisé un montón de estos y terminé con el diseño de la interfaz de usuario de jQuery.

Goldenlayout es bueno, pero debes agregar el html en cada panel a través de javascript. Si tienes todas tus cosas en componentes de reacción, supongo que esto podría estar bien, pero no para mi caso de uso.

El diseño de la interfaz de usuario de jQuery parece ser bastante sólido y se actualizó en 2014.

Answer 6

Puedes usar Gridstack Es fácil de usar y poderoso.

Answer 7

Se me ocurrió la respuesta a esto, aunque al final me llevó más de un año de desarrollo. El resultado es un widget de diseño de panel moderno y sensible creado con jQuery y jQuery UI factory factory.

http://www.silvercore.co.uk/widgets/propanellayout/

La mejor solución en el momento en que se hizo la pregunta fue, sin duda, jQuery UI.Layout, pero con el tiempo el proyecto se ha estancado y el complemento no funciona con jQuery 2. A pesar del código publicado en GitHub, se desconoce su destino, lo que hace que usarlo Como fundamento de un proyecto a largo plazo cuestionable.

Algunos de los otros enlaces publicados aquí están muertos ahora y si no quiere o no necesita un marco de aplicación completo, sus opciones son limitadas.