AXContextMenu

event 위치에 모든 컨텍스트 메뉴 열기

checkbox 컨텍스트 메뉴 열기

원하는 위치에 컨텍스트 메뉴를 원하는 조건의 메뉴만 오픈하기

여러단계로 구성된 컨텐스트 메뉴 열기

AXContext

<!--
<div style="padding:20px;">
	<input type="button" value="컨텍스트메뉴 열기" class="AXButton" id="contextBtn1" />
	<input type="button" value="컨텍스트메뉴 열기(filtered)" class="AXButton" id="contextBtn2" onclick="fnObj.contextMenuOpen2();" />
</div>

//다차원 레벨 메뉴
		AXContextMenu.bind({
			id:"myContextMenuTree", 
			theme:"AXContextMenu", // 선택항목
			width:"150", // 선택항목
			menu:[
				{userType:0, label:"트리등록", onclick:function(id){
					toast.push(Object.toJSON(this));
					toast.push(id);
				}},
				{userType:0, label:"하위메뉴 선택", className:"docline", 
					onclick:function(){
						toast.push(Object.toJSON(this));
					}, 
					subMenu:[
						{userType:0, label:"하위메뉴1", onclick:function(){toast.push(Object.toJSON(this));}},
						{userType:0, label:"하위메뉴2", onclick:function(){toast.push(Object.toJSON(this));}, 
							subMenu:[
								{userType:0, label:"하위메뉴21", onclick:function(){toast.push(Object.toJSON(this));}},
								{userType:0, label:"하위메뉴22", onclick:function(){toast.push(Object.toJSON(this));}}
							]
						},
						{userType:0, label:"하위메뉴3", onclick:function(){toast.push(Object.toJSON(this));}},
						{userType:0, label:"하위메뉴3", onclick:function(){toast.push(Object.toJSON(this));}},
						{userType:0, label:"하위메뉴3", onclick:function(){toast.push(Object.toJSON(this));}}
					],
					upperLine:true,
					underLine:true
				},
				{userType:1, label:"추가하기", className:"plus", onclick:function(){
					toast.push(Object.toJSON(this));
				}},
				{userType:1, label:"삭제하기", onclick:function(){
					toast.push(Object.toJSON(this));
				}}
			]
		});
		
		$("#contextBtn1").bind("click", fnObj.contextMenuOpen);
	},
	contextMenuOpen: function(e){
		var event = window.event || e;
		AXContextMenu.open({id:"myContextMenu"}, event); // event 직접 연결 방식
	},
	contextMenuOpen2: function(e){
		var pos = $("#contextBtn2").offset();
		AXContextMenu.open(
			{
				id:"myContextMenu", 
				filter:function(id){
					return (this.userType == 0);
				}
			}, 
			{left:pos.left, top:pos.top}
		); // 위치 직접 지정 방식
	},
	contextMenuOpen3: function(e){
		var event = window.event || e;
		AXContextMenu.open({id:"myContextMenuTree"}, event); // event 직접 연결 방식
	}
};
$(document).ready(fnObj.pageStart);
</script>

-->

AXContext CSS