1

KnockoutJS を使用して、さまざまなページをビューポートに出し入れしたいと考えています。

私のページは現在jQueryを使っていないので、避けたいです。

CSS トランジションを使用する必要があります。

4

1 に答える 1

6

これはバインディングで行うことができますが、最初にボタンのヘルパー関数が必要です。オブザーバブルを特定の値に設定するクリック ハンドラーを返します。のように使えますdata-bind="click: page.set(1)。

ko.observable.fn.set = function(value) {
  var obs = this;
  return function(){ obs(value); }
}

これで、HTML のページ コンテナー ( .pages) にバインディングが作成され、どのページを表示するかが示されます。各ページには、それらを記述するために使用する単純なクラスがあります。

<div class="pages" data-bind="page: page">
  <div class="page text-center">
    <h1>Page 1</h1>
    <button class="btn" data-bind="click: page.set(1)">Go to Page 2</button>
  </div>
</div>

私たちの CSS は少し奇妙です。.pages本体よりもかなり大きくし、水平スクロール バーを非表示にする必要があります。10,000 を幅で割って.pages幅を取得できることに注意してください.page。これは常に当てはまります。ページ間をスライドするための簡単なトランジションもあります。 

html, body { width: 100%; height: 100%; overflow-x: hidden; }

.pages { 
  width: 10000%; height: 100%; position: relative; 
  transition: left .5s ease-in-out;
}

.page { width: 1%; height: 100%;  float: left;}

最後に、バインディング ハンドラーはそれがどのページであるかを確認し、正しいサイズを決定します。ページ 0 が最初であることに注意してください。

ko.bindingHandlers.page = {
  update: function(element, valueAccessor) {
    var position = ko.unwrap(valueAccessor());

    console.log(position);
    element.style.left = position * -100 + "%";
  }
}

ko.applyBindings({page: ko.observable(0)});

これで、ページのオブザーバブルをバインドできます。

ko.applyBindings({page: ko.observable(0)});

そしてすべてをまとめるデモ

于 2013-08-16T04:39:46.030 に答える