0

fullcalendar.js を div ( content ) でラップしています (bootstrap3 を使用してサイズを設定します)。

ページのこのコンテンツ領域は現在、ページの左側の 2/3 のみをカバーするようにセットアップされており、右側のページの残りの 1/3 は空白です。

右側は、ボタンがクリックされるまで空白/空のままであり、ko はサイド フォーム (id=" sideform ") でスライドして空のスペースを占有します。

私がする必要があるのは、30% が空白であるページ分割 70%/30% から始めるのではなく、コンテンツ領域を実際に 100%/0% から開始することです。

次に、サイドフォームが配置されている場合は、コンテンツ領域のサイズをページの 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

まず、オブザーバブル をsideFormShowingViewModel の適切なセクションに追加し、それを false に初期化します。

次に、div に追加data-bind="if: sideFormShowing"します*sideform*(ところで、アスタリスクを HTML ID の先頭文字として使用することは許可されていないと思います)。

3 番目に、 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()}"

2 番目のエントリのクラス名リストと括弧を囲む引用符を忘れないでください。

が false の場合は常にsideFormShowing、コンテンツ div が 100% を占め、サイドフォーム div はレンダリングされません。true の場合、コンテンツは 70% に縮小され、サイドフォームがレンダリングされます (サイドフォームを表示する必要がない限り、仮想要素バインディングを実行したくないと思われるためifではなく、バインディングを使用しました。visible

于 2013-10-16T19:40:19.933 に答える