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() 메서드의 차이점을 보여줍니다.

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

$(function(){
// 처음 호출 시 _create() 및 _init()가 실행됩니다.
$("div").mywidget();
/ / 위젯이 div에서 인스턴스화되었습니다. 이때 _init() 메서드만 실행됩니다.
$("div").mywidget()
// 위젯 삭제
$(" div" ).mywidget("destroy");
// 위젯이 소멸되었으므로 이때 _create() 및 _init() 메서드가 모두 실행됩니다.
$("div").mywidget ();
});

이벤트
사용자 정의 이벤트가 있는 경우 위젯에 캡슐화된 _trigger() 메서드를 사용하여 이를 처리할 수 있습니다. this._trigger( type, event, data) 이고, 첫 번째 매개변수는 시간 유형, 두 번째 매개변수는 이벤트 객체, 세 번째 매개변수는 이벤트에 전달할 매개변수입니다.

다음으로 간단한 jquery UI 위젯 코드를 사용하여 위젯 개발 방법을 설명하겠습니다.

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

//이 위젯은 텍스트 상자를 수정합니다. CSS 자체는 없지만 jquery ui CSS 프레임워크
(function($){
//UI의 스타일을 사용합니다. 기본적으로 jquery의 ui 접두어와 위젯 이름
$.widget("이 붙습니다. ui.textboxdesignator", {
//이 위젯에는 옵션이 없습니다.
options:{
},
_init: function(){
//다음과 같은 요소인지 확인하세요.
데코레이팅해야 함 if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) {
return;
}
if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr( "type").toLowerCase() === "password")) {
if (this.element.attr("tagName").toLowerCase() === "input")
return; >}
//this .element는 이 위젯을 호출하는 요소입니다.
var e = this.element
//ui-widget 위젯의 기본 스타일, ui-state-default, 기본값 상태 스타일; ui-corner-all 둥근 모서리(css3 기반, IE에서는 작동하지 않음)
this.element.addClass("ui-widget ui-state-default ui-corner-all"); >//호버 효과 및 활성 효과 추가
this.element.mouseover(function(){
e.addClass("ui-state-hover");
}).mouseout(function(){
e.removeClass("ui-state- hover");
}).mousedown(function(){
e.addClass("ui-state-active");
}). mouseup(function(){
e.removeClass ("ui-state-active");
})
},
//파기되면 위젯에 의해 추가된 스타일을 제거합니다
destroy:function(){
this.element .removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active")
}
})
})(jQuery)


이 위젯을 사용할 때 jquery, jquery.ui.core.js, jquery.ui.widget.js 파일, CSS 파일을 참조해야 합니다. jquery.ui.core.css 및 jquery.ui.theme이 필요합니다. 두 개의 .css 파일은

이 위젯을 호출할 때 $("***")를 사용합니다.