UI.Layout jquery plugin

Question

Me está costando un poco configurar el plugin jquery UI.Layout. Todo parece sencillo cuando leo los documentos pero luego ... las cosas no funcionan.

Estoy usando la versión actual del plugin 1.3.0 Creo, y google cdn 1.5.1 de jquery. Y 1.8.10 para jquery ui, si eso importa.

En primer lugar me estoy poniendo un emergente cuando se carga la página:

El diseño de envase "DIV/# de contenido" no tiene altura. ¡Por lo tanto, el diseño es 0-height y por lo tanto 'invisible'!

Parece un mensaje de error razonable, así que modifiqué mi CSS para dar #content {height: 100%;} y borre el caché del navegador pero no, el problema sigue ahí.

Segundo problema: aunque la barra de ajuste está realmente presente (puedo verla en Firebug e interactuar con ella mientras sé dónde está), parece que debería haber algún archivo css coincidente con la biblioteca para darle estilo al resizer ¡Las demos en la página de UI.Layout sin embargo no parecen tener ningún CSS y funcionan bien! Por ejemplo, todo lo que quiero es algo como esto, http://layout.jquery-dev.net/demos/example.html, y cuando veo la fuente no hay estilo o no hay css incluidos.

¿Qué me estoy perdiendo?

Answer 1

Esto está REALMENTE mal documentado ... y estaba golpeando mi cabeza contra la pared, hasta que intenté esto ... necesita configurar una regla CSS que indique explícitamente la altura vertical de su "contenedor" .. o esa alerta molesta surgirá ... y lo más probable es que su Southern Panel no aparezca ... ¡Espero que esto ayude!

html, body, #myContainer { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

Answer 2

La respuesta anterior no funcionará correctamente si sus div están inicialmente vacíos. Lo siguiente es el truco, sin que aparezcan las barras de desplazamiento:

#myContainer { 
    width : 100%; 
    height : 100%; 
    position:absolute; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
} 

Answer 3

Quizás esta sea la verdadera razón. https://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple:

render : function() { 
 
    this.$el.html(this.template(options)); 
 
    return this; 
 
}

Eso tiene sentido, y funciona perfectamente si nunca se ocupa de subvistas. Pero tan pronto como necesite las subvistas, que en cualquier aplicación real parece que suceden desde el principio, se dará cuenta de que .html() de jQuery llama primero a .empty(), que desvincula todos los eventos de jQuery en todos los nodos secundarios. Por lo tanto, la primera vez que represente() todo funciona bien, pero tan pronto como lo vuelva a llamar, todos los eventos definidos en this.events en sus subvistas quedarán libres.