1

左パネル、メイン (中央)、右パネルのページがあります。左パネルと右パネルの両方を移動できるようにしたい (したがって、メインを大きくしたい)。サイド パネルに jQuery アニメーションを追加しましたが、メインが静止しているだけで、他の div が離れたときにメインが大きくならない理由がわかりません。

HTML

  <aside id="_left" class="left collapsible">
    <div id="left_ExpanderCollapse"><span>&lt;</span></div>
    <div style="clear: both"></div>
    <table cellpadding="0", cellspacing="0">
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
    </table>
    test 2
  </aside>

  <aside id="_right" class="right collapsible">
    <div id="right_ExpanderCollapse"><span>&gt;</span></div>
    <div style="clear: both"></div>
    <table cellpadding="0", cellspacing="0">
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
    </table>
    test 2
  </aside> 

  <div id="_main" >
    <h1>Title</h1>
    Here is the main!<br />
    Here is the main!<br />
    Here is the main!<br />
    Here is the main!<br />
    Here is the main!<br />
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p><p>text</p>    
    <div id="pushFooter"></div>
  </div>

<footer>
  Here is some small footer text
</footer>

CSS

* { 
  margin: 0; 
}
html, body {
  height: 100%;
}

.wrapper {
  width: 80%;
  min-height: 98%;
  border: 1px solid #000;
  padding: 0.5em;
  margin: 0 auto -5em; /* -5em being the size of the footer */
}
footer, #pushFooter {
  height: 5em;
}
footer {
  border: 1px solid #ff0000;
  font-size: 0.7em;
  margin: 0 auto;
}

#_main {
  background-color: #999;
}

aside.left {
  float: left;
  background-color: #eee;
  display: inline-block;
  border: 1px solid #0000ff;
}
aside.right {
  float: right;
  background-color: #eee;
  display: inline-block;
  border: 1px solid #0000ff;
}
#_left, #_right{
  min-width: 15em;
}
#_left_ExpanderCollapse {
  width: 20px;
  margin-right: 5px;
}
#_right_expanderCollapse {
  width: 20px;
  margin-left: 5px;
}

#left_ExpanderCollapse, #right_ExpanderCollapse {
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
  width: 20px;

  background-color: #0492d0;
  /* round box */
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  border-radius: 75px;
}
.collapsible {
  position: relative;
}

JS / jQuery

  // make the aside containers as high as the main container
  $("aside").each(function() {
    if($("#_main").height() < $("div.wrapper").height())
      $("#_main").height($("div.wrapper").height());
    $(this).height($("#_main").height());
  });
  // make the footer(s) as wide as the main container
  $("footer").each(function() {
    $(this).width($("#_main").width());
  });
  // make left resizeable
  $( "#_left" ).resizable({handles: 'e, w'});

  $("#left_ExpanderCollapse").click(function() { //alert($(this).text());
    if($(this).text() == "<") {
      var fold     = "-";
      var newArrow = ">"; 
      $("#_left").animate( { left:    fold+'='+($("#_left").width()-$(this).width()),
                            opacity: "0" }, 1000 );
    }
    else {
      var fold     = "+";
      var newArrow = "<";
      $("#_left").animate( { opacity: "1",
                            left:    fold+'='+($("#_left").width()-$(this).width()) }, 1000 );
    }
    $(this).text(newArrow);
  });
4

1 に答える 1

0

誰かがこれを必要とする場合、私はそれを自分で見つけました：

左/右の div の「左」または「右」のプロパティを変更しても、div が相対的であってもメインに影響を与えないようです。代わりに、左右の余白の値を変更する必要がありました。したがって、クリック機能の上で、次のように変更しました（左= marginLeft）：

if($(this).text() == "<") {
  var fold     = "-";
  var newArrow = ">"; 
  $("#_left").animate( { marginLeft:    fold+'='+($("#_left").width()-$(this).width()),
                        opacity: "0" }, 1000 );
}
else {
  var fold     = "+";
  var newArrow = "<";
  $("#_left").animate( { opacity: "1",
                         marginLeft:    fold+'='+($("#_left").width()-$(this).width()) }, 1000 );
}
$(this).text(newArrow);
于 2013-03-11T07:37:03.280 に答える