Emulación de marco redimensionable

Question

Entiendo que las etiquetas <frameset> y <frame> están en desuso. ¿Hay alguna forma de emular cuadros redimensionables? Lo que quiero es un separador estrecho que separe el área ya sea horizontal o verticalmente, que el usuario pueda mover, de modo que cuando un lado se haga más pequeño, el otro lado se haga más grande, y viceversa. No quiero completar cada cuadro con una página html como el marco convencional, sino con algunos materiales DOM.

Sé que CSS3 tiene el atributo resize, pero eso controla solo el tamaño de sí mismo. No estoy seguro de si esto se va a usar para la solución.

No prefiero usar JavaScript, pero no excluyo la posibilidad de usarlo si es necesario.

Answer 1

No use marcos, por favor. No creo que el tamaño de jQuery te ayude mucho, tampoco.

La mejor manera de hacerlo es mediante el uso de un "divisor". Hay varios complementos para jquery que harán esto de muchas maneras diferentes y todos son bastante simples.

he utilizado anteriormente ésta: http://methvin.com/splitter/

se puede encontrar una buena demostración aquí: solución de http://methvin.com/splitter/3psplitter.html

Answer 2

Me gustaría ver Javascript y arrastrar y soltar el soporte.

De hecho, un conjunto de marcos emulados podría ser solo dos divs y un identificador entre ellos que se puede tomar para cambiar el tamaño. JQuery tiene ejemplos para demostrar cómo cambiar el tamaño de un elemento: http://jqueryui.com/demos/resizable/ No creo que sea muy difícil expandir ese concepto para que encaje.

Luego cargaba los documentos a través de AJAX, y esto probablemente podría reemplazar los marcos por completo.

Answer 3

puede que este vínculo para YUI http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html

Ejemplo: http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html

Answer 4

Desde mi punto de vista jQuery Resizable o js tales cosas es su solución. Ir por es demos.
En caso de utilizar jQuery que tendrá posibilidades adicionales:

• máximo/mínimo
• Restringir cambiar el tamaño de la zona
• preselección de inicio
• Ajustar a la cuadrícula

que aquí hay una código de muestra para la funcionalidad predeterminada de jQuery Redimensionable:

<style> 
    #resizable { 
     width: 150px; 
     height: 150px; 
     display: block; 
     border: 1px solid gray; 
     text-align: center; 
    } 
</style> 

<script> 
    $(function() { 
     $("#resizable").resizable(); 
    }); 
</script> 

<div id="resizable"> 
    <h3>Resizable</h3> 
</div> 

Answer 5

Janus Troelsen arriba es grande si no te importa tablas. También encontré esta solución de SoonDead sin tablas, que funcionó muy bien con Chrome y FF, pero tuvo que pasar una cantidad desagradable de tiempo para IE8. Está en StackOverflow como "Emulate Frameset Separator Behavior"