jquery UI kullanarak yeniden boyutlandırılabilir bölünmüş ekran bölümleri

Winforms bölünmüş panele benzer, html'de bölünmüş panel görünümü içeren bir tasarım var. jQuery UI - Resizable ile deneme yaptım ve bu işlevi beğendim, iki div s boyutlandırmasını koordine edemiyorum. Geçerli kodla ilgili sorun, iki div s birbirinden uzaklaşıp, diğerini izleyerek değil. İki div s çalışmasını nasıl birlikte yapabilirim?jquery UI kullanarak yeniden boyutlandırılabilir bölünmüş ekran bölümleri

<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>

kaynak

2011-03-04 C. Ross

Eğer style = gibi bir şey koyarak denediniz ": inline; şamandıra: Ekran/(sağ diğeri için) sol"? – asawyer

@asawyer, evet. Ekranın kenarlarına yapışıyorlar, ancak div2 yeniden boyutlandırmıyor ... –

İlgili: [CSS3 Resize özelliğini kullanarak bölme bölmesi] (http://stackoverflow.com/questions/3758728/split-pane-using-css3 -resize-özelliği), aynı etki, IE'de çalışmak için gerekmiyor. JQuery dışındaki çözümlere yerleşeceğim, en iyi tarayıcı/tarayıcı (çoğunlukla) olduğunu düşündüm. –

Bu gereksinimlerin karşılanıp karşılanmadığından emin değilim, ancak ExtJS bölünmüş bölmeleri kolaylıkla işleyebilir ve tarayıcılar arası çalışır. Örneğin, bu RSS feed client in ExtJS'a bakın. Amacınız ürününüzü satmaksa, ExtJS'nin ticari lisans sınırlamaları olduğunu unutmayın.

kaynak

2011-03-05 05:08:55 bwest

Yeniden boyutlandırma etkinliğini kullanarak makul bir kesmek için çalıştım. Hala diğerlerinden daha temiz cevapları açığım

<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>

_...

kaynak

2011-03-05 13:44:04

jquery UI kullanarak yeniden boyutlandırılabilir bölünmüş ekran bölümleri

cevap

İlgili konular