jQuery를 EasyUI 플러그인

이전 : jQuery를 EasyUI 데이터 그리드 및 트리 위젯 - TreeGrid에 트리 그리드

jQuery를 EasyUI는 크로스 브라우저 웹 페이지를 등 강력한 데이터 그리드 (데이터 그리드), TreeGrid에 (트리 양식), 패널 (패널), 콤보 (드롭 다운 조합)을 포함하여 구성 요소의 완전한 세트를 생성, 제공. 이러한 구성 요소를 결합하여 사용자는 하나의 단독 사용될 수있다.

플러그인 목록

베이스 (기본)

레이아웃 (레이아웃)

메뉴 (메뉴) 및 버튼 (단추)

양식 (양식)

창 (윈도우)

데이터 그리드 (데이터 그리드) 및 트리 (나무)

위젯

Easyui은 각 구성 요소는 속성, 메서드 및 이벤트가 있습니다. 사용자는 쉽게 이러한 구성 요소를 확장 할 수 있습니다.

재산

그것은 jQuery.fn. {플러그인} .defaults에 정의되어 있습니다. 예를 들어, 대화 속성은 jQuery.fn.dialog.defaults에 정의되어 있습니다.

행사

이벤트 (콜백 함수)는 jQuery.fn. {플러그인} .defaults에 정의되어 있습니다.

방법

메소드 호출 구문 : $ ( '선택') 플러그인 ( '방법', 매개 변수);

상기

JQuery와 선택기 오브젝트 선택기이다.
플러그인은 플러그인 이름입니다.
플러그 방법은 기존의 방법과 일치합니다.
매개 변수는 파라미터 객체는 객체, 문자열이 될 수 있습니다 ...

이 방법은 jQuery.fn. {플러그인} .methods에 정의되어 있습니다. JQ와 PARAM 각 메서드는 두 개의 매개 변수가 있습니다. 첫 번째 매개 변수 'JQ'는 jQuery 오브젝트에 대한 참조가 필요합니다. 두 번째 매개 변수 'PARAM'는 전달 된 실제 메소드 매개 변수를 의미한다. 예를 들어, 다음과 같이 'mymove'방식이라고 대화 요소 방법을 확장 :

$ .extend ($. Fn.dialog.methods, {
    mymove : 기능 (JQ, 새로운 위치) {
		() {(기능을 jq.each 반환
			$ (이) .dialog ( '이동', 새로운 위치);
		});
    }
});

지금 당신은 지정된 위치에 대화 상자 (대화)를 이동하는 'mymove'메서드를 호출 할 수 있습니다 :

$ ( '# DD'). 대화 ( 'mymove', {
    왼쪽 : (200)
    상단 : 100
});

내가 jQuery를 EasyUI를 사용하기 시작

라이브러리를 다운로드 및 참조 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)
    } ">

이전 : jQuery를 EasyUI 데이터 그리드 및 트리 위젯 - TreeGrid에 트리 그리드

다음 : jQuery를 EasyUI는 확장

jQuery EasyUI 코스

jEasyUI 신청

jEasyUI 드래그 앤 드롭

jEasyUI 메뉴 및 버튼

jEasyUI 레이아웃

jEasyUI 데이터 그리드

jEasyUI 창

jEasyUI 트리 메뉴

jEasyUI 형태

jEasyUI 참조 설명서