WinJS의 ListView 선택 템플릿 변경

ListView 항목의 기본 선택 템플릿을 변경하고 싶습니다. 내가 ui.js에서 찾을 않았다WinJS의 ListView 선택 템플릿 변경

enter image description here

내부적으로 _selectionTemplate 속성이 기본 경계로 설정되어 있다는 것입니다 : 기본적으로 3 픽셀 넓은 회색 테두리가 현재 선택한 항목 (들)에 적용되는

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 디자인을 위반하는 것으로 보입니다. 이 기본 선택 템플릿을 수정하기위한 더 나은 해결 방법이 있습니까?

출처

2012-08-24 Gergely Orosz

재정의해야 할 CSS 클래스가 추가되었습니다. 자신 만의 CSS 클래스를 추가하여 설정할 너비를 설정할 수 있습니다. –

기본 템플릿에서 사용되는 CSS 클래스를 재정의하십시오. 예를 들어 테두리를 빨간색으로 변경하면 다음과 같이됩니다.

.win-listview .win-container:hover{ 
    outline: rgba(255, 0, 0, 0.3) solid 3px; 
}

출처

2012-08-24 18:39:14

소원이 답변을 두 번 이상 투표 할 수 있습니다. –

답변

관련 문제