jQuery UI 및 ThemeRoller

• 할 수있다 10, 2024

웹 사이트 또는 웹 응용 프로그램의 사용자 인터페이스를 쉽고 빠르게 디자인하고 jQuery를 포함하려면 jQuery UI를 확인하십시오. 여기에는 새 프로젝트에 이러한 기능을 쉽게 추가 할 수있는 턴키 CSS 및 jQuery 함수 콤보 패키지가 있습니다.

사이트를 살펴 봅시다. 데모 및 문서 링크에는 드래그 앤 드롭, 탭 및 전환과 같은 jQuery 대화식 플러그인 목록이 있습니다. 각 플러그인에는 테스트를위한 데모, 문서 및 샘플 잘라 내기 및 붙여 넣기 코드가 있습니다.

턴키 파일을 가져 오려면 jQuery ThemeRoller의 테마 링크를 클릭하십시오. 기본 CSS는 베어 본 흰색과 회색 테마입니다. 다운로드 버튼을 클릭하여 그대로 사용할 수 있지만 시작하기위한 화려한 테마 갤러리도 있습니다. 갤러리 영역에는 몇 가지 테마 축소판이 있습니다. 원하는 것을 클릭하십시오. Roll Your Own 탭을 클릭 한 다음 테마 다운로드 버튼을 클릭하여 해당 테마를 다운로드 할 수 있습니다. 그러나 ThemeRoller 엔진으로 테마를 트윗하기 시작하면 재미가 시작됩니다. 사용자 지정할 수있는 11 가지 옵션이 있습니다. 대부분의 옵션을 사용하면 배경 질감 및 색상, 테두리 색상 및 텍스트 및 아이콘 색상을 변경할 수 있습니다.

테마를 트윗 할 수있는 몇 가지 옵션이 있습니다.

• 글꼴 설정 : 글꼴 모음, 무게 및 크기를 변경할 수 있습니다.
  
  
• 코너 반경 : 코너 반경을 변경할 수 있습니다. 각 테마에는 기본 둥근 탭 스타일이 있지만 모서리 크기를 변경하거나 사각형 탭의 경우 0으로 설정할 수 있습니다. (탭은 현재 CSS3에서 지원되지 않는 CSS3를 기반으로합니다.)
  
  
• 머리글 / 도구 모음 : 탭 뒤에있는 영역 및 일정 플러그인과 같은 머리글 영역에 대한 색상 값을 설정할 수 있습니다.
  
  
• 내용 : 여기에서 기본 내용 영역의 색상을 설정할 수 있습니다. 테두리 선택 또는 테두리 없음에 따라 매우 다른 디자인을 얻을 수 있습니다.
  
  
• 클릭 가능한 기본 상태 : 탭과 버튼의 기본 (비활성) 모양을 제어합니다.
  
  
• 클릭 가능한 호버 상태 :이 컨트롤은 호버 상태의 탭과 버튼 모양을 나타냅니다.
  
  
• 클릭 가능한 활성 상태 : 활성 페이지의 탭 및 단추 모양을 제어합니다.
  
  
• 강조 표시 : 강조 표시된 영역의 배경, 테두리, 텍스트 및 아이콘 색상.
  
  
• 오류 : 오류 메시지의 배경, 테두리, 텍스트 및 아이콘 색상.
  
  
• 오버레이 용 모달 화면 : 배경색과 질감을 제어합니다.
  
  
• 그림자 효과 : 그림자 효과의 그림자 불투명도, 두께, 오프셋 및 모서리를 제어합니다.
  
  

jquery-ui-x.x.xx.custom.zip을 다운로드하고 패키지를 압축하면 3 개의 폴더 (css, development-bundle 및 js)와 index.html 파일이 표시됩니다. index.html 파일은 테마로 스타일이 지정된 플러그인의 데모입니다. css 및 js 폴더를 기본 디렉토리에 넣고 index.html 파일의 코드를 플러그인을 표시하려는 위치의 사이트 코드로 복사 / 붙여 넣기하십시오.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

비디오 지침: jQuery Tutorial for Beginners - 29 - Themeroller (할 수있다 2024).