Intro

시작하기

본 문서는 IE 하위 버전에서는 제대로 작동하지 않습니다. 부디 IE9+ 이상의 브라우저를 사용해주세요.

AXISJ는 IE7+, Chrome, FF, Safari 브라우저에서 작동이 확인되었으며 보장됩니다. 또한 AXISJ를 구동하기 위해서는 jQuery 1.6이상이 필요합니다. AXISJ의 모든 소스는 다음의 주소(gitHub)에서 모두 다운로드 받으실 수 있고 사용상 질문도 하실 수 있습니다. https://github.com/axisj/axisj

AXISJ 설치

소스코드를 깃허브에서 다운로드(https://github.com/axisj-com/axisj/releases) 받으신 후 다음의 코드를 html 헤드에 삽입합니다.

<!-- css block -->
<link rel="stylesheet" type="text/css" href="/axisj/ui/arongi/AXJ.css">
<!-- css block -->
<!-- js block -->
<script type="text/javascript" src="/axisj/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/axisj/dist/AXJ.min.js"></script>

설치가 완료 되었습니다.

AXJ.js

액시스제이의 모든 구성요소를 일일이 다 설명해야 겠지만 먼저 액시스제이 라이브러리 전체를 구성할 수 있도록 만들어주는 코어 파일에 대해서는 짚고 넘어가야 겠습니다. AXJ.js파일은 환경설정, 공통 함수, 공용 클래스로 구성됩니다. 액시스제이를 사용할 때에 dist/AXJ.min.js파일을 사용한다면 따로 고민할 필요가 없겠지만 만일 개별 파일 단위로 쪼개여 사용하는 UI 요소만 선택적으로 사용하고자 한다면 다른 파일들은 사용하는 파일만 페이지에 추가하면 되지만 AXJ.js파일은 반드시 다른 UI 요소들 위에 선언되어야 합니다.

lib/AXJ.js 구성요소

AXConfig.js - 액시스제이 환경설정 변수 모음
AXUtil.js - Prototype함수, util함수, Class 패턴 지원
AXCore.js - UI Class원형, 공용으로 쓰이는 UI클래스들 (AXMask, AXScroll..)

위 3가지 파일을 합쳐서 AXJ.js 파일을 만들고 다시 Uglify처리하여 AXJ.coremin.js 파일을 만듭니다.

AXConfig

AXConfig에 대한 자세한 정보는 http://jdoc.axisj.com/AXConfig.html 에서 얻으 실 수 있습니다. UI를 구성하는 각종 설정변수를 사용자에 요구에 맞게 재 정의 하는데 사용합니다.

AXConfig = {
	AXContextMenu: {}
	AXEditor: {}
	AXGrid: {}
	AXInput: {}
	AXModal: {}
	AXProgress: {}
	AXReq: {}
	AXSelect: {}
	AXTab: {}
	AXTree: {}
	AXUpload5: {}
	mobile: {}
	weekDays: {}
}

예를 들어 AXGrid의 empty of list를 변경하려면, 아래와 같이 페이지 상단에 정의 할 수 있습니다. (스크립트는 선언 순서대로 실행되므로 위치가 잘못 되면 원하는 결과를 얻지 못할 수 있습니다.)

AXConfig.AXGrid.emptyListMSG = "목록이 없습니다";

AXUtil

AXUtil은 다른이름으로 axf로 쓰이기도 합니다. 보다 자세한 정보는 http://jdoc.axisj.com/axf.html 에서 얻을 수 있습니다.

<div id="div-axisj-axutil" class="script-result"></div>
<script>
(function(){
	$("#div-axisj-axutil").html( Object.toJSON(axf.browser) );
})();
</script>

Result

웹 애플리케이션을 개발하기 위해서 필요한, 웹 UI를 개발하기 위해 꼭 필요한 기본 유틸리티 함수가 정의 되어 있습니다.

AXCore

AXCore.js파일에 선언되어 있는 UI클래스 리스트

AXJ - UI 클래스 원형
AXReq - AJAX 통신처리 클래스
AXMask - 애플케이션 사용자 화면 입력금지 / 통신중 상태표시
AXNotification - 애플리케이션 상태 변경 알림처리
AXScroll - 레이어안에 레이어 스크롤
AXCalendar - 달력 테이블 생성
AXMultiSelect - 레이어 안에 아이템 다중선택 지원
AXResizable - 레이어 리사이즈 지원
AXContentMenuClass - 컨텍스트메뉴 타입 UI
AXPopOverClass - 팝오버 타입 UI
AXMobileModal - 모바일 페이지용 모달
jQuery extends - 제이쿼리 확장 함수

AXCore안에 정의된 UI클래스 들에 대해서는 아래에서 자세히 하나씩 짚어 가도록 하겠습니다. 그 외에 다양한 ui클래스들은 lib폴더 안에 있습니다. AXJ.min.js 파일에 모두 압축하여 배포하고 있습니다.

AXISJ 소개서

Opensource Javascript UI Library - https://github.com/axisj/axisj