jQuery EasyUI 플러그인


jQuery EasyUI는 강력한 DataGrid(데이터 그리드), TreeGrid(트리 테이블), 패널(패널), 콤보(드롭다운 조합) 등을 포함하여 크로스 브라우저 웹 페이지를 생성하기 위한 완전한 구성 요소 컬렉션을 제공합니다. 사용자는 이러한 구성 요소를 조합하여 사용하거나 개별적으로 사용할 수 있습니다.

플러그인 목록

기본(기본)

  • Parser Parser

  • Easyloader Loader

  • Draggable Draggable

  • Droppable Droppable

  • 크기 조정 가능, 크기 조절 가능

  • 페이지 매김 페이지 매김

  • 검색창 검색 상자

  • 진행 표시줄 진행 표시줄

  • 도구 설명 프롬프트 상자

레이아웃(레이아웃)

  • 패널 패널

  • 탭

  • 아코디언 접이식 패널

  • 레이아웃 레이아웃

메뉴(메뉴)와 버튼(버튼)

  • 메뉴 메뉴

  • 링크버튼 링크 버튼

  • 메뉴 버튼 메뉴 버튼

  • 분할버튼 분할 버튼

양식(양식)

  • 양식 양식

  • Validatebox 유효성 검사 상자

  • 콤보 조합

  • 콤보박스 콤보 상자

  • 콤보트리 조합 트리

  • 콤보그리드 조합 그리드

  • 번호 상자

  • 날짜 상자

  • Datetimebox

  • Calendar

  • Spinner

  • Numberspinner 값 스피너

  • Timespinner 시간 스피너 창

  • rid(데이터 그리드) 및 tree(트리)

Datagrid

  • Propertygrid

  • Tree

  • Treegrid 트리 그리드

plugin

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

  • Properties

    • 속성은 jQuery.fn.{plugin}.defaults에 정의되어 있습니다. 예를 들어 대화 상자의 속성은 jQuery.fn.dialog.defaults에 정의되어 있습니다.

  • Event

    • Event(콜백 함수)도 jQuery.fn.{plugin}.defaults에 정의되어 있습니다.

  • Method

    • 메서드 호출 구문: $('selector').plugin('method', 매개변수);

  • 여기서:

selector는 jquery 개체 선택기입니다.

plugin은 플러그인 이름입니다.

method는 플러그인과 일치하는 기존 방법입니다.

parameter는 매개변수 개체이며 개체, 문자열...

메서드는 jQuery.fn.{plugin}.methods에 정의되어 있습니다. 각 메소드에는 jq와 param이라는 두 개의 매개변수가 있습니다. 첫 번째 매개변수 'jq'는 필수이며 jQuery 객체를 참조합니다. 두 번째 매개변수 'param'은 메소드에 전달되는 실제 매개변수를 나타냅니다. 예를 들어 대화 상자 구성 요소의 'mymove'라는 메서드를 확장하려면 코드는 다음과 같습니다. 

$.extend($.fn.dialog.methods, {
    mymove: function(jq, newposition){
		return jq.each(function(){
			$(this).dialog('move', newposition);
		});
    }
});

이제 'mymove' 메서드를 호출하여 대화 상자(대화 상자)를 지정된 위치로 이동할 수 있습니다. 

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

jQuery EasyUI 사용을 시작하세요

라이브러리를 다운로드하고 페이지에서 EasyUI CSS 및 JavaScript 파일을 참조하세요. 

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

필요한 EasyUI 파일을 참조한 후에는 마크업이나 JavaScript를 사용하여 EasyUI 구성 요소를 정의할 수 있습니다. 예를 들어, 축소 가능한 기능이 있는 패널 상단에 다음 HTML 코드를 작성합니다. 

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" iconCls="icon-save" collapsible="true">
    The panel content
</div>

마크업을 통해 구성 요소를 생성할 때 'data-options' 속성은 버전 1.3부터 ​​HTML5 호환 속성 이름을 지원하는 데 사용됩니다. 따라서 위 코드를 다음과 같이 다시 작성할 수 있습니다. 

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
    The panel content
</div>

아래 코드는 'onSelect' 이벤트를 바인딩하는 콤보박스를 만드는 방법을 보여줍니다.

rreee