최고의 jQuery를 EasyUI 플러그인 튜토리얼 2024년, 이 튜토리얼에서는 플러그인 목록,위젯,내가 jQuery를 EasyUI를 사용하기 시작,를 배울 수 있습니다.
jQuery를 EasyUI는 크로스 브라우저 웹 페이지를 등 강력한 데이터 그리드 (데이터 그리드), TreeGrid에 (트리 양식), 패널 (패널), 콤보 (드롭 다운 조합)을 포함하여 구성 요소의 완전한 세트를 생성, 제공. 이러한 구성 요소를 결합하여 사용자는 하나의 단독 사용될 수있다.
Easyui은 각 구성 요소는 속성, 메서드 및 이벤트가 있습니다. 사용자는 쉽게 이러한 구성 요소를 확장 할 수 있습니다.
그것은 jQuery.fn. {플러그인} .defaults에 정의되어 있습니다. 예를 들어, 대화 속성은 jQuery.fn.dialog.defaults에 정의되어 있습니다.
이벤트 (콜백 함수)는 jQuery.fn. {플러그인} .defaults에 정의되어 있습니다.
메소드 호출 구문 : $ ( '선택') 플러그인 ( '방법', 매개 변수);
상기
이 방법은 jQuery.fn. {플러그인} .methods에 정의되어 있습니다. JQ와 PARAM 각 메서드는 두 개의 매개 변수가 있습니다. 첫 번째 매개 변수 'JQ'는 jQuery 오브젝트에 대한 참조가 필요합니다. 두 번째 매개 변수 'PARAM'는 전달 된 실제 메소드 매개 변수를 의미한다. 예를 들어, 다음과 같이 'mymove'방식이라고 대화 요소 방법을 확장 :
$ .extend ($. Fn.dialog.methods, {
mymove : 기능 (JQ, 새로운 위치) {
() {(기능을 jq.each 반환
$ (이) .dialog ( '이동', 새로운 위치);
});
}
});
지금 당신은 지정된 위치에 대화 상자 (대화)를 이동하는 'mymove'메서드를 호출 할 수 있습니다 :
$ ( '# DD'). 대화 ( 'mymove', {
왼쪽 : (200)
상단 : 100
});
라이브러리를 다운로드 및 참조 EasyUI CSS와 자바 스크립트 파일의 페이지입니다.
<링크 REL = "스타일 시트"유형 = "텍스트 / CSS는"HREF = "easyui / 테마 / 기본 / easyui.css"> <링크 REL = "스타일 시트"유형 = "텍스트 / CSS는"HREF = "easyui / 테마 / icon.css"> <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "easyui / JQuery와-1.7.2.min.js"> </ script> <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "easyui / jquery.easyui.min.js"> </ script>
당신이 EasyUI 필요한 파일을 참조하면 태그 또는 자바 스크립트의 사용을 통해 EasyUI 구성 요소를 정의 할 수 있습니다. 예를 들어, 폴딩 기능을 갖는 상판을하면 다음과 같은 HTML 코드를 작성해야
<사업부 아이디 = "P"클래스 = "easyui 패널"스타일 = "너비 : 500 픽셀, 높이 200 픽셀; 패딩 : 10px;"
제목 = "내 패널은"iconCls는 = "아이콘-저장"축소 = "진정한">
패널 내용
</ DIV>
, 표시하여 구성 요소를 만들 때 '데이터 옵션'속성은 버전 1.3 HTML5 호환 이후 속성 이름을 지원하는 데 사용됩니다. 다음과 같이 그래서 당신은 위의 코드를 다시 작성할 수 있습니다 :
<사업부 아이디 = "P"클래스 = "easyui 패널"스타일 = "너비 : 500 픽셀, 높이 200 픽셀; 패딩 : 10px;"
제목 = "내 패널"데이터 옵션 = "iconCls '아이콘이 절약', 축소 : 진정한">
패널 내용
</ DIV>
다음 코드는 바운드 콤보 상자 'onSelect를'이벤트를 만드는 방법을 보여줍니다.
<입력 클래스 = "easyui - 콤보"이름 = "언어"
데이터 옵션 = "
URL : 'combobox_data.json'
valueField '아이디',
에 textField : '텍스트',
panelHeight : '자동'
onSelect를 : 기능 (기록) {
경고 (record.text)
} ">