divs divisibles de pantalla dividida utilizando jquery UI

Tengo un diseño en mente que implica una vista de panel dividido en html, similar a un panel dividido de winforms. He estado expirimentando con jQuery UI - Resizable y me gusta la función, simplemente no puedo coordinar el cambio de tamaño de los dos div s. El problema con el código actual es que los dos div s cambian de tamaño el uno lejos del otro, no con uno siguiendo al otro. ¿Cómo puedo hacer que los dos div s trabajen juntos?divs divisibles de pantalla dividida utilizando jquery UI

<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="css/custom.css" /> 
     <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen"> 
     <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen"> 
     <script type="text/javascript" src="script/jquery-1.5.1.js"></script> 
     <script type="text/javascript" src="script/superfish.js"></script> 
     <script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script> 
     <script type="text/javascript"> 


     // initialise plugins 
     $(function(){ 
      try { 
       $('ul.sf-menu').superfish(); 

       //set up divs 
       $('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')}); 

      }catch(ex){ 
       alert(ex.message); 
      } 
     }); 

     </script> 
    </head> 
    <body> 
     <div id="Header"> 
      <div id="Menu"> 
       <ul class="sf-menu" id="nav"> 
        <!-- Snip menu --> 
       </ul> 
      </div> 
     </div> 
     <div id="Middle"> 
      <div id="Content" class="ui-widget-content">This is where the view is.<br/> 
      Imagine an image here ... 
      <br/> 
      <br/> 
      <br/> 
      </div> 
      <div id="Attributes" class="ui-widget-content"> 
       <ul> 
        <li>A</li> 
        <li>B</li> 
        <li>C</li> 
       </ul> 
      </div> 
     </div> 
     <div id="FootBreak"/> 
     <div id="Footer"> 
      <a href="#">Help</a> 
     </div> 
    </body> 
</html>

Fuente

2011-03-04 C. Ross

¿Usted ha intentado poner algo así como style = "display: inline; float: left/(a la derecha para el otro)"? – asawyer

@asawyer, sí. Se están pegando a los lados de la pantalla, pero div2 no está redimensionando ... –

Relacionados: [Panel dividido usando la propiedad de Redimensionar CSS3] (http://stackoverflow.com/questions/3758728/split-pane-using-css3 -resize-property), el mismo efecto, excepto que necesito que funcione en IE. Me conformaré con soluciones distintas a jQuery, solo pensé que era mejor porque ya es independiente del navegador (principalmente). –

No estoy seguro si esto cumple los requisitos, pero ExtJS maneja los paneles divididos con facilidad y funciona en todos los navegadores. Por ejemplo, vea esto RSS feed client in ExtJS. Tenga en cuenta que ExtJS tiene restricciones de licencia comercial si su intención es vender su producto.

Fuente

2011-03-05 05:08:55 bwest

He creado un truco razonable, utilizando el evento de cambio de tamaño.

<script type="text/javascript"> 

    var WIDTH_ATTR = 'initWidth'; 

    // initialise plugins 
    $(function(){ 
     try { 
      $('#Content').resizable({ handles: 'e', resize: resizeAttr }); 
      $('#Content').attr(WIDTH_ATTR, $('#Content').width()); 
      $('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width()); 
     }catch(ex){ 
      alert(ex.message); 
     } 
    }); 

    function resizeAttr(event, ui){ 
     var change = ui.size.width - $('#Content').attr(WIDTH_ATTR); 
     $('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change); 
    }; 

</script>

_{Todavía estoy abierto a respuestas más limpias de otros ...}

Fuente

2011-03-05 13:44:04

divs divisibles de pantalla dividida utilizando jquery UI

Respuesta

Cuestiones relacionadas