jQuery UI CSS Framework_jquery 기반 위젯 개발 경험

jQuery UI의 두 가지 핵심 CSS 파일은 ui.core.css와 ui.theme.css입니다. 이 두 가지 CSS 스타일은 전체 jQuery UI 기반 인터페이스를 통해 실행되며 jQuery ui ThemeRoller를 통해 자신만의 스타일을 생성할 수 있습니다.
.ui-helper-hidden: 요소에 display:none 적용
.ui-helper-hidden-accessible: 요소의 절대 위치를 보이지 않도록 설정
.ui-helper-clearfix: 적용 대상 floats 상위 요소
를 래핑하는 속성. ui-helper-zfix: iframe 요소 적용 범위 문제를 해결하는 데 적합합니다.
.ui-state-default: 요소의 기본 스타일
.ui-state- hover: 요소가 hover 상태 스타일
.ui-state-focus: 요소가 포커스 상태에 있을 때의 스타일
.ui-state-active: 요소가 활성 상태에 있을 때의 스타일(보통 다음으로 선택됨) 마우스)
.ui-state-hightlight :상태를 강조 표시해야 하는 스타일
.ui-state-error:요소가 오류 상태인 스타일(일반적으로 오류 정보를 설명)
.ui-state- error-text:오류 텍스트를 설명하는 스타일
ui-state-disabled: 비활성화되는 요소의 스타일
.ui-priority-primary: 버튼이 필요한 경우 첫 번째 수준 버튼에 적용됩니다. Zengji와 구별됩니다. 굵은 글꼴이 적용됩니다.
.ui-priority-secondary: 두 번째 수준의 버튼에 적용됩니다. 이전 시나리오에 따라 일반 두께 글꼴이 적용되며
아이콘 요소에 비해 약간 투명합니다. 유형: CSS 프레임워크는 기본 아이콘 세트를 제공합니다. 일반적으로 사용되는 방법은
.ui-corner-tl 아이콘을 지정하는 "ui-icon ui-icon-****"입니다. 왼쪽 상단 모서리가 둥글게 처리되어 있으며 css3 기반으로 IE는
을 지원하지 않습니다.ui-corner-tr: 오른쪽 상단 모서리가 둥글게 처리되어 있으며 css3 기반으로 IE는
을 지원하지 않습니다.ui-corner-bl: 왼쪽 하단 모서리가 둥글며 css3 기반, IE는
을 지원하지 않습니다.ui-corner-br: 오른쪽 하단 모서리가 둥글고 CSS3 기반, IE는
.ui-corner-top을 지원하지 않습니다. 상단 두 모서리가 둥글게 처리되어 있으며 CSS3를 기반으로 하며 IE는
을 지원하지 않습니다.ui-corner-bottom: 하단 두 모서리가 둥글게 처리되어 있으며 CSS3을 기반으로 하며 IE는
을 지원하지 않습니다.ui-corner-right: 오른쪽 두 모서리는 둥글게 처리되어 있습니다. CSS3 기반이며 IE는
.ui를 지원하지 않습니다. -corner-left: 왼쪽 두 모서리가 둥글며 CSS3 기반으로 IE는
.ui-corner-all을 지원하지 않습니다. 모든 모서리가 둥글게 처리되어 있으며 CSS3를 기반으로 하며 IE는
.ui-widget-overlay: Mask
.ui-widget-shadow:Shadow
를 지원하지 않습니다. jQuery ui 위젯 작성 시 사용자 정의 UI를 만들 수 있습니다. 이러한 CSS를 적절하게 사용하여 jQuery UI 테마와 호환됩니다.
jQuery UI는 몇 가지 기본 위젯을 제공하지만 위젯을 생성하는 데 좋은 메커니즘을 제공합니다. jQuery CSS 프레임워크에는 기본 CSS 스타일(색상, 글꼴 크기, 아이콘 등과 같은 시각적 및 감각적)이 포함되어 있는 반면, UI CSS에서는 여백, 패딩, 위치와 같은 위젯 구조를 구축하는 CSS를 정의해야 합니다. , 등. 위젯을 개발할 때에도 이 원칙을 따라야 합니다. 그러면 jquery 테마 롤러를 잘 활용하여 스타일을 적용하고 전반적인 일관성을 유지할 수 있습니다. 이전 기사에서는 jquery CSS 프레임워크를 간략하게 소개했습니다. 다음은 jquery ui 개발 가이드라인을 간략하게 소개합니다.
Jquery의 공식 문서에는 이 내용이 매우 명확하게 나와 있습니다. 일반적으로 jquery ui는 jquery.ui.widget.js 파일에서 상속됩니다. 이 파일은 위젯 객체를 생성하는 팩토리 메소드를 제공합니다. 메소드는 $.widget(문자열 이름, 옵션 프로토타입)입니다. 다음은 이 클래스에서 제공하는 메소드 및 속성에 대한 간략한 소개입니다. 이는 위젯이 생성될 때 재정의됩니다.
destroy(): dom 객체에서 위젯 인스턴스를 제거합니다. 이 메소드는 일반적으로 위젯을 개발할 때 필요합니다. dom 요소
옵션에 추가한 스타일과 동작, dom 구조를 제거하는 것입니다. 여기에 저장되는 것은 위젯의 구성 정보입니다. 위젯을 생성할 때 일부 구성 매개변수를 설정해야 합니다.
요소: 위젯이 작동하는 DOM 개체입니다.
enable() 및 비활성화(): 이 두 가지 메소드는 위젯을 비활성화하고 활성화하는 것입니다. 실제로는 options.disabled를 수정하는 것입니다.
위젯을 생성할 때 재정의해야 하는 두 가지 비공개 메서드도 있습니다. 위젯에서는 모든 비공개 메소드 앞에 "_"가 붙습니다.
_create(): 위젯을 생성하는 메소드입니다. 페이지에서 위젯을 호출하면 이 메소드가 실행되어 위젯이 생성됩니다. 대부분의 위젯 동작과 구조는 여기에서 생성됩니다.
_init(): 이 메서드는 대부분의 경우 재정의되지 않습니다. 이 메서드는 위젯을 빌드할 때 _create 후에 실행됩니다.
관련 문서 중에서:
_create(): 위젯이 빌드될 때 메소드가 실행되고, 위젯이 빌드되고 다시 초기화될 때 _init() 메소드가 실행됩니다. destroy 메소드는 위젯이 제거될 때 실행됩니다.
_setOption(): 옵션의 속성 설정을 제공하는 메소드입니다. 일반적으로 옵션의 매개변수에 특별한 처리(속성 설정 시 검증, 유형 변환, 작업 트리거 등)가 필요하지 않은 경우 이 메소드가 필요합니다. 재정의됩니다.
다음 코드는 _create() 메서드와 _init() 메서드의 차이점을 보여줍니다.