jui(dwz)의 메뉴 트리를 아름다운 아이콘 세트로 변경

JUI는 무료 오픈소스 프레임워크로, 사용 초기에는 문서가 너무 적고 어디서부터 시작해야 할지 모르기 때문에 어려움을 겪게 됩니다. 귀하의 선택이 좋다는 것을 알게 되면 개발 효율성이 향상되고 동시에 사랑에 빠지게 될 것입니다.

현재 회사에서는 비용을 적게 지출한다는 원칙에 따라(사실 제한된 프런트엔드 수준 때문에) 여러 가지 소규모 프로젝트를 진행하고 있지만 학습 및 개발 과정에서 몇 가지 문제에 직면했습니다. , 하지만 모두 만족스럽게 해결되었으므로 함께 공유하고 배우고 발전하기를 바랍니다.

제 수준에는 한계가 있으니, 잘 못 쓰는 부분이 있으면 추가해주세요.

오늘이나 앞으로 며칠 동안 먼저 인터페이스를 아름답게 만드는 데 집중하겠습니다. 오늘은 아이콘 미화부터 시작하겠습니다.

먼저 공식 오리지널 메뉴 아이콘을 살펴보겠습니다. 통일감있고 심플해요.

다채롭고 개인화되었으며 공개적으로 변경된 아이콘을 살펴보겠습니다. 더 예뻐진 느낌? 눈이 반짝반짝 빛나는 것 같나요?

다음으로 자세히 설명하겠습니다.

처음에는 시스템이 기본 아이콘을 제공하기 때문에 더 이상 추가하거나 수정할 수 없다고 생각했습니다. 이는 작성자가 혁신이 부족한 인터페이스를 보고 싶어하지 않는다는 것입니다. 그래서 한번 해보자는 마음으로 시작하게 됐어요.

부트스트랩을 사용하면서 글꼴 아이콘에 관심이 많아 글꼴 파일을 다운로드하고 프레임 왼쪽의 메뉴 목록을 다음과 같이 변경했습니다.

<li><a href="@Url.Content("~/CarManage/Index")" target="navTab" rel="carindex"><i class="fa fa-bus fa-lg fa-fw"></i>  车辆管理</a></li>

네, 핵심 코드는 이 입니다. Fontawesome을 사용하면 이미지를 처리할 필요가 없다는 장점이 있습니다. 글꼴을 사용합니다. 텍스트 앞에

를 추가하면 됩니다.

원하는 아이콘을 찾을 수 있는 Fontawesome 주소를 첨부하세요: http://fontawesome.dashgame.com/

이렇게 하면 메뉴 앞에 아이콘이 추가됩니다. 예전보다 더 예뻐졌나요? 하지만 그래도 좀 경멸스럽지 않나요? 실제로 왜 그들은 모두 검은 색입니까?

자, 색상을 변경하는 방법을 계속해 보겠습니다. 사실, 당신이 똑똑하다면, 당신은 이미 이것을 알고 있을 것입니다. JUI에는 여러 템플릿 세트가 제공되며, 스타일을 추가하는 한 각 템플릿 세트는 CSS 파일에 해당합니다.

JUI 테마 디렉토리 열기

각 디렉토리 아래에 style.css 파일이 있습니다. 파일을 열고 하단에 맞춤 아이콘 색상을 추가하세요.

<span style="color: #008000;">/*</span><span style="color: #008000;">自定义</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">菜单图标的颜色</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.tree i</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#88c7cb</span>;}

각 테마에 해당 색상을 추가하고 싶다면 테마 색상에 맞게 직접 설정하세요.

이 시점에서 아름다운 나무 메뉴 아이콘이 추가되어 미려해졌습니다.