Quick Start

1. IBUpload 설치

<!-- 필수 jquery library -->
<script type="text/javascript" src="/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/jquery/jquery-ui-1.10.4.min.js"></script>

<!-- contextMenu 관련 jquery 추가 모듈 -->
<link href="/jquery/jquery.contextMenu.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/jquery/jquery.contextMenu.min.js"></script>

<!-- ibupload 모듈 -->
<script type="text/javascript" src="js/ibleaders.js"></script>
<script type="text/javascript" src="js/ibuploadinfo.js"></script>
<script type="text/javascript" src="js/ibupload.js"></script>

[javascript,css 파일 include]

2. div를 통한 업로드 객체 삽입

<div class="content">
  <div class="btn_div">
    <button type="button" onclick="doAction(add)">파일추가</button>
    <button type="button" onclick="doAction('download')">다운로드</button>
    <button type="button" onclick="doAction('delete')">파일삭제</button>
    <button type="button" onclick="doAction(save)">저장</button>
  </div>
  <!-- 업로드 상위 객체의 크기를 따름 -->
  <div style="width:750px;height:400px">
    <div  id="myUpload"></div>
  </div>
</div>

[div를 통한 업로드 객체 삽입]

3. IBUpload 객체 초기화

<script>
$(document).ready(function(){
  //객체생성
  $("#myUpload").IBUpload();
});
</script>

[기본 형태 객체 생성]
s

4. 화면 버튼 기능 연결하기

<script type="text/javascript">
  function doAction(str){
    switch(str){
    case "add"://파일추가
      $("#myUpload").IBUpload("add");
      break;
    case "download"://선택 파일 삭제
      $("#myUpload").IBUpload("download");
      break;
    case "delete"://선택파일 다운로드
      $("#myUpload").IBUpload("delete");
      break;
    case "save"://변경 내용 저장
      $("#myUpload").IBUpload("upload");
      break;

    //ibupload 보기모양 동적 변경
    case "icon":
    case "list":
    case "detail":
      $("#myUpload").IBUpload("iconMode",str); //함수호출
      break;
    }//end switch
  }
</script>
<body>
  <button type="button" onclick="doAction('add')">파일추가</button>
  <button type="button" onclick="doAction('download')">다운로드</button>
  <button type="button" onclick="doAction('delete')">파일삭제</button>
  <button type="button" onclick="doAction(save)">저장</button>
</body>

[기본 형태 객체 생성]

5. 컨택스트메뉴 설정 및 기능 연결하기

//초기 기본값 설정
ibleaders.ibupload = {
    /* 파일 추가시 자동 업로드 여부 */
    autoUpload: true,
    ...... 중략 .........
    /* 팝업메뉴 항목 구성 */
    contextMenuItems: {
        "download": {name: "다운로드 (D)", icon: "", accesskey: "d"},
        "sep1": "---------",
        "viewtype": {
            "name": "보기",
            "items": {
                "icon": {"name": "아이콘 (C)", accesskey: "c"},
                "list": {"name": "간단히 (L)", accesskey: "l"},
                "detail": {"name": "자세히 (D)", accesskey: "d"}
            }
        },
        "sep2": "---------",
        "add": {name: "추가 (A)", icon: "", accesskey: "a"},
        "delete": {name: "제거 (R)", icon: "delete", accesskey: "r"}
    },
    ..... 후략 .......
}

[ibsheetinfo.js 파일 내용]

메뉴 항목 추가 처리 내용
객체별 name 팝업 메뉴항목 의 고유 ID 위의 예 에서 download, icon, add,delete 등에 해당된다. ( onContextMenu 이벤트 참고 )
Name 실제로 메뉴에 보이는 글 내용
Accesskey 팝업메뉴에서의 키보드를 누르면 바로 선택되는 바로가기 키를 설정합니다.firefoxmobile은 지원불가
<script type="text/javascript">
$(document).ready(function(){
  //업로드 초기화
  $("#myUpload").IBUpload({
    viewType:"icon",
    iconMode :"detail",

    ..... 중략.....

    //컨택스트 메뉴 연결
    onContextMenu:function(key){
      doAction(key);
    }
  });
});
</script>

s