IBUpload
를 사용하기 위해서 jquery, jquery-ui, css를 include 하고, ibuploadinfo.js와 ibupload.js 파일을 include 합니다. 순서 중요
jquery의 최소 권장 버전은 1.7.2
입니다.<!-- 필수 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]
상위 객체가 반드시 크기를 갖고 있어야 합니다.
<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를 통한 업로드 객체 삽입]
<script>
$(document).ready(function(){
//객체생성
$("#myUpload").IBUpload();
});
</script>
[기본 형태 객체 생성]
<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>
[기본 형태 객체 생성]
ibsheetinfo.js
에 기본 컨택스트 메뉴 내용이 설정되어 있습니다.//초기 기본값 설정
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 | 팝업메뉴에서의 키보드를 누르면 바로 선택되는 바로가기 키를 설정합니다.firefox 와 mobile 은 지원불가 |
<script type="text/javascript">
$(document).ready(function(){
//업로드 초기화
$("#myUpload").IBUpload({
viewType:"icon",
iconMode :"detail",
..... 중략.....
//컨택스트 메뉴 연결
onContextMenu:function(key){
doAction(key);
}
});
});
</script>