JQuery 및 jQuery UI CSS 레이아웃의 기본 사항

jQuery 및 jQuery UI CSS 제작자는 라이브러리의 내부를 문서화하는 작업을 잘 수행합니다. CSS 관점에서, jqueryui에서 찾은 자료. com은 다양한 장소에서 본 출력을 만드는 데 사용되는 스타일에 대해 알려줍니다. 다음은 문서의 첫 페이지 배치 방법에 대한 좋은 아이디어입니다.

이 페이지에서 가장 먼저 눈에 띄는 점 중 하나는 개발자가 가능할 때마다 ThemeRoller를 사용하여 변경하는 것을 권장한다는 것입니다. 그러나 ThemeRoller가 단순히 작업을 수행하지 않는 경우가 많으므로보다 전통적인 방식으로 수정해야합니다.

클래스는 두 파일로 나누어지며, 각 파일에는 스타일이 있습니다.

• jquery. 너. 핵심. css: 어떤 식 으로든 구조 요소에 영향을주는 모든 스타일을 포함합니다. 여기에는

  • 레이아웃 도우미: 화면상의 전체 객체 레이아웃을 결정합니다. 보조 기술과 상호 작용할 수있게합니다. 필요에 따라 레이아웃을 재설정하는 방법을 제공합니다.

  • 상호 작용 큐: 객체가 비활성화되는시기를 정의합니다.

  • 아이콘: 아이콘 상태를 지정합니다.

  • 오버레이: 오버레이의 크기와 위치를 결정합니다.

• jquery. 너. 테마. css: 색상, 글꼴 및 배경과 같은 주제 요소에 영향을 미치는 스타일을 정의합니다.

  • 구성 요소 컨테이너: 다양한 개체 컨테이너 내의 내용 모양을 지정합니다. 컨테이너에는 일반적으로 전체 개체, 개체 머리글 및 개체 데이터 (스타일 내의 콘텐츠로 지정)가 포함됩니다.

  • 상호 작용 상태: 특정 상호 작용 상태가 발생할 때 객체의 모양을 결정합니다. 네 가지 상호 작용 상태는 기본값 (개체에서 아무 일도 일어나지 않을 때), 마우스 오버시 마우스 커서가 개체 위에있을 때, 활성 상태 일 때 (사용자가 실제로 개체와 작업을 수행하는 경우) 및 포커스 객체를 선택했지만 아무 것도하지 않습니다.)

  • 상호 작용 단서: 특정 상태에있는 객체의 모양을 결정하여 사용자가 객체의 상태를 이해할 수있게합니다. 상호 작용 단서는 강조 표시 (객체 또는 상호 작용을 위해 선택된 콘텐츠); 오류 (개체와 오류가 발생했습니다); 오류 텍스트 (내용에 오류가 발생했습니다. 일반적으로 텍스트가 개체 내에 있음). 비활성화 됨 (객체 또는 내용이 비활성화 됨). primary (객체는 객체의 계층 구조에서 기본 또는 첫 번째 수준 객체 임); 및 보조 (객체는 객체의 계층에서 2 차 또는 2 차 객체입니다).

    아이콘:

  • 객체와 함께 사용되는 아이콘의 상태와 위치를 정의합니다. 상태와 위치는 별도로 제어됩니다. 상태 정보는 아이콘이 헤더의 일부인지 내용인지 여부를 결정합니다. 또한 아이콘의 상태에 따라 서식, 기본, 호버, 활성, 강조 표시, 오류 및 오류 텍스트를 결정합니다. 아이콘은 아이콘 이름과 같은 개별적으로 배치됩니다. ui-icon-carat-1-n. 아이콘은 실제로 파일의 아이콘 부분의 상태 및 이미지 섹션의 일부로 블록 형식으로 정의됩니다.

    여기에서 위젯 관련 아이콘 이미지를 볼 수 있습니다.

    기본 아이콘 이미지가 여기에 나타납니다.

    여기서 활성 아이콘 이미지와 강조 표시에 사용 된 아이콘 이미지를 찾을 수 있습니다.

    응용 프로그램에 오류가 발생하면 여기에 아이콘 목록이 표시됩니다.

    모서리 반지름:

  • 여러 개체에 둥근 모서리를 만듭니다. 오버레이:

  • 오버레이 내의 내용의 서식과 오버레이 그림자의 서식을 결정합니다 (즉, 앞에있는 개체 뒤에 개체가 있음을 볼 수 있습니다). 작동 방식을 더 잘 이해하기 위해 실제 파일을 살펴 보는 것이 좋습니다. http: // 코드와 같은 위치에서 첫 번째 파일을 찾을 수 있습니다. jquery. co.kr / ui / 1 9. 2 / 테마 / 기본 / jquery. 너. 핵심. css 어디 http: // 코드. jquery. com / ui /는 기본 URL, 1입니다. 9. 2는 해당 jQuery 또는 jQuery UI 버전 및 themes / base / jquery입니다. 너. 테마. css는 특정 파일 위치입니다.

다른 버전의 jQuery 또는 jQuery UI 용 CSS 사본을 얻으려면 URL의 버전 번호 부분 만 변경하십시오. 두 번째 파일은 http: // 코드와 같은 위치에 있습니다. jquery. co.kr / ui / 1 9. 2 / 테마 / 기본 / jquery. 너. 테마. CSS. 이것은 jquery를 볼 때 보게 될 것입니다. 너. 핵심. CSS.

/ * ui-icon-seek-first는 더 이상 사용되지 않고 대신 ui-icon-seek-start를 사용합니다. * /

스타일은 주석 처리되어 있으므로 사용할 수 없습니다. 그러나 노트는 여전히 사용할 스타일을 알려주기 때문에 여전히 중요합니다.