스타일은 metro.css 파일 (또는 zTreeStyle.css……) 에 정의됩니다. 여기서 개별 그림을 로드하거나 좌표에서 사용할 그래픽을 얻을 수 있습니다. Metro.css 에 더 중요한 그림 중 하나는 metro.png 입니다. 그림의 각 작은 사각형은 5px 이며 CSS 에 로드될 때 가로세로좌표로 아이콘을 얻습니다.

ztree 에서 CSS 는 주로 두 가지 방법으로 아이콘을 로드합니다. 첫 번째: 배경 그림, 아이콘 크기 및 좌표 위치 < P > 에 따라 두 번째: 직접 그림 로드 < P > 두 가지 방법, 두 번째는 더 일반적이지만 데이터 양이 많은 경우 첫 번째 방법이 더 좋아 보입니다. 수정하려는 요소의 경우 먼저 웹 페이지를 찾아 특정 class 를 찾은 다음 여기에 와서 변경하면 됩니다.

3.Bootstrap 스타일 장식 ztree

최근 유행하는 Bootstrap 을 예로 들어 ztree 를 Bootstrap 스타일로 장식했다. 위에서 우리는 ztree 가 어떻게 스타일을 설정하는지 분석했다. 여기서 우리는 단지 그 중 하나를 선택해서 변경하기만 하면 된다. 배경 그림을 기반으로 하는 아이콘 설정을 많이 사용했기 때문에 직접 사진을 로드하는 것이 더 편하도록 설정하는 것이 좋다. 그렇지 않으면 변경된 데이터가 너무 많다. ... < P > 1) Ztree 도 흑백의 CSS, png 세트의 스타일 설정을 가지고 있다. 기존 CSS 파일 및 컬러 아이콘 바꾸기

페이지 프레임이 Bootstrap 인 경우 표시 시 루트 노드의 아이콘이 "깨진" 것으로 나타났습니다. 루트 노드 아이콘 위치는 Bootstrap 의 영향을 받고 CSS 파일에서 설정된 위치를 찾아 좌표를 변경합니다. < p 그러나, 우리는 다만 그것을 다른 아이콘을 바꿀 필요가 있다, 그것은 조금 맛을 보인다 (편의를 보여주기 위하여, 줄 바꿈) < P > 이것은 다른 작풍 이다, 당신이 다른 작풍을 사용자 정의 하 고 싶은 경우에, 위의 demo 에 따르면, 어렵지 않을 것 이다.

요약:

ztree 에는 아이콘을 사용자 정의하는 방법이 있지만 아이콘 표시가 불완전하면 해결할 수 없습니다. 마지막으로 CSS 파일을 변경하여 아이콘을 완전히 표시합니다. 이 문제를 해결하는 과정에서 ztree 아이콘의 로드 과정을 이해하고, 모든 연습자들은 CSS 에서 직접 ztree 의 스타일을 바꾸었다.