jQuery LigerUI 시작하기 Tutorial_jquery

최신 코드 받기
http://ligerui.googlecode.com에서 최신 코드를 다운로드할 수 있습니다.

소개
jQuery LigerUI는 jQuery를 기반으로 한 일련의 UI 컨트롤 조합으로, 간단하면서도 강력하며 웹 프런트엔드 인터페이스 솔루션을 빠르게 만드는 데 사용됩니다. 프론트엔드 컨트롤이기 때문에 서버와 아무런 관련이 없으며 .net, jsp, php 등 웹서버 환경에 적합할 수 있습니다. 현재 모든 플러그인의 패키지 및 압축 JS는 약 100K에 불과하여 매우 가볍습니다. 플러그인 개발 모델을 사용하여 디자인은 "단순성" 원칙을 기반으로 합니다. 각 플러그인은 최대한 독립적이며 확장 시 신뢰할 수 있습니다.

LigerUI란 무엇입니까
jQuery LigerUI는 기본, 탐색, 레이아웃, 양식, 테이블, 트리, 창 등을 포함한 컨트롤이 풍부합니다.

기본: 크기 조정, 끌기, 팁

탐색: 메뉴, 메뉴바, 툴바

레이아웃: 레이아웃, 탭

양식: Form, TextBox, Button, CheckBox, ComboBox, DateEditor, Radio, Spinner

Form : Grid

Tree: Tree

Window: Dialog, MessageBox, Window

Back to top
사용방법
jQuery LigerUI는 기반으로 설계되었습니다. jQuery에서 플러그인 모음입니다. 기본적으로 각 플러그인은 상대적으로 독립적입니다. 그러나 이들은 서로 밀접하게 관련되어 있으며 플러그인을 합리적으로 조립하여 다양하고 복잡한 기능을 달성할 수 있습니다. UI를 사용하면 사용자 친화적인 인터페이스를 빠르게 만드는 데 도움이 됩니다.

첫 번째 예

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

< ; 머리>






더 많은 매개변수 및 메소드 설정은 API를 참조하세요: http://www.ligerui.com/api/

위는 TextBox를 사용하는 예입니다. 다른 플러그인도 비슷한 방식으로 사용됩니다.

ligerUI 객체 사용 방법

플러그인을 적용하면 ligerui 객체가 반환되며 이를 전역 변수에 저장할 수 있습니다. 후속 작업에 사용될 수 있습니다. 변수 범위 제한 등으로 인해 시간 내에 저장되지 않는 경우 우리는 다른 방법으로 그것을 얻을 수 있습니다. 아래를 참조하세요.

전역 자바스크립트 변수에 저장:




코드 복사

코드는 다음과 같습니다. var g; $(function () { g = $("#txt1").ligerTextBox();

$.fn.ligerGetTextBoxManager 사용




코드 복사

코드는 다음과 같습니다.

var g = $( "#txt1").ligerGetTextBoxManager (); $.ligerui.get 메소드 사용

코드 복사

코드는 다음과 같습니다.

var g = $.ligerui.get('txt1')
세 번째 방법은 ligerui 개체의 ID를 사용하여 직접 가져오는 것입니다. 들어오는 매개변수에 ID가 지정되지 않은 경우 개체의 ID는 html 요소에 ID가 없으면 html 요소의 ID를 사용합니다. , 자동으로 생성됩니다. 그래서 여기서 우리는 그것을 얻기 위해 html 텍스트 상자의 ID를 사용할 수 있습니다.
html 요소의 id를 지정하지 않은 경우 첫 번째 또는 두 번째 방법을 사용할 수 있습니다.
사실 두 번째 메소드는 첫 번째 메소드로 대체될 수 있습니다. 실제로 ligerText는 반복적으로 호출될 수 있습니다. 차이점은 두 번째 호출 후에 ligerui 객체가 직접 반환된다는 것입니다. 두 번째 방법은 html 요소에 플러그인이 적용되었는지 확실하지 않을 때 사용할 수 있습니다.
다른 플러그인의 이름은 TextBox와 유사합니다.
이벤트 처리
이벤트를 처리하는 방법에는 두 가지가 있습니다. 하나는 매개변수로 전달하는 것이고, 다른 하나는 ligerui 객체의 바인딩 메소드를 호출하는 것입니다.

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

//방법 1
var g = $( "#txt1").ligerTextBox(
{
onChangeValue : function(value){alert(value);}
})

//방법 2
g.bind ('changeValue', function (value)
{
alert(value);
})

바인드 메소드 사용에는 "on"이 포함되지 않습니다.
이벤트 리스너는 여러 번 바인딩될 수 있습니다.
일부 이벤트의 경우 함수의 반환 값이 false이면 아직 트리거되지 않은 함수는 다시 실행되지 않습니다.
두 번째 방법(바인드)은 V1.1.3이 핵심 메커니즘을 사용한 이후에 도입되었습니다. .
메소드 호출
Ligerui 인터페이스를 사용하면 매우 편리합니다. ligerui 객체의 메소드를 호출하기만 하면 됩니다.

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

//여기서 설정한 텍스트 상자는 다음과 같습니다. edit
g .setDisabled();
//여기에 설정된 텍스트 상자를 편집할 수 있습니다
g.setEnabled()

이 방법을 사용할 수도 있습니다

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

$("#grid").ligerGrid('setEnabled ');

이 객체의 메소드는 API를 통해 확인할 수 있습니다.
객체의 메소드는 확장이 가능하며, 나중에 이를 소개하는 ligerui 확장에 대한 장이 있을 예정입니다.
두 번째 메소드는 V1.1.4에 추가되었습니다.
매개변수 값 가져오기
모든 ligerui 객체에는 get 메소드가 있습니다. 매개변수 값을 얻을 수 있습니다

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

var url = g.get(' url');

또는:

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

var url = $("#grid").ligerGrid('option','url')

동적 설정 매개변수
각 ligerui 객체에는 set 메소드가 있습니다. 매개변수를 동적으로 설정하는 데 사용됩니다. 예를 들어 그리드의 URL을 변경하려면 다음과 같이 작성할 수 있습니다.

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

g .set('url',url);

또는:

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

g.set({url:url})

플러그인을 사용할 수도 있습니다.

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

$("#grid").ligerGrid ('option','url',url);

두 번째 방법을 사용하면 여러 매개변수를 동시에 전달할 수 있습니다.
Set 메소드는 모든 플러그인의 속성을 설정하기 위한 통합 인터페이스입니다.
Set 메소드는 V1.1.3이 핵심 메커니즘을 사용한 이후에 도입되었습니다.
플러그인이 매개변수를 전달하는 방식은 V1.1.4에 도입되었습니다.
맨 위로
확장 방법
Ligerui의 기본 매개변수 및 메소드는 $.ligerDefaults라는 두 가지 입구를 정의합니다. 및 $.ligerMethods.

예를 들어 Grid의 기본 매개변수를 변경하거나 확장하려면 $.ligerDefaults.Grid를 변경할 수 있습니다.

기본 매개변수 확장
개체만 확장하면 됩니다. $.ligerDefaults.{Plugin}

예를 들어 테이블의 기본 헤더 제목을 변경하려는 경우:

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

if($.ligerDefaults.Grid)
{
$.ligerDefaults.Grid.title = "My Form"
}

현지화 지원 확장 프로그램
인 경우 객체만 확장하면 됩니다: $.ligerDefaults.{Plugin}String

예를 들어 "when loading" 테이블을 영어로 번역하려면:

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

if($.ligerDefaults.GridString)
{
$. ligerDefaults.GridString.loadingMessage = "loading.. .";
}

메서드 확장
은 $.ligerMethos.{Plugin}
여기서 Grid ligerui 객체에 경고 방법을 추가하세요:

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

$.extend($.ligerMethods.Grid,
{
alert : function ()
{
//한 가지 주목할 점은 이것이 ligerui 객체
var라는 것입니다. rowdata = this.getSelectedRow();
if (!rowdata)
alert('empty')
else
alert(rowdata.CustomerID)
}
}
);

function show()
{
//나중에 이렇게 사용할 수 있습니다
Var g = $(“#maingrid”).ligerGrid()
g.alert()
}