ホーム>source

私はKnockoutとjQueryを使用しています。選択できる3つのタイトルヘッダーがあります。デフォルトでは、最初のタイトルが選択され、錠剤のような背景CSSが定義されているため、選択されているオプションを視覚的に識別できます。

別のオプションを選択すると、新しいオプションは錠剤のようなハイライトになります。私が必要なのは、新しいオプションが選択されたところまでトランジション/アニメーションをスムーズにスライドさせるための錠剤のような選択です。私が持っているHTMLコードは

<前>ウィズウィズ

だから私は配列 <div data-bind="foreach:sortLabels,selectedSlide:selectedSortLabel"> <a class="btn" data-bind="text:label.toUpperCase(), css:{'selected':$parent.selectedSortLabel()==$data}, click:$parent.selectedSortLabel"></a> </div> を持っていますこれには2つの属性があります: sortLabels そして label 。上記のループは循環し、各 filter を表示します大文字で、CSSスタイル label も適用しますどの selected に基づく label に保存されている 。ウィズウィズ選択されたオブジェクトです。私のappModelで、上記の変数を定義したJavaScript:

<前>ウィズウィズ

同僚から、次のようなカスタムバインディングを作成するよう勧められました

<前>ウィズウィズ

selectedSortLabel のようなものを使用して

CSS:

<前>ウィズウィズ

これを実装する方法の手がかりはありません。

selectedSortLabel
あなたの答え
  • 解決した方法 # 1

    私はそれを理解しました、divが必要でした、CSS背景ピルは分離され、カスタムバインディングで定義された各更新で選択されたオプションの位置で更新される必要がありました。

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ java - JPAクエリ:サブクエリをグループ化条件に結合する