Latest web development tutorials

jQuery를 UI 테마

모두의 jQuery UI 플러그인은 개발자가 원활하게 모양에 UI 위젯을 통합하고 자신의 사이트 나 응용 프로그램의 느낌을 할 수 있습니다. 각 위젯은 CSS 스타일에 의해 정의 된, 2 개의 스타일 정보를 포함 : 표준 jQuery를 UI CSS 프레임 워크 스타일과 특정 플러그인 스타일.

CSS jQuery를 UI 프레임 워크는 제목, 내용, 혹은 클릭 가능한 영역으로 작은 구성 요소의 역할을 나타내는 클래스의 의미 적 표현을 제공한다. 이들은 모두 작은 부분에서 일치하고, 클릭 탭 (탭), 아코디언 (아코디언) 또는 단추 (버튼) 같은이 ui-state-default , 클래스가 클릭 할 수 있음을 보여 가. 사용자가 이러한 요소의 상단에 놓을 때 클래스가된다 ui-state-hover , 다음 이러한 요소에 선출되기 ui-state-active . 일관성 클래스는 작용 상태에서 유사한 역할을 갖는 구성 요소 또는 모든 구성 요소의 모양 일관된 성능을 만든다.

CSS 스타일의 프레임은 별도의 파일로 캡슐화라는 ui.theme.css . 를 통해이 파일 ThemeRoller의 응용 프로그램을 수정할 수 있습니다. 프레임 스타일은 그래서 색상, 배경 이미지, 아이콘과만큼,이 건물의 모양과 느낌에 영향을 미칠 포함되어 있습니다. 그래서 이들은 "안전한"스타일, 그것은 플러그인 기능에 영향을주지 않습니다. 이러한 분리는 개발자에 사용할 수 있다는 것을 의미한다 theme.css 사용자 정의 모양과 느낌을 만드는 색상 및 이미지 파일을 수정합니다. 때문에 플러그인 또는 버그 수정의 미래는 사용할 수 있습니다, 이러한 테마에 의해 수정없이 사용할 수 있습니다.

프레임 스타일 커버는보고가 포함되어야하므로, 느낌 때문에 특정 플러그인에있는 모든 추가 위젯 크기, 여백, 여백 등의 기능 구조 스타일 규칙을 허용 스타일 시트,이 스타일 시트 포함, 위치, 플로트. 각 위젯 스타일 시트 themes/base 및 플러그인 이름과 같은 "jquery.ui.accordion.css"와 폴더입니다. 그들은 함께 스타일을 커버하는 프레임 워크를 제공하기 때문에 이러한 패턴은 신중하게 스크립트를 편집해야합니다.

우리는 플러그인 JQuery와, jQuery를 UI CSS 프레임 워크는 쉽게 최종 사용자가 사용자 정의 테마를 사용하여 플러그인을 할 수있게 만드는 모든 개발자 바랍니다.

테마

다음은 일반적인 절차에 관한 jQuery를 UI 위젯의 세 가지이다 :

  • ThemeRoller 항목을 다운로드 : 첫 번째 테마를 만들어 사용하는 것입니다 ThemeRoller를 생성하고 테마를 다운로드 할 수 있습니다. 이 응용 프로그램은 새로운 생성합니다 ui.theme.css 파일을 필요한 모든 배경 이미지 및 아이콘 스프라이트 포함 images 폴더에 있습니다. 이 방법은 생성하는 방식의 주제를 유지하는 것이 첫 번째이지만, 옵션은 제한 ThemeRoller 사용자 정의를 제공합니다.
  • CSS 파일을 수정 컨트롤의 모양과 느낌을 촉진하기 위해, 기본 테마 (매끄러움)을 선택할 수 있습니다 시작, 또는 다음 중 하나를 ThemeRoller 시작에 의해 생성 된 주제로부터 조정 ui.theme.css 파일, 별도의 플러그인 또는를 스타일 시트. 예를 들어, 용이하게 모든 버튼의 반경의 각도가 다른 UI 구성 요소들의 값 상이한 조정하거나 경로 마법사를 변경하는 지정 아이콘을 사용할 수있다. 스타일은 조금 통해, 당신은 심지어 UI에 하나 이상의 테마를 사용할 수 있습니다 다양합니다. 쉽게 유지 관리를 위해 제안 된 변경 사항은 ui.theme.css 파일과 이미지를.
  • 다시 쓰기 사용자 정의 CSS를 : 컨트롤에게 모습을 극대화하고 느낄하려면 플러그인 프레임 워크 클래스 또는 특정 스타일 시트를 사용하지 않고, 각각의 위젯과 CSS에 다시 쓰기 시작할 수 있습니다. 당신이보고 싶은 느낌이 CSS를 수정하거나 매우 사용자 정의 태그를 사용하여 달성 할 수있는 경우에, 당신은이 방법을 사용할 수 있습니다. 이 방법은 CSS의 측면에서 깊은 전문 지식을 필요로하고, 향후 플러그인 수동 업데이트가 필요합니다.

ThemeRoller, jQuery를 UI의 CSS 프레임 워크, 디자인뿐만 아니라 사용자 정의 테마를 사용하여