淘汰赛 move/slide 突出显示的选择 CSS

Question

我正在使用 Knockout 和 jQuery，有 3 个标题 headers 可以选择，默认选择第一个标题和一个 pill-like 背景 CSS因为它已被定义，所以可以直观地识别选择了哪个选项。

选择另一个选项时，新选项将具有pill-like突出显示。我需要的是 pill-like 选项，以便将 transition/animate 平滑地滑动到选择新选项的位置。我的 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>

所以我有一个数组 sortLabels，它有 2 个属性：label 和 filter。以上循环并以大写形式显示每个 label，并且还应用了 css 样式 selected，基于该样式 label 被选择存储在 selectedSortLabel 中。 selectedSortLabel 是选中的 object。在我的 appModel 中 JavaScript 我已经定义了上面的变量：

self.sortLabels = ko.observableArray([
     { label: "A B C", filter: 'abc' }, { label: "D E F", filter: 'def' }, { label: "G H I", filter: 'ghi' },
     { label: "J K L", filter: 'jkl' }, { label: "M N O", filter: 'mno' }, { label: "P Q R", filter: 'pqr' },
     { label: "S T U", filter: 'stu' }, { label: "V W X", filter: 'vwx' }, { label: "Y Z 0-9", filter: 'yz09' },
]);

self.selectedSortLabel = ko.observable(self.sortLabels()[0]);

同事建议我创建像

这样的自定义绑定

ko.bindingHandlers.selectedSlide = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here

    },
    update: function (element, valueAccessor, allBindings) {
        var value = ko.unwrap(valueAccessor());
        valueAccessor().subscribe(function () {
            console.log("changed from ", value);
            console.log("change to ", modelApp.selectedSortLabel());
        });
    }
};

使用 $("pointer").animate({ left: "100px" }, 2000)

CSS:

.selected {
    -webkit-border-radius: 40;
    -moz-border-radius: 40;
    border-radius: 40px;
    color: #656565;
    padding: 5px 20px 5px 20px;

    background: #C4C4C4;
    text-decoration: none;
}

我不知道如何实现它。

Answer 1

我想通了，需要 div，css 背景药丸需要在自定义绑定中定义的每个更新中分离和更新所选选项的位置。

淘汰赛 move/slide 突出显示的选择 CSS

Knockout move/slide highlighted selection CSS

html

javascript

css

jquery

knockout.js