0

我将 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%，侧边形式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>

有人有想法么？

谢谢

4

1 回答 1

0

sideFormShowing首先，在 ViewModel 的适当部分添加一个 observable ，并将其初始化为 false。

其次，添加data-bind="if: sideFormShowing"到*sideform*div （顺便说一句，我认为星号不允许作为前导字符，如果它全部，在 HTML id 中）。

第三，取出div 上col-md-9 col-lg-9的class属性**content**，并为其添加以下绑定：

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

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

现在每当sideFormShowing为 false 时，内容 div 将占据 100%，并且不会渲染 sideform div；当它为真时，内容将缩小到 70% 并且将呈现边窗体（我使用了if绑定而不是visible因为您可能不希望虚拟元素绑定运行，除非应该显示边窗体。

于 2013-10-16T19:40:19.933 回答