jQuery UI_jquery에서 다양한 테마를 적용하는 방법

처음에는 제가 직접해서 CSS 파일을 수정하려고 했는데요. 이것은 매우 감사할 일이 아닌 것으로 판명되었습니다.

한번은 jQuery UI 홈페이지[http://jqueryui.com/home]에 머물다가 갑자기 내 관심을 끌었던 한 단어가 있었습니다: [themeable] , is' 이게 "가변 테마"가 무슨 뜻인가요? 그래서 [http://jqueryui.com/themeroller/]에 접속해서 아래 사진에서 이곳을 찾았습니다. 공식 홈페이지에서는 테마 변경을 '테마롤러'라고 부르더군요. 수준은 평균입니다. Xin Daya는 자신이 얼마나 만족하는지 모릅니다.

　

첫 번째 TAB 페이지에는 [우리만의 테마 스타일에서 벗어나세요]라고 적혀 있습니다. 아래의 각 하위 항목을 연 후 필요한 스타일을 정의한 후 다운로드 버튼을 클릭하여 정의한 테마 스타일 세트를 다운로드할 수 있습니다. CSS 파일을 직접 변경하는 것보다 훨씬 편리합니다.

두 번째 TAB 페이지를 열어보니 다양한 테마가 준비되어 있었습니다. 저처럼 게으른 사람에게는 아주 적합한 스타일이에요. 제가 원하는 스타일은 항상 하나거든요.

원하는 스타일을 선택하고 다운로드 버튼을 클릭하면 자동으로 다운로드 페이지로 이동하며, 원하는 테마 스타일 패키지를 다운로드할 수 있습니다. 다운로드 페이지의 [테마] 영역에 있는 드롭다운 상자에서 필요한 테마를 선택할 수도 있습니다. 저는 [Cupertino]를 선택했습니다.

두 개의 압축 패키지를 다운로드합니다(참고: 다른 테마 스타일, 압축 패키지 이름은 동일합니다. 저장할 때 덮어쓰지 마세요). 압축을 푼 후 실제로는 CSS 폴더에 다른 내용만 있는 것을 발견했습니다. 다만 테마 패키지의 리소스가 다릅니다(테마 패키지 리소스에는 이미지와 CSS 파일이 포함됨). 다른 모든 것은 동일하고, 폴더 파일 이름도 동일하며, 파일에 포함된 요소의 이름도 동일합니다.

애플리케이션 프로젝트에서는 프로젝트에 테마 패키지와 [jquery-ui-1.8.4.custom.min.js] 파일만 추가하면 변수 테마 jQuery UI . 사진과 같이:

jQuery UI를 사용해야 하는 페이지에 CSS 파일과 JS 파일에 대한 참조를 추가하기만 하면 됩니다. 저는 주로 마스터 페이지에 추가합니다.

코드 복사 코드는 다음과 같습니다.

원할 때 jQuery UI 교체 테마 스타일을 추가할 때 CSS에 대한 참조 경로만 수정하면 됩니다. 아래 사진처럼 이 색상으로 표시된 부분이 수정될 곳입니다.

코드 복사 코드는 다음과 같습니다.

여기서【
http://jqueryui.com/demos/tabs/]는 jQuery UI의 일부 사용 예를 소개하는 주소입니다. 탭 컨트롤. 사용 지침의 페이지 레이아웃은 다음과 같습니다.

왼쪽: 표시하려는 개체를 선택합니다.

중간: 런타임 중 실제 효과가 표시되는 곳입니다. [소스 보기]를 클릭하면 소스 코드가 표시됩니다.

오른쪽: 선택한 개체의 일부 확장 기능의 예입니다. 다른 기능을 선택하면 표시 영역이 그에 따라 변경되고 소스 코드 영역도 그에 따라 변경됩니다. 위 그림, 탭 컨트롤 탭 페이지는 원래 클릭해야 했던 것에서 마우스로만 위로 이동하면 되는 것으로 전환되었습니다.

마지막으로

jQuery UI를 다시 한 번 강력 추천합니다.