Un completo diseño de página con tamaño variable paneles utilizando jQuery UI

Estoy tratando de crear el diseño general de una webapp. La aplicación está en modo de pantalla completa y tiene un encabezado fijo y tres columnas/paneles. El panel central se compone de dos filas:

Un completo diseño de página con tamaño variable paneles utilizando jQuery UI

Los paneles deben ser de tamaño variable, a través de arrastrar el panel de bordes con el ratón (ver las flechas en la imagen de arriba).

De los paneles individuales deben tener barras de desplazamiento vertical en caso de vertido el contenido, esto es, no globales ventana del navegador de la barra de desplazamiento.

El uso de jQuery y jQuery UI, de tamaño variable, he creado esta parte de trabajo) JSFiddle.

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 de la Izquierda, la Derecha es también cambiar de tamaño (que no debería)
  • Al cambiar el tamaño a la Izquierda hacia ancho completo, Centro de contenido está oculto bajo el Derecho
  • Al cambiar el tamaño de Derecho de la envoltura (color Fucsia) es parcialmente visible
  • Centro de la parte inferior es de tamaño a través de la parte superior de la parte central superior, no a través de su propia parte superior

Soy consciente de jQuery Diseño de plugin, pero por lo que puedo ver, no ofrecen bastante el diseño de lo que busco. También, quiero mantenerlo lo más simple posible.

Por otra parte, he tratado de Methvins divisor de plugin, pero no podía llegar a trabajar.

Mi pregunta:

A cualquier sugerencia de cómo crear un diseño como el de la imagen de jQuery UI, de tamaño variable, y lo que tengo en el JSFiddle?

OriginalEl autor agibsen | 2014-02-14

7 Kommentare

  1. 29

    Hay más complementos adecuados, basado en jQuery para obtener lo que desea.

    OPCIÓN 1:

    He utilizado personalmente en mi proyecto un Diseño de interfaz de usuario.

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

    De hecho, la última versión estable es la 1.4.3, lanzado en septiembre ’14. Nueva web es:


    OPCIÓN 2:

    Si usted necesita una solución más completa, usted podría pensar en jEasy interfaz de usuario, que es un marco de trabajo completo que

    […] le ayuda a construir sus páginas web fácilmente

    Es una especie de reemplazo de jQuery UI, con algunos widgets similares (diálogos, acordeones, …) y algo exclusivo, como Diseño del módulo, ya enlazado en mi respuesta.


    OPCIÓN 3:
    Análogo de la solución a la anterior, es Zino interfaz de usuario, otro completo marco de interfaz de usuario que tiene un componente específico dedicado a «Dividir Diseño«


    OPCIÓN 4:
    jQWidgets es otra biblioteca, con fines similares a los anteriores, y, específicamente, podría ser interesante jqxSplitter módulo.


    Relacionadas con la alternativa (similar):

    También hay otra alternativa, que permite cortar los paneles en el explorador de windows, pero además permite drag&drop paneles individuales de la creación de fichas diferentes, y de lado a lado de la sub-ventanas.

    Esto se llama de Oro Diseño. Es diferente de los anteriores, por muchas razones también más potente, pero seguramente en el momento no ha Toque apoyo

    Eso es en realidad lo que terminó usando.
    lo ahah ok. por favor, Acepta responder de hacer clic en «marca de verificación» si usted piensa que es el más correcto 🙂
    Compruebe el código de Diseño de interfaz de usuario, es pooor documentación, además de sobre-código complejo, un diseño lib no necesita ser tan compleja, demasiadas cosas se pueden hacer en css en vez de usar javascript
    Desarrollador claramente escribió hace 1 año que la nueva versión basada en las nuevas tecnologías (y por lo tanto, más sencillo) fue en developmente. Desde esa fecha no hay noticias venido tan es unkwown si este proyecto aún está en progreso o no.
    Esta es una excelente recopilación de un conjunto de herramientas de…gracias.

    OriginalEl autor Luca Detomi

  2. 7

    He encontrado uno que parece aceptable para este requisito, si estás buscando algo más minimalista en comparación con jEasy interfaz de usuario. : )

    Voy a darle una oportunidad. Sólo quería compartir esto, para salvar a los demás de tiempo de búsqueda, es de esperar.

    Gracias. Esta biblioteca se ve muy interesante. También es bueno saber que aún está en desarrollo.

    OriginalEl autor fentas

  3. 2

    Hubo unos pequeños problemas que causa el comportamiento que no te gusta.

    Estos fueron fijados en este El violín

    Los problemas fueron:

    Al cambiar el tamaño de la Izquierda, la Derecha es también cambiar de tamaño (que no debería)

    Fija mediante el establecimiento de un ancho inicial (en por ciento)

    Al cambiar el tamaño a la Izquierda hacia ancho completo, Centro de contenido está oculto bajo el Derecho

    No podía reproducir

    Al cambiar el tamaño de Derecho de la envoltura (color Fucsia) es en parte
    visible Centro de la parte inferior es de tamaño a través de la parte superior de la parte central superior,
    no a través de su propia parte superior

    Fija mediante el establecimiento de izquierda a 0 durante el cambio de tamaño.

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

    Centro de la parte inferior es de tamaño a través de la parte superior de la parte central superior, no a través de su propia parte superior

    Esto es debido a que la interfaz de usuario JQuery de tamaño variable utiliza la posición relativa que no funcionan en las celdas de la tabla. Fijo mediante la adición de un div de contenido que maneja el cambio de tamaño.

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

    OriginalEl autor Richard Houltz

  4. 1

    Se me ocurrió la respuesta a esta conmigo, aunque al final me tomó más de un año de desarrollo! El resultado es un moderno, sensible el diseño del panel widget construido usando jQuery y jQuery UI widget de fábrica.

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

    La mejor solución en el momento que hice la pregunta fue, sin duda, jQuery UI.El diseño, pero con el tiempo ese proyecto se ha estancado y el plugin no funciona con jQuery 2. A pesar de que el código está publicado en GitHub su destino es desconocido, que se hace un uso como base de un proyecto a largo plazo cuestionable.

    Unos de los otros enlaces publicados aquí están muertos ahora, y si no quieres o necesitas un completo marco de la aplicación de sus opciones son limitadas.

    La respuesta no se puede mencionar que la biblioteca se distribuye bajo una licencia comercial.
    Parece que el enlace está muerto

    OriginalEl autor Stephen Blair

  5. 0

    OK, espero que mi última edición. Fue a través de un montón de estos, y terminó con jQuery diseño de interfaz de usuario.

    Goldenlayout es agradable, pero usted tiene que agregar el código html en cada panel a través de javascript. Si tienes todas tus cosas en reaccionar componentes supongo que esto podría estar bien, pero no para mi caso de uso.

    jQuery diseño de interfaz de usuario parece ser bastante robusto y se acaba de actualizar en 2014.

    Puedes publicar de jQuery UI solución que terminó con por favor ?
    Hmm, su pasado un tiempo. Su mezclados con un montón de código de comercio. Ojalá algún día pueda volver aquí y ayudar. Hoy no es ese día, por desgracia!

    OriginalEl autor Greg Blass

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea