AXISJ 소개서

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

CSS Guide

ui/[테마폴더명]/AXJ.min.css 파일을 페이지에 삽입하면 사용할 수 있는 AXISJ의 CSS클래스에 대해서 설명합니다.

Table

리스트형 테이블 .AXGridTable 적용 

<table cellpadding="0" cellspacing="0" class="AXGridTable">
    <colgroup>
        <col width="60" /><col /><col />
    </colgroup>
    <thead>
	    <tr>
	        <td> </td>
	        <td colspan="2">발생건수</td>
	    </tr>
    </thead>
    <tbody>
	    <tr>
	        <td>사고</td>
	        <td>55건</td>
	        <td>99</td>
	    </tr>
	    <tr>
	        <td>사고</td>
	        <td>55건</td>
	        <td>99</td>
	    </tr>
    </tbody>
</table>

Result

  발생건수
사고 55건 99
사고 55건 99

폼형 테이블 .AXFormTable 적용 

<table cellpadding="0" cellspacing="0" class="AXFormTable">
	<colgroup>
		<col width="60" /><col /><col />
	</colgroup>
	<tbody>
	<tr>
		<th>사고</th>
		<td class="blue">55건</td>
		<td class="red">99</td>
	</tr>
	<tr class="gray"> <!-- red|green|blue|yellow 사용가능 -->
		<th>사고</th>
		<td>55건</td>
		<td class="green">99</td>
	</tr>
	</tbody>
</table>

Result

사고 55건 99
사고 55건 99

Button

.AXButton 클래스에 Red, Green, Blue, Classic클래스를 합성하면 각각 다른 상태의 버튼으로 만들 수 있습니다. AXButton 클래는 button태그외에도 A, Input태그에도 사용할 수 있습니다.

<div class="tag-result">
    <button class="AXButton">버튼</button>
    <button class="AXButton Red">버튼</button>
    <button class="AXButton Green">버튼</button>
    <button class="AXButton Blue">버튼</button>
    <button class="AXButton Classic">버튼</button>
	<a class="AXButton">버튼</a>
	<input class="AXButton" type="button" value="버튼">

	<button class="AXButton Classic" disabled="disabled">버튼</button>
</div>

Result

버튼

AXIcon

또한 AXICON과 조합하여 사용하면 손쉽게 버튼에 아이콘이미지를 사용할 수 있습니다. 액시콘은 http://axicon.axisj.com에서 확인 하세요.

<div class="tag-result">
	<button class="AXButton"><i class="axi axi-check-circle-o"></i> 버튼</button>
	<button class="AXButton Red"><i class="axi axi-trash-o"></i> 버튼</button>
	<button class="AXButton Green"><i class="axi axi-clock-o"></i> 버튼</button>
	<button class="AXButton Blue"><i class="axi axi-facebook-square"></i> 버튼</button>
	<button class="AXButton Classic"><i class="axi axi-camera-retro"></i> 버튼</button>
	<a class="AXButton"><i class="axi axi-thumbs-o-up"></i> 버튼</a>
</div>

Result

버튼

Input

.AXInput 클래스 사용하여 input태그를 꾸밀 수 있습니다.

<div class="tag-result">
	<input type="text" name="x" class="AXInput" />
	<input type="text" name="x" class="AXInput W100" placeholder="W100" />
	<input type="text" name="x" class="AXInput W50" placeholder="W50" />
	<button class="AXButton">확인</button>
	<div class="DH10"></div>
	<input type="text" name="x" class="AXInput" placeholder="readonly" readonly="readonly" />
	<input type="text" name="x" class="AXInput" placeholder="disabled" disabled="disabled" />
</div>

Result

테마

액시스제이(AXISJ)에는 현재 5가지의 CSS테마 세트가 공개되어 있습니다. 현재 가용한 테마는 arongi, bulldog, flybasket, kakao, cocker이며 http://dev.axisj.com에 가시면 하단의 테마 선택 링크를 이용해 CSS 테마를 변경 해볼 수 있습니다.

AXNotification

애플리케이션의 상태가 변경되었을 때나 사용자에게 확인을 요청 할 때에 AXNotification클래스를 이용하여 알림처리 할 수 있습니다. 

<div class="tag-result">
	<button class="AXButton" id="com-toast-open">토스트 열기</button>
	<button class="AXButton" id="com-dialog-open">다이얼로그 열기</button>
</div>
<script>
	(function(){
		$("#com-toast-open").click(function(){
			toast.push("토스트를 열었습니다. 잠시후 사라집니다.");
		});
		$("#com-dialog-open").click(function(){
			dialog.push("다이얼로그");
		});
	})();
</script>

Result

토스트에 문자열을 전달하는 경우 기본상태로 토스트를 열게 되지만 type정의하면 토스트의 상태를 다르게 열수 있습니다. 다음은 토스트의 type선택 예제 입니다.

Toast 타입

<div class="tag-result">
	<button class="AXButton" id="com-toast-wran-open">Warning 토스트</button>
	<button class="AXButton" id="com-toast-caution-open">Caution 토스트</button>
</div>
<script>
	(function(){
		$("#com-toast-wran-open").click(function(){
			toast.push({type:"Warning", body:"토스트를 열었습니다. 잠시후 사라집니다."});
		});
		$("#com-toast-caution-open").click(function(){
			toast.push({type:"Caution", body:"토스트를 열었습니다. 확인을 누르면 사라집니다."});
		});
	})();
</script>

Result

Dialog

<div class="tag-result">
	<button class="AXButton" id="com-dialog-wran-open">Warning 다이얼로그</button>
	<button class="AXButton" id="com-dialog-caution-open">Caution 다이얼로그</button>
	<button class="AXButton" id="com-dialog-button-open">Button 다이얼로그</button>
</div>
<script>
	(function(){
		$("#com-dialog-wran-open").click(function(){
			dialog.push({type:"Warning", body:"다이얼로그를 열었습니다."});
		});
		$("#com-dialog-caution-open").click(function(){
			dialog.push({type:"Caution", body:"다이얼로그를 열었습니다."});
		});
		$("#com-dialog-button-open").click(function(){
			dialog.push({
				type: "Caution",
				body:"토스트를 열었습니다. 잠시후 사라집니다.",
				buttons:[
					{buttonValue:'button1', buttonClass:'Red W100', onClick:function(arg){alert(arg);}, data:'data1'},
					{buttonValue:'button2', buttonClass:'Blue', onClick:function(arg){alert(arg);}, data:'data2'},
					{buttonValue:'button3', buttonClass:'Green', onClick:function(arg){alert(arg);}, data:'data3'}
				]
			});
		});
	})();
</script>

Result

Button 다이얼로그는 다이얼로그에 버튼을 사용자 정의하는 예제입니다. 이런 방식으로 다이얼로그를 이용하여 간단한 사용자 선택을 받을 수 있습니다. 다이얼로그를 이용해서는 window.alert, confirm, prompt처럼 브라우저를 홀드하는 기능을 사용할 수는 없기 때문에 주의 해야 합니다.

AXMask

웹 애플리케이션 전체또는 특정 영역을 불투명한 레이어로 덮어서 웹애플리케이션의 UI를 사용 불능 상태로 만들거나 비동기 데이터 호출중에 사용자에게 답답함을 줄여주는 역할을 합니다. 

<div class="tag-result">
	<button class="AXButton" id="com-mask-open">마스크시작</button>
</div>
<script>
	(function(){
		$("#com-mask-open").click(function(){
			mask.open();
			toast.push("2초후에 마스크가 닫힙니다.");
			setTimeout(function(){
				mask.close();
			}, 2000);
		});
	})();
</script>

Result

액시스제이를 임포트하면 Global 개체로 미리 선언된 mask를 사용할 수 있습니다. 편의상 mask로 정의 되어 있지만 필요할 때엔 바꾸어 정의 할 수 있습니다.

Custom MASK

<div class="tag-result">
	<button class="AXButton" id="com-custom-mask-open">로딩 마스크시작</button>
</div>
<script>
	(function(){
		var loading_mask = new AXMask(); // 새로운 인스턴스 생성
		loading_mask.setConfig(); // 초기화
		loading_mask.setContent({ // 마스크 컨텐츠 정의
			width:200, height:200,
			html: '<div class="loading" style="color:#ffffff;">' +
			'<i class="axi axi-spinner axi-spin" style="font-size:100px;"></i>' +
			'<div>Loading..</div>' +
			'</div>'
		});
		// 애플리케이션 상단에 정의 하면 별도의 loading_mask를 생성할 수 있습니다.
		$("#com-custom-mask-open").click(function(){
			loading_mask.open();
			toast.push("2초후에 마스크가 닫힙니다.");
			setTimeout(function(){
				loading_mask.close();
			}, 2000);
		});
	})();
</script>

Result

AXInput

AXInput.number

input 태그에 아이디를 부여하고 bind 구문을 이용하여 다양한 UI컴포넌트를 사용할 수 있습니다. (주의 할점은 아이디가 부여되지 않는 엘리먼트에는 스크립트 바인딩이 제대로 되지 않을 수 있습니다. 또 하나 아이디는 반드시 페이지에서 유일한 값이 어야 겠지요)

<div class="tag-result">
	<input type="text" name="x" class="AXInput W60" id="ax-input-number" />
	<input type="text" name="x" class="AXInput W60" id="ax-input-number-1" />
</div>
<script>
	(function(){
		$("#ax-input-number").bindNumber().val(100); // 마지막에 val은 제이쿼리 메소드 입니다. 이렇게 체이닝이 되어서 보다 심플하지요
		$("#ax-input-number-1").bindNumber({min:0, max:110});
		// 최소, 최대 범위 설정
	})();
</script>

Result

AXInput.checkbox

<div class="tag-result" id="ax-input-checkbox">
	<label>
		<input type="checkbox" name="mycheck2" value="3" />
		Javascript
	</label>
	<label>
		<input type="checkbox" name="mycheck2" value="2" />
		Javascript
	</label>

	<label>
		<input type="radio" name="mycheck3" value="3" />
		Javascript
	</label>
	<label>
		<input type="radio" name="mycheck3" value="2" />
		Javascript
	</label>
</div>
<script>
	(function(){
		$('#ax-input-checkbox').find('input[type=checkbox]').bindChecked();
		$('#ax-input-checkbox').find('input[type=radio]').bindChecked();
	})();
</script>

Result

체크박스와 라디오박스는 각각의 브라우저마다 저마다 다른 랜더링으로 웹 개발자들을 괴롭히고 있습니다. 여러가지 방법으로 개선시킬 수 있겠지만 모든 브라우저를 커버 하기엔 역부족입니다. 역시나 자바스크립트의 도움을 받아서 해결 하는 것이 최선 입니다.
AXISJ의 .bindChecked() 를 이용하면 모든 브라우저에도 동일한 디자인 적용이 가능합니다.

AXInput.switch

Input태그에 bindSwitch 메소드를 이용하면 스위치 UI로 사용할 수 있습니다. 스위치 UI는 Input value로 미리 정의한 스위치의 on, off값으로 사용자의 입력을 제한하고 사용자에게 편안함을 제공합니다. 스위치 UI가 bind된 개체를 스크립트로 제어 할수도 있습니다. .setValueInput() 메소드를 이용하면 개체의 상태를 스크립트로 제어 할 수 있습니다. 

<div class="tag-result">
	<input type="text" name="x" class="AXInput W50" id="ax-input-switch" value="PM" />
	<input type="text" name="x" class="AXInput W70" id="ax-input-switch-1" />
	<div class="DH10"></div>
	<div>
		<button class="AXButton" onclick="$('#ax-input-switch').setValueInput('AM');">AM</button>
		<button class="AXButton" onclick="$('#ax-input-switch').setValueInput('PM');">PM</button>
		<button class="AXButton" onclick="$('#ax-input-switch').bindInputDisabled();">toggle Disabled</button>
	</div>
</div>
<script>
(function(){
	$("#ax-input-switch").bindSwitch({
		off:"AM", // off 값을 정의합니다.
		on:"PM", // on 값을 정의합니다.
		onchange:function(){
			toast.push(Object.toJSON(this)); // 스위치 상태값이 변경 될 때 이벤트
		}
	});

	$("#ax-input-switch-1").bindSwitch({
		off:"UP",
		on:"DOWN",
		onchange:function(){
			toast.push(Object.toJSON(this));
		}
	});
})();
</script>

Result

AXInput.segment

세그먼트 UI는 Input태그값을 bindSegment 속성에 정의한 options 리스트의 값중에 하나가 입력되도록 제한합니다. 경우에 따라서는 onchange함수를 활용하여 애플케이션의 화면제어를 하는데 활용 하기도 합니다. 세크먼트 역시 setValueInput를 이용하여 스크립트로 제어 할 수 있습니다. 

<div class="tag-result">
	<input type="text" name="x" class="AXInput W150" id="ax-input-segment" value="1" />
	<div class="DH10"></div>
	<div>
		<button class="AXButton" onclick="$('#ax-input-segment').setValueInput('0');">왼쪽</button>
		<button class="AXButton" onclick="$('#ax-input-segment').setValueInput('1');">가운데</button>
		<button class="AXButton" onclick="$('#ax-input-segment').setValueInput('2');">오른쪽</button>
	</div>
</div>
<script>
	(function(){
		$("#ax-input-segment").bindSegment({
			options:[
				{optionValue:0, optionText:"왼쪽"},
				{optionValue:1, optionText:"가운데"},
				{optionValue:2, optionText:"오른쪽"}
			],
			onchange:function(){
				//this.targetID, this.options, this.selectedIndex, this.selectedOption
				toast.push(Object.toJSON(this));
			}
		});
	})();
</script>

Result

Tip

AXInput UI들은 bind되는 Input태그의 크기에 따라 UI의 크기가 결정됩니다.

AXInput.slider

슬라이더 UI는 입력받을 숫자의 범위가 정해진 값을 다루는데 적합한 UI 입니다. bindTwinSlider는 속성 separator값으로 분리되는 범위값을 입력받는데 용이 합니다. 

<div class="tag-result">
	<input type="text" name="x" class="AXInput W200" id="ax-input-slider" value="50" />
	<div class="DH10"></div>
	<div id="ax-input-slider-display"></div>
	<div class="DH20"></div>

	<input type="text" name="x" class="AXInput W300" id="ax-input-slider-twin" value="200~600" />
	<div class="DH10"></div>
	<div id="ax-input-slider-twin-display"></div>
</div>
<script>
	(function(){
		var display = $("#ax-input-slider-display"), display_twin = $("#ax-input-slider-twin-display");
		$("#ax-input-slider").bindSlider({
			min:0, max:100, snap:10,
			unit:"%",
			onchange: function(){
				display.html(Object.toJSON(this));
			}
		});
		// 범위를 입력받는데 최적화된 bindTwinSlider
		$("#ax-input-slider-twin").bindTwinSlider({
			min:0, max:1000, separator:"~", unit:"", snap:100,
			onchange: function(){
				display_twin.html(Object.toJSON(this));
			}
		});
	})();
</script>

Result

AXInput.selector

셀렉터 UI는 Input박스에 사용자가 타이핑한 검색어를 미리 정의된 또는 서버의 검색결과에 따라 정의된 Options 의 아이템을 선택하게 하거나 옵션없는 사용자 값을 입력받는데 사용합니다. 웹 애플리케이션입장에서는 사용자의 입력을 정해진 옵션안에서 제한 하거나 경우에 따라 자유로운 입력이 가능하게 하므로 많은 애플리케이션에서 사용되고 있다. 예제에서는 미리정의된 Options로 셀렉터를 설정하는 방법과 AJAX통신결과에 따른 Options 설정 방법을 소개합니다.

Script 정의방식

<div class="tag-result">
	<input type="text" name="x" class="AXInput W200" id="ax-input-selector" value="" />
</div>
<script>
	(function(){
		$("#ax-input-selector").bindSelector({
			appendable:true, // options 에 없는 값 입력 허용 여부
			options:[
				{optionValue:1, optionText:"Seoul"},
				{optionValue:2, optionText:"대구"},
				{optionValue:3, optionText:"대전"},
				{optionValue:4, optionText:"(창원"},
				{optionValue:5, optionText:"[마산"},
				{optionValue:6, optionText:"구례"},
				{optionValue:7, optionText:"제주도"},
				{optionValue:8, optionText:"전주"},
				{optionValue:4, optionText:"창원"},
				{optionValue:5, optionText:"마산"},
				{optionValue:6, optionText:"구례"},
				{optionValue:7, optionText:"제주도"},
				{optionValue:8, optionText:"전주"},
				{optionValue:9, optionText:"Gwangju"}
			],
			onchange: function(){
				console.log(this);
			}
		});
	})();
</script>

Result

AJAX 정의방식

<div class="tag-result">
	<input type="text" name="x" class="AXInput W200" id="ax-input-selector-ajax" value="" />
</div>
<script>
	(function(){
		$("#ax-input-selector-ajax").bindSelector({
			direction: "bottom", // selector 박스가 열리는 방향
			appendable: false,
			method: "GET",
			ajaxUrl: "data/selectorData.txt",
			ajaxPars: "",
			optionPrintLength: "all", // options 아이템 출력갯수 제한 "all"이면 전체 출력
			onchange: function(){
				console.log(this);
			}
		});
	})();
</script>

Result

data/selectorData.txt

{
	result:"ok",
	options:[
		{optionValue:1, optionText:" Seoul", desc:"부가설명글"},
		{optionValue:2, optionText:"대구"},
		{optionValue:3, optionText:"대전", optionDesc:"부가설명글"},
		{optionValue:4, optionText:"창원"},
		{optionValue:5, optionText:"마산"},
		{optionValue:6, optionText:"구례"},
		{optionValue:7, optionText:"제주도"},
		{optionValue:8, optionText:"전주"},
		{optionValue:4, optionText:"창원"},
		{optionValue:5, optionText:"마산"},
		{optionValue:6, optionText:"구례"},
		{optionValue:7, optionText:"제주도"},
		{optionValue:8, optionText:"전주"},
		{optionValue:9, optionText:"Gwangju"}
	],
	etcs:""
}

data/selectorData.txt 에서 리턴하는 JSON을 셀렉터 UI가 받아서 셀렉터의 Options로 처리 하게 됩니다. 여기서 하나더 들어가면 셀렉터 Input태그에 타이핑을 하는 순간 콘솔 > 네트워크를 확인화면 사용자가 타이핑을 하다 잠심 대기하는 순간 서버로 결과를 요청하게 됩니다. 이때 data/selectorData.txt의 파라미터로 Input의 Name을 파라미터의 키이름으로 하고 입력된 문자열을 파라미터 키 값으로 하여 전송 되게 됩니다.

필자는 이런 방식으로 해두면 셀렉터 UI가 모두 완성이 될거라 생각했었다. 하지만 오산 이었다. 그 잘못의 첫번째는 서버의 응답조건을 모두 획일화 할 수 없다는 점 이었고. 두번째는 AJAX통신의 요청 방식이 단순하지 않다는 점 이었다. 그런 이유로 두가지 상황에 대한 대안을 마련하게 되었다.

Options 키 값 정의

<div class="tag-result">
	<input type="text" name="x" class="AXInput W200" id="ax-input-selector-02" value="" />
</div>
<script>
	(function(){
		$("#ax-input-selector-02").bindSelector({
			// reserveKeys의 등장 UI 내부에서 사용될 키를 변경 할 수 있게 되었다.
			reserveKeys: {
				options: "list",
				optionValue: "CD",
				optionText: "NM"
			},
			direction: "bottom", // selector 박스가 열리는 방향
			method: "GET", // 정의하지 않으면 "POST"
			ajaxUrl: "data/selectorData-02.txt",
			ajaxPars: "",
			onchange: function(){
				console.log(this);
			}
		});
	})();
</script>

Result

Custom search result

<div class="tag-result">
	<input type="text" name="x" class="AXInput W200" id="ax-input-selector-03" value="" />
</div>
<script>
	(function(){
		$("#ax-input-selector-03").bindSelector({
			reserveKeys: {
				optionValue: "CD",
				optionText: "NM"
			},
			onsearch : function(objID, objVal, callBack) { // {Function} - 값 변경 이벤트 콜백함수 (optional)
				// return options; 로 결과를 즉시응답처리 할 수도 있겠다.
				setTimeout(function(){
					callBack({
						options:[
							{CD:1, NM:"Seoul", desc:"ABCD"},
							{CD:2, NM:"대구"},
							{CD:3, NM:"대전"},
							{CD:4, NM:"(창원"},
							{CD:5, NM:"[마산"},
							{CD:6, NM:"구례"},
							{CD:7, NM:"제주도"},
							{CD:8, NM:"전주"},
							{CD:4, NM:"창원"},
							{CD:5, NM:"마산"},
							{CD:6, NM:"구례"},
							{CD:7, NM:"제주도"},
							{CD:8, NM:"전주"},
							{CD:9, NM:"Gwangju"}
						]
					});
				}, 500);
			}
		});
	})();
</script>

Result

AXInput.date

데이트 UI는 Input에 날짜형식의 문자열 입력을 도와주는 UI입니다. 달력패널을 이용하여 날짜를 선택하는 기능과 Input 박스 안에서 사용자 타이핑을 감지하여 날짜형식으로 문자열 변경처리 하는 기능이 있습니다. 

<div class="tag-result">
	<input type="text" name="x" class="AXInput W100" id="ax-input-date" value="" />
</div>
<script>
	(function(){
		$("#ax-input-date").bindDate({
			onchange: function(){
				console.log(Object.toJSON(this));
			}
		}).val( (new Date()).print() ); // date prototype 확장은 AXISJ core에서 http://jdoc.axisj.com/Date.html#print
	})();
</script>

Result

달력의 출력위치 옵션, 년도만 입력, 월만 입력, 시간과 함께 입력 등의 처리가 가능하고 기간형 날짜입력에도 대응 하기 위해 TwinDate도 사용할 수 있고 또는 시작날짜 개체와 끝날짜 개체간에 before, after 설정으로 입력을 제한시킬 수 있습니다.

달력 출력위치 설정

<div class="tag-result">
	<input type="text" name="x" class="AXInput W100" id="ax-input-date-01" value="" />
</div>
<script>
	(function(){
		$("#ax-input-date-01").bindDate({
			align:"right", // left|center|right
			valign:"bottom", // top|middle|bottom
			separator:"/", // 년도,월,일 사이에 구분자
			onchange: function(){
				console.log(Object.toJSON(this));
			}
		}).val( (new Date()).print("yyyy/mm/dd") );
	})();
</script>

Result

년도, 월 입력모드

<div class="tag-result">
	<input type="text" name="x" class="AXInput W60" id="ax-input-date-02" value="" />
	<input type="text" name="x" class="AXInput W80" id="ax-input-date-03" value="" />
</div>
<script>
	(function(){
		$("#ax-input-date-02").bindDate({selectType:"y"});
		$("#ax-input-date-03").bindDate({selectType:"m"});
	})();
</script>

Result

날짜와 시간

<div class="tag-result">
	<input type="text" name="x" class="AXInput W150" id="ax-input-date-04" value="" />
</div>
<script>
	(function(){
		$("#ax-input-date-04").bindDateTime();
	})();
</script>

Result

기간 선택

<div class="tag-result">
	<input type="text" name="x" class="AXInput W90" id="ax-input-date-05" value="" />
	~
	<input type="text" name="x" class="AXInput W100" id="ax-input-date-06" value="" />
</div>
<script>
	(function(){
		$("#ax-input-date-06").bindTwinDate({
			valign:"bottom",
			startTargetID:"ax-input-date-05"
		});
	})();
</script>

Result

~

기간 선택의 다른 방식

<div class="tag-result">
	<input type="text" name="x" class="AXInput W100" id="ax-input-date-07" value="" />
	~
	<input type="text" name="x" class="AXInput W100" id="ax-input-date-08" value="" />
</div>
<script>
	(function(){
		$("#ax-input-date-07").bindDate({
			onchange:{
				earlierThan:"ax-input-date-08", err:"종료일보다 빠른 날짜를 선택하세요"
			}
		});

		$("#ax-input-date-08").bindDate({
			onchange:{
				laterThan:"ax-input-date-07", err:"시작일보다 느린 날짜를 선택하세요"
			}
		});
	})();
</script>

Result

~

earlierThan, laterThan에 체크하려는 Input ID를 설정하여 Input간의 입력을 제한 할 수 있습니다.

AXInput.tagSelector

미리 정의된 옵션아이템 중에서 한개이상의 아이템을 Input의 값으로 담아서 선택하는 UI입니다. 

<div class="tag-result">
	<input type="text" name="x" class="AXInput W300" id="ax-input-tagselector" value="" />
	<div class="DH10"></div>
	<div>
		<button class="AXButton" type="button" onclick="$('#ax-input-tagselector').bindTagSelector_setItem([
			{optionValue:8, optionText:'전주'}, {optionValue:4, optionText:'창원'}
		]);">필드에 값 채우기</button>
	</div>
</div>
<script>
	(function(){
		$("#ax-input-tagselector").bindTagSelector({
			selectorWidth: false, //selectorWidth 값이 없으면 인풋의 너비를 이용.
			optionValue_inputName: "tagValue", // 태그가 추가될 때 생성되는 optionValue input hidden name값
			optionText_inputName: "tagText", // 태그가 추가될 때 생성되는 optionText input hidden name값
			/*
			reserveKeys: {
				options: "options", // ajax 를 이용해서 options 리스트 구성할 때. 사용
				optionValue: "optionValue",
				optionText: "optionText"
			},
			*/
			options: [
				{optionValue:1, optionText:"Seoul"},
				{optionValue:2, optionText:"대구"},
				{optionValue:3, optionText:"대전"},
				{optionValue:4, optionText:"(창원"},
				{optionValue:5, optionText:"[마산"},
				{optionValue:6, optionText:"구례"},
				{optionValue:7, optionText:"제주도"},
				{optionValue:8, optionText:"전주"},
				{optionValue:4, optionText:"창원"},
				{optionValue:5, optionText:"마산"},
				{optionValue:6, optionText:"구례"},
				{optionValue:7, optionText:"제주도"},
				{optionValue:8, optionText:"전주"},
				{optionValue:9, optionText:"Gwangju"}
			]
		});
	})();
</script>

Result

이렇게 bindTagSelector를 이용해 UI를 연결하면 입력된 값을 가져가는 방법이 궁금해 집니다. 여러가지 방법을 고민했지만 결론은 input type="hidden" 아이템을 문서안에 추가하여 form에서 serialize할 때 또는 submit할 때 그대로 사용할 수 있게 고려 하였습니다. 이 때 input.hidden의 name 은 optionValue_inputName에서 정의한 값이 됩니다. 이해가 되지 않는 다면 form을 serialize 또는 submit해보면 확인이 가능하고 요소검사로도 input.hidden의 존재를 확인 할 수 있습니다.

AXInput.pattern

이미 다양한 형태의 입력을 제한하고 편리하게 만들어주는 UI가 있지만 그 외에도 다양한 형태로 입력 문자열을 제한해야하는 요구가 있습니다. 지금 이 글을 보고 있는 여러분 께서도 그런 요구가 있을 것으로 생각됩니다. 이런 다양한 요구를 처리 하기 위해 패턴 UI가 만들어 졌습니다. 패턴 UI는 미리정의된 패턴이나 사용자 정의 패턴으로 Input 입력값을 제한 할 수 있습니다. 

<div class="tag-result">

	<div>통화(소수점 포함, allow_minus:true, max_round:3, max_length:10)</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-money-target" value="-abc123,.45-67891234" />
	<div class="DH10"></div>

	<div>통화(소수점 포함 안함, maxLength: 7)</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-moneyint-target" value="123.45678908" />
	<div class="DH10"></div>

	<div>숫자(소수점 포함, allow_minus: true,
		max_length: 10,
		max_round: 5)</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-number-target" value="123.123456789" />
	<div class="DH10"></div>

	<div>숫자(소수점 포함 안함, maxLength: 7)</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-numberint-target" value="123.4234234324" />
	<div class="DH10"></div>

	<div>날짜</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-date-target" value="" />
	<div class="DH10"></div>

	<div>날짜+시간</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-datetime-target" value="" />
	<div class="DH10"></div>

	<div>시간</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-time-target" value="" />
	<div class="DH10"></div>

	<div>날짜 (/)</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-date01-target" value="" />
	<div class="DH10"></div>

	<div>날짜+시간 (년월일)</div>
	<input type="text" class="AXInput W200" id="ax-bind-pattern-date02-target" value="" />
	<div class="DH10"></div>

	<div>부분패스워드 및 기타</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-etc-target" value="" size="20" />
	<div class="DH10"></div>

	<div>사업자번호</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-bizno-target" value="" />
	<div class="DH10"></div>

	<div>전화번호</div>
	<input type="text" class="AXInput" id="ax-bind-pattern-phone-target" value="" />

</div>
<script>
	(function(){
		$("#ax-bind-pattern-money-target").bindPattern({
			pattern: "money",
			allow_minus: true,
			max_length: 10,
			max_round: 3
		});
		$("#ax-bind-pattern-moneyint-target").bindPattern({
			pattern: "moneyint",
			max_length: 7
		});
		$("#ax-bind-pattern-number-target").bindPattern({
			pattern: "number",
			allow_minus: true,
			max_length: 10,
			max_round: 5
		});
		$("#ax-bind-pattern-numberint-target").bindPattern({
			pattern: "numberint",
			max_length: 7
		});
		$("#ax-bind-pattern-date-target").bindPattern({pattern: "date"});
		$("#ax-bind-pattern-datetime-target").bindPattern({pattern: "datetime"});
		$("#ax-bind-pattern-time-target").bindPattern({pattern: "time"});
		$("#ax-bind-pattern-date01-target").bindPattern({pattern: "date(/)"});
		$("#ax-bind-pattern-date02-target").bindPattern({pattern: "datetime(년월일)"});
		$("#ax-bind-pattern-bizno-target").bindPattern({
			pattern: "bizno"
		});
		$("#ax-bind-pattern-phone-target").bindPattern({
			pattern: "phone"
		});
	})();
</script>

Result

통화(소수점 포함, allow_minus:true, max_round:3, max_length:10)
통화(소수점 포함 안함, maxLength: 7)
숫자(소수점 포함, allow_minus: true, max_length: 10, max_round: 5)
숫자(소수점 포함 안함, maxLength: 7)
날짜
날짜+시간
시간
날짜 (/)
날짜+시간 (년월일)
부분패스워드 및 기타
사업자번호
전화번호

bindPattern으로 바인드 된 Input에 값을 부여하거나 가져오기 위해서는 다음의 메소드를 이용해야 합니다. 애플리케이션이 시작될 때에는 Input의 Value를 가져와서 패턴처리 하지만 사용자 입력이 실제로 발생하여 이벤트가 있는 경우에는 자동으로 패턴처리 되지만 스크립트로 값을 부여하는 경우에는 다음의 메소드를 이용하여야 합니다. 

$('#ax-bind-pattern-bizno-target').bindPatternGetText();
$('#ax-bind-pattern-bizno-target').bindPatternGetDisplayText();
$('#ax-bind-pattern-bizno-target').bindPatternSetText('988,000.12');

AXSelect

Select 태그도 checkbox나 radiobox처럼 특별한 오브젝트로 랜더링되어서(IE가 유별나긴 하지만) 웹 애프리케이션의 완성도를 떨어뜨리는 요소중에 하나입니다. bindSelect를 이용하여 UI를 바인딩 하게되면 모든 브라우저에서 일관된 UI를 구현할 수 있습니다. 다소 까다로운 Select Options의 동적처리 또한 bindSelect로 손쉽게 구현할 수 있습니다. 

<div class="tag-result">
	<select name="" class="AXSelect" id="ui-select-00">
		<option value="">-- 선택하세요 --</option>
		<option value="1">%가나다라마바사</option>
		<option value="2" selected="selected">abcdefg</option>
		<option value="3">abcdefg 가나다라마바사</option>
		<option value="4">abcdefg 가나다라마바사</option>
		<option value="5">abcdefg 가나다라마바사</option>
		<option value="6">abcdefg 가나다라마바사</option>
	</select>
	<input type="button" value="아이템추가" class="AXButton"
	       onclick="$('#ui-select-00').bindSelectAddOptions([{optionValue:234, optionText:'액시스제이'}]);" />
	<input type="button" value="아이템제거" class="AXButton"
	       onclick="$('#ui-select-00').bindSelectRemoveOptions([{optionValue:234, optionText:'액시스제이'}]);" />
</div>
<script>
	(function(){
		$("#ui-select-00").bindSelect({
			//maxHeight: 100, // 옵션박스의 크기를 제한합니다.
			onchange: function(){
				console.log(this);
			}
		});
	})();
</script>

Result

bindSelect의 기본형입니다. Select의 options를 이용하여 AXSelect를 만들어냅니다. bindSelectAddOptions bindSelectRemoveOptions를 이용하여 Select options를 추가 삭제 할 수 있습니다.

AXSelect.script

Script로 Select options을 정의하는 방식

<div class="tag-result">
	<select name="" class="AXSelect" id="ui-select-01"></select>
</div>
<script>
	(function(){
		$("#ui-select-01").bindSelect({
			options:[
				{optionValue:1, optionText:"1 : ABCDEFG"},
				{optionValue:2, optionText:"2 : 09123123"},
				{optionValue:3, optionText:"2 : 1222"},
				{optionValue:4, optionText:"2 : AXISJ"},
				{optionValue:5, optionText:"2 : 액시스 제이"}
			]
		});
	})();
</script>

Result

AXSelect.AJAX

AJAX를 이용하여 Select options을 정의하는 방식

<div class="tag-result">
	<select name="" class="AXSelect" id="ui-select-02"></select>
	<div id="ui-select-02-display"></div>
</div>
<script>
	(function(){
		var display = $("#ui-select-02-display");
		$("#ui-select-02").bindSelect({
			// options의 키를 사용자 정의 할 수 있습니다.
			reserveKeys: {
				options: "list",
				optionValue: "CD",
				optionText: "NM"
			},
			method: "GET", // 정의하지 않으면 "POST"
			ajaxUrl: "data/selectorData-02.txt",
			ajaxPars: "",
			ajaxAsync: false,
			isspace: true, isspaceTitle: "선택하세요", // 첫번째 옵션을 빈값으로 추가하고 그 라벨값을 '선택하세요'로 정의
			setValue: "", // 옵션이 정의되면 selected 옵션값을 정의
			alwaysOnChange: true, // load나 change이벤트가 발생되면 onchange함수를 호출하는 옵션 [기본값은 false] true이면 AXSelect가 바인드 되고 options가 정의될 때도 onchange이벤트가 발생됩니다.
			onchange: function() {
				display.html( Object.toJSON(this) );
			},
			onload: function(){
				//display.html( Object.toJSON(this.selectedObject) );
			}
		});
	})();
</script>

Result

onchange에서 사용하는 optionText와 text는 동일한 값이고 URLEncode 되어 있습니다. 숨은 기능으로 Select가 활성화 된 상태이면 키보드 입력이벤트를 감지하여 Options아이템을 찾는 기능을 내장하고 있습니다. 하지만 아쉽게도 숫자와 영문자만 검색이 됩니다. AXSelect의 보다 자세한 정보는 http://dev.axisj.com/samples/AXSelect/index.html과 http://jdoc.axisj.com/AXSelectConverter.html에서 얻으실 수 있습니다.

data/selectorData-02.txt

{
	list:[
		{CD:1, NM:"Seoul"},
		{CD:2, NM:"대구"},
		{CD:3, NM:"대전"},
		{CD:4, NM:"창원"},
		{CD:5, NM:"마산"},
		{CD:6, NM:"구례"},
		{CD:7, NM:"제주도"},
		{CD:8, NM:"전주"},
		{CD:4, NM:"창원"},
		{CD:5, NM:"마산"},
		{CD:6, NM:"구례"},
		{CD:7, NM:"제주도"},
		{CD:8, NM:"전주"},
		{CD:9, NM:"Gwangju"}
	]
}

AXProgress

웹 애플리케이션을 제작하다보면 여러개의 아이템을 순차적으로 처리 해야하는 상황이 발생합니다. 특히나 요즈음 AJAX통신기술의 발달로 인해 비동기 작업이 강조되면서 프로그래스형태의 작업이 웹 애플리케이션에서도 가능해졌습니다. AXProgress는 이러한 작업을 보다 쉽게 처리할 수 있도록 도움을 줍니다. 

<div class="tag-result">
    <button class="AXButton" id="com-progress-start">프로그레스 처리</button>
</div>
<script>
	(function(){
		$("#com-progress-start").click(function(){

			var list = [0,1,2,3,4,5,6,7,8,9];
			var myProgress = new AXProgress();
			myProgress.setConfig({
				theme: "AXlineProgress",
				totalCount: list.length,
				width: 400,
				top: 100,
				title: "AXProgress BAR",
				duration: 299 // 프로세스바의 애니메이션 속도 값 입니다.
			});

			mask.open();
			myProgress.start(function(){
				if(this.isEnd){
					myProgress.close();
					mask.close();
					toast.push("progress end");
				}else{
					// 무언가 처리를 해줍니다.	대부분 비동기 AJAX 통신 처리 구문을 수행합니다.
					myProgress.update(); // 프로그레스의 다음 카운트를 시작합니다.
				}
			});
		});

	})();
</script>

Result

프로그래스바는 line형과 circle형이 준비되어 있고 필요한 경우 프로그래스 진행중에 취소처리를 할수있는 취소버튼을 정의 할수 있습니다. 다음의 예제에서 소개 하겠습니다. 

<div class="tag-result">
	<button class="AXButton" id="com-progress-01-start">프로그레스 처리(취소버튼 정의)</button>
	<button class="AXButton" id="com-progress-02-start">프로그레스 처리(circle형)</button>
</div>
<script>
	(function(){

		var list = [0,1,2,3,4,5,6,7,8,9];
		var myProgress = new AXProgress();
		myProgress.setConfig({
			width: 400, top: 100,
			title: "AXProgress BAR",
			duration: 299
		});

		$("#com-progress-01-start").click(function(){
			mask.open();
			myProgress.start(function(){
				if(this.isEnd){
					myProgress.close();
					mask.close();
					toast.push("progress end");
				}else{
					// 무언가 처리를 해줍니다.	대부분 비동기 AJAX 통신 처리 구문을 수행합니다.
					myProgress.update(); // 프로그레스의 다음 카운트를 시작합니다.
				}
			}, {
				theme: "AXlineProgress",
				totalCount: list.length,
				cancel: {
					confirmMsg:"정말 취소하시겠습니까?",
					oncancel:function(){
						//myProgress.restart(); //다시 시작하기
						myProgress.close();
						mask.close();
						toast.push("progress stop");
					}
				}
			});
		});

		$("#com-progress-02-start").click(function(){
			mask.open();
			myProgress.start(function(){
				if(this.isEnd){
					myProgress.close();
					mask.close();
					toast.push("progress end");
				}else{
					// 무언가 처리를 해줍니다.	대부분 비동기 AJAX 통신 처리 구문을 수행합니다.
					myProgress.update(); // 프로그레스의 다음 카운트를 시작합니다.
				}
			}, {
				theme: "AXCircleProgress",
				totalCount: list.length
			});
		});


	})();
</script>

Result

AXScroll

AXScroll UI는 style="overflow:auto"를 이용할 수 없는 환경이나 스크롤바의 스타일이 취향에 맞지않는 특별한 사람들을 위해 탄생 되었습니다. 잘 나가는 웹서비스에는 많이들 쓰이는 UI이죠 그래서 액시스제이도 한번 만들어 봤습니다.

세로스크롤만 사용되는 경우, 가로 스크롤만 사용되는 경우, 세로,가로 스크롤이 함께 사용되는 경우, 모바일환경에서 bounce 되는 스크롤을 사용할 수 있습니다.

AXScroll.default

<div class="tag-result">
	<div class="containerBox" id="ax-scroll-01-target"
	     style="width:400px;height:100px;border:1px solid #ccc;">
		<div class="inBox" id="ax-scroll-01-content">
			<div style="height:500px;width:800px;"></div>
		</div>
	</div>
</div>
<script>
	(function(){
		var myUIScroll = new AXScroll(); // 스크롤 인스턴스 선언
		myUIScroll.setConfig({
			targetID:"ax-scroll-01-target",
			scrollID:"ax-scroll-01-content"
		});
	})();
</script>

Result

AXScroll.xscroll

<div class="tag-result">
	<div class="containerBox" id="ax-scroll-02-target"
	     style="width:400px;height:100px;border:1px solid #ccc;">
		<div class="inBox" id="ax-scroll-02-content">
			<div style="height:200px;width:800px;"></div>
		</div>
	</div>
</div>
<script>
	(function(){
		var myUIScroll = new AXScroll(); // 스크롤 인스턴스 선언
		myUIScroll.setConfig({
			targetID:"ax-scroll-02-target",
			scrollID:"ax-scroll-02-content",
			yscroll:false,
			xscroll:true
		});
	})();
</script>

Result

target의 높이는 원래 100px이지만 내용의 크기에 자동으로 맞추어 집니다.

AXScroll.xyscroll

<div class="tag-result">
	<div class="containerBox" id="ax-scroll-03-target"
	     style="width:400px;height:100px;border:1px solid #ccc;">
		<div class="inBox" id="ax-scroll-03-content">
			<div style="height:400px;width:800px;"></div>
		</div>
	</div>
</div>
<script>
	(function(){
		var myUIScroll = new AXScroll(); // 스크롤 인스턴스 선언
		myUIScroll.setConfig({
			targetID:"ax-scroll-03-target",
			scrollID:"ax-scroll-03-content",
			yscroll:true,
			xscroll:true
		});
	})();
</script>

Result

AXScroll.bounces

<div class="tag-result">
	<div class="containerBox" id="ax-scroll-04-target"
	     style="width:400px;height:100px;border:1px solid #ccc;">
		<div class="inBox" id="ax-scroll-04-content">
			<div style="height:400px;width:800px;"></div>
		</div>
	</div>
</div>
<script>
	(function(){
		var myUIScroll = new AXScroll(); // 스크롤 인스턴스 선언
		myUIScroll.setConfig({
			targetID:"ax-scroll-04-target",
			scrollID:"ax-scroll-04-content",
			xscroll:true,
			bounces:true // 모바일 환경에서만 차이를 느낄 수 있습니다.
		});
	})();
</script>

Result

AXTab

AXTab 사전처럼 두꺼운 책에 책갈피를 꽂아두는 형태의 UI를 디지털화 한 것으로 하나로 연결된 버튼 목록중에 하나의 탭이 선택되는 형태입니다. AXTab은 CSS만 적용하는 경우와 스크립트로 바인딩하는 두가지 경우를 예제로 소개합니다.

AXTab.css

<div class="AXTabs">
	<div class="AXTabsTray">
		<a href="#ax" class="AXTab">Tab1</a>
		<a href="#ax" class="AXTab on">Tab2</a>
		<a href="#ax" class="AXTab Classic">Tab3</a>
		<a href="#ax" class="AXTab Red">Tab4</a>
		<a href="#ax" class="AXTab Green">Tab5</a>
		<a href="#ax" class="AXTab Blue">Tab6</a>
		<a href="#ax" class="AXTab">Tab7</a>
		<div class="clear"></div>
	</div>
</div>

Result

Tab1 Tab2 Tab3 Tab4 Tab5 Tab6 Tab7

AXTabsTray안에 A 태그중에 .on이 있는 아이템이 현재 선택된 탭이 됩니다.

AXTab.script

<div id="ax-tag-script-target"></div>
<script>
(function(){
	$("#ax-tag-script-target").bindTab({
		theme : "AXTabs",
		value:"",
		overflow:"scroll", /* "visible" */
		options:[
			{optionValue:"M", optionText:"남성", closable:true},
			{optionValue:"F", optionText:"여성", closable:true},
			{optionValue:"N", optionText:"선택안함"},
			{optionValue:"", optionText:"모두"}
		],
		onchange: function(selectedObject, value){
			toast.push("onchange: "+Object.toJSON(value));
		},
		onclose: function(selectedObject, value){
			toast.push("onclose: "+Object.toJSON(value));
		}
	});
})();
</script>

Result

addTabs, closeTab, updateTabs등의 메소드를 이용하면 탭 아이템을 조작할 수 있습니다. 보다 자세한 정보는 http://dev.axisj.com/samples/AXTabs/scriptTab.html이나 http://jdoc.axisj.com/AXTabClass.html#addTabs에서 확인하세요.

AXTab.withDiv

<style>
	.tab-content{
		display: none;
		padding: 20px;
		border:1px solid #ccc;
		border-top: 0px none;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
</style>
<div id="ax-tag-script-div-target"></div>
<div id="tab-content-01" class="tab-content">tab-content-01</div>
<div id="tab-content-02" class="tab-content">tab-content-02</div>
<div id="tab-content-03" class="tab-content">tab-content-03</div>
<div id="tab-content-04" class="tab-content">tab-content-04</div>
<div id="tab-content-05" class="tab-content">tab-content-05</div>
<script>
	(function(){
		var select_id = "tab-content-01", tab_target = $("#ax-tag-script-div-target");
		tab_target.bindTab({
			theme : "AXTabs",
			value:"",
			options:[
				{optionValue:"tab-content-01", optionText:"탭 01"},
				{optionValue:"tab-content-02", optionText:"탭 02"},
				{optionValue:"tab-content-03", optionText:"탭 03"},
				{optionValue:"tab-content-04", optionText:"탭 04"},
				{optionValue:"tab-content-05", optionText:"탭 05"}
			],
			onchange: function(selectedObject, value) {
				$("#" + select_id).hide();
				select_id = value;
				$("#" + select_id).show();
			}
		});
		tab_target.setValueTab(select_id);

	})();
</script>

Result

tab-content-01
tab-content-02
tab-content-03
tab-content-04
tab-content-05

탭과 탭에 딸린 패널을 정의하는 UI들도 있지만 필자의 경우엔 좀더 날 것의 컨트롤을 하는 것이 애플리케이션 건강에 좋다고 생각합니다. (물론 지극히 개인적인 생각)

AXContextMenu

컨텍스트메뉴란 마우스 오른쪽 버튼 클릭하면 나타내는 메뉴를 말한다. AXContextMenu는 마우스 오른쪽 버튼 클릭이벤트시에만 출력이 되는 상황에 제한하지 않고 개발자가 특정 이벤트발생시점에 open명령을 내리도록 설계되었다. UI클래스 내부에서 필요한 컨테스트메뉴들을 바인딩 해두고 UI의 상황에 따라 컨텍스트메뉴를 제어 할 수 있도록 설계 되었습니다. 주의할 점은 컨텍스트 메뉴 활성화 시점 전에 컨텍스트메뉴가 바인딩되어 있어야 한다는 것 입니다.

http://dev.axisj.com/samples/AXCore/AXContextMenu.html, http://jdoc.axisj.com/AXContextMenu.html 에서 보다 많은 정보를 얻을 수 있습니다.

AXContextMenu.default

<div class="tag-result" id="com-context-default-target">
	<button class="AXButton" id="com-context-default-open">컨텍스트 메뉴 열기</button>
</div>
<script>
(function(){
	//컨텍스트 메뉴 바인딩
	AXContextMenu.bind({
		id: "myContextMenuTree", // 컨텍스트 메뉴 아이디 (컨텍스트 메뉴 open 시 사용)
		theme: "AXContextMenu",
		width: "150", // 컨텍스트 메뉴 크기
		menu:[
			{userType:0, label:"트리등록"},
			{userType:0, label:"하위메뉴 선택",
				subMenu:[
					{userType:0, label:"하위메뉴1"},
					{userType:0, label:"하위메뉴2",
						subMenu:[
							{userType:0, label:"하위메뉴21"},
							{userType:0, label:"하위메뉴22"}
						]
					},
					{userType:0, label:"하위메뉴3"},
					{userType:0, label:"하위메뉴3"},
					{userType:0, label:"하위메뉴3"}
				],
				upperLine:true, underLine:true
			},
			{userType:1, label:"추가하기"},
			{userType:1, label:"삭제하기"}
		]
	});

	$("#com-context-default-open").click(function(e){
		AXContextMenu.open({id:"myContextMenuTree"}, e||window.event);
	});
	$("#com-context-default-target").on("contextmenu", function(e){
		var pos = $("#com-context-default-open").offset();
		AXContextMenu.open({id:"myContextMenuTree"}, pos);
		return false;
	});
})();
</script>

Result

"컨텍스트 메뉴 열기" 버튼을 클릭하면 클릭이벤트를 AXContextMenu.open의 두번째 인자값으로 이벤트를 전달하고 이벤트의 포지션정보를 이용하여 컨텍스트 메뉴의 위치를 결정하고 버튼을 포함한 회색영역을 마우스 오른쪽 버튼 클릭하면 버튼의 절대 위치값으로 컨텍스트 메뉴의 위치를 결정한다.

AXContextMenu.icon

<div class="tag-result">
	<button class="AXButton" id="com-context-icon-open">컨텍스트 메뉴 열기</button>
</div>
<script>
	(function(){
		//컨텍스트 메뉴 바인딩
		AXContextMenu.bind({
			id: "myContextMenuIcon", // 컨텍스트 메뉴 아이디 (컨텍스트 메뉴 open 시 사용)
			theme: "AXContextMenu",
			width: "150", // 컨텍스트 메뉴 크기
			menu:[
				{
					label: '<i class="axi axi-eye"></i> 상세보기',
					onclick: function(){ dialog.push(Object.toJSON(this)); },
					underLine:true
				},
				{label: '<i class="axi axi-paper-clip"></i> 클립연결하기'},
				{label: '<i class="axi axi-mail"></i> 이메일'},
				{label: '<i class="axi axi-layout"></i> 레이아웃 설정'}
			]
		});

		$("#com-context-icon-open").click(function(e){
			AXContextMenu.open({
				id:"myContextMenuIcon",
				sendObj: {data:"데이터"}
			}, e||window.event);
		});
	})();
</script>

Result

메뉴 아이템에 아이콘은 AXIcon을 이용한다. (http://axicon.axisj.com) 액시콘은 웹 애플리케이션에서 문자열처럼 손 쉽게 사용이 가능하다. "컨텍스트 메뉴 열기" 버튼을 클릭하여 컨텍스트 메뉴를 열고 첫번째 메뉴(상세보기)를 클릭하면 dialog가 출력되는데 이것은 메뉴 아이템에 onclick이벤트를 통해서 발동된다.

AXContextMenu.filter

<div class="tag-result">
	<button class="AXButton" id="com-context-filter-open-0">컨텍스트 메뉴 열기(typ:0)</button>
	<button class="AXButton" id="com-context-filter-open-1">컨텍스트 메뉴 열기(typ:1)</button>
</div>
<script>
	(function(){
		//컨텍스트 메뉴 바인딩
		AXContextMenu.bind({
			id: "myContextMenuFilter", // 컨텍스트 메뉴 아이디 (컨텍스트 메뉴 open 시 사용)
			theme: "AXContextMenu",
			width: "150", // 컨텍스트 메뉴 크기
			menu:[
				{typ:0, label: '<i class="axi axi-eye"></i> 상세보기'},
				{typ:0, label: '<i class="axi axi-paper-clip"></i> 클립연결하기'},
				{typ:1, label: '<i class="axi axi-mail"></i> 이메일'},
				{typ:1, label: '<i class="axi axi-layout"></i> 레이아웃 설정'}
			]
		});

		$("#com-context-filter-open-0").click(function(e){
			AXContextMenu.open({
				id:"myContextMenuFilter",
				filter:function(){
					return (this.menu.typ == 0);
				}
			}, e||window.event);
		});
		$("#com-context-filter-open-1").click(function(e){
			AXContextMenu.open({
				id:"myContextMenuFilter",
				filter:function(){
					return (this.menu.typ == 1);
				}
			}, e||window.event);
		});
	})();
</script>

Result

컨텍스트메뉴 오픈시에 filter 함수를 사용할 수도 있다. 컨텍스트 메뉴가 열리기 전에 menu 아이템들을 filter 함수를 결과가 true인 아이템들만 출력하게 해준다. 웹 애플리케이션에서 애플리케이션 상태에 따라 컨텍스트 메뉴 아이템을 제어하는데 매우 유용합니다.

AXToolbar

AXToolbar는 바에 여러개의 메뉴를 묶어두어서 사용자에게 편리하게 제공하는 UI입니다. 일반 메뉴와는 다르게 클릭을 한후에 오버이벤트에 따라 메뉴가 보여진다는 점이다. AXToolbar는 AXContextMenu UI를 내부에 내장하여 구현되었습니다. 그런 이유로 AXContextMenu에서 사용되는 모든 기능이 그대로 사용됩니다.

http://dev.axisj.com/samples/AXToolBar/index.html 

<div class="tag-result">
	<div class="toolBar" id="ax-tool-bar" style="border-bottom: 1px solid #d6d6d6;border-top: 1px solid #d6d6d6;"></div>
</div>
<script>
	(function(){
		var myBar = new AXToolBar();
		var menu = [
			{userType:0, label:"트리등록"},
			{userType:0, label:"하위메뉴 선택",
				subMenu:[
					{userType:0, label:"하위메뉴1"},
					{userType:0, label:"하위메뉴2",
						subMenu:[
							{userType:0, label:"하위메뉴21"},
							{userType:0, label:"하위메뉴22"}
						]
					},
					{userType:0, label:"하위메뉴3"}
				]
			},
			{userType:1, label:"추가하기"},
			{userType:1, label:"삭제하기"}
		];
		myBar.setConfig({
			targetID: "ax-tool-bar",
			theme   : "AXToolBar",
			menu    : menu,
			reserveKeys: {
				subMenu: "subMenu"
			}
		});
	})();
</script>

Result