Question

我将fullcalendar.js包装在div中（内容）（我使用bootstrap3来设置大小）。

页面的内容区域当前设置为仅覆盖页面左侧的2/3个，而右侧的另外1/3页面为空白。

右侧保持空白/空白，直到单击一个按钮，然后ko将以侧面形式滑动（id =“ sideform ”）以占用空白区域。

我需要做的是不是从页面拆分70％/ 30％开始，而30％是空白，我希望内容区域实际上从100％/ 0％开始

然后，如果 sideform 到位，我想内容区域重新调整大小，从100％/ 0％到页面的70％/ 30％，否则100％/ 0％。

由于有很多这样的网页，在观看John Papa的视频之后，我相信创建一个处理程序将是最好的方式。

在过去的几周里，我看过并尝试修改示例来做我需要的，但没有运气。

内容 col-md-9和col-lg-9代表70％的屏幕宽度和 sideforms col-md-3和col-lg-3代表页面的另外1/3。

该页面目前设置为......

 <div class="container">
     <div id="**content**" class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
         <div class="calendar" data-bind="fullCalendar: {}"></div>
     </div>    
     <div id="*sideform*" class="col-xs-12 col-sm-12 col-md-3 col-lg-3 pull-right">
         <!--ko router: { transition:'entrance', cacheViews:false,activate: true }-->
         <!--/ko-->
     </div>

 </div>

有人有什么想法吗？

谢谢

Answer 1

首先，将一个可观察的sideFormShowing添加到ViewModel的相应部分，并将其初始化为false。

其次，将data-bind="if: sideFormShowing"添加到*sideform* div（顺便说一句，我不认为星号可以作为主要字符，如果全部，则在HTML ID中）。

第三步，从col-md-9 col-lg-9 div的class属性中取出**content**，然后添加以下绑定：

data-bind="css: {'col-md-9 col-lg-9': sideFormShowing,
  'col-md-12 col-lg-12': !sideFormShowing()}"

不要忘记类名列表中的引号和第二个条目中的parens。

现在只要sideFormShowing为false，内容div将占用100％并且不会呈现sideform div;当它是真的时，内容将缩小到70％并且将呈现sideform（我使用if绑定而不是visible，因为你可能不希望虚拟元素绑定运行，除非sideform应该显示。

使用knockout处理程序调整div并在其他div中滑动

1 个答案: