4

ListViewアイテムのデフォルトの選択テンプレートを変更したいのですが。デフォルトでは、3ピクセル幅の灰色の境界線が現在選択されているアイテムに適用されます。

ここに画像の説明を入力してください

ui.jsで見つけたのは、内部的に_selectionTemplateプロパティがデフォルトの境界線に設定されていることです。

var selectionBorder = createNodeWithClass(WinJS.UI._selectionBorderContainerClass);
selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderTopClass));
selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderRightClass));
selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderBottomClass));
selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderLeftClass));

this._selectionTemplate = [];
this._selectionTemplate.push(createNodeWithClass(WinJS.UI._selectionBackgroundClass));
this._selectionTemplate.push(selectionBorder);
this._selectionTemplate.push(createNodeWithClass(WinJS.UI._selectionCheckmarkBackgroundClass));
var checkmark = createNodeWithClass(WinJS.UI._selectionCheckmarkClass);
checkmark.innerText = WinJS.UI._SELECTION_CHECKMARK;
this._selectionTemplate.push(checkmark);

ただし、_selectionTemplateはプライベートであることが意図されているため、_selectionTemplateプロパティ自体を変更することはListViewの設計に反するように思われます。このデフォルトの選択テンプレートを変更するためのより良い回避策はありますか？

4

1 に答える 1

8

デフォルトのテンプレートで使用される CSS クラスをオーバーライドします。たとえば、これは境界線を赤に変更します。

.win-listview .win-container:hover{
    outline: rgba(255, 0, 0, 0.3) solid 3px;
}
于 2012-08-24T18:39:14.700 に答える