1. 상황

contextmenu의 리스트가 너무 많아지고, 같은 목적의 리스트가 나열됨

2. 구현 목표

contextmenu의 리스트에서 하위 리스트를 불러와서 정리하고자 함

3. contextmenu

contextmenu의 items 안에 items를 설정하면, 마우스를 올려두면, 하위 리스트가 나온다.

$.contextMenu({
  selector : "#thumbnails li",
  position: function(opt, x, y){
    opt.$menu.css({width:130,top:y,left:x});
  },
  items : {
    "selectAll" : {
      name : "전체선택/해제",
      icon : "fa-check",
      callback : function(key, opt) {}
    },
    "imageUploadMenu" : {
      name : "이미지업로드",
      icon : "fa-7",
      items: {
        "imageUpload" : {
          name : "이미지업로드",
          icon : "fa-7",
          callback : function(key, opt) {
            imageUploadRequet();
          }
        },
        "imageUploadList" : {
          name : "이미지업로드리스트",
          icon : "fa-7",
          className : "imageUploadListClass",
          callback : function(key, opt) {
            wrapWindowByMask("none", "IUR", "none");
          }
        }
      }
    }
  }
})

4. 문제상황1

contextmenu의 상위 리스트에 callback 함수 즉, 클릭 시 작동하게 설정하고 싶었으나, 하위 리스트에서 callback이 있어서 작동하지 않는다는 구글링 결과가 있었다.

따라서, 상위리스트에 이미지업로드를 두고, 하위 리스트에 이미지업로드랑 이미지업로드리스트로 분리하였다.

5. 문제상황2

라이브러리에서는 하위 리스트의 너비 조정이 잘되지 않았다. 따라서, css에서 조정하였다.

.context-menu-item.context-menu-submenu > .context-menu-list {
    width: 130px;
}

6. 피드백

위 내용을 통해, contextmenu에서 items의 items를 걸어서 같은 성격의 항목을 정렬하는 방법을 배웠다.

7. References

1. minaminaworld blog