Rev. 2.73

자바스크립트로 구현한 Prototype.js 프레임웍 기반 다중 선택기 API를 소개합니다.(API라고 하기에는 좀 부끄럽군요) 최초 올라로그 오픈베타 프로젝트에 사용되었습니다. 데스크탑 애플리케이션 못지않은 UI를 구현하겠다는 욕심에 조금은 억척 스럽게 만들어진 녀석입니다. 유저가 익숙하지 않다는 이유로 존속여부는 희박하지만, 라이브러리 형태로 공개하고 계속 발전시켜 나가볼 생각입니다. 조금 더 다듬고 기능을 확장하여 여러환경에 적용할 수 있도록 손보았습니다. 웹 특성상 컨트롤 키를 조합하는 방식이 아닌 기본으로 활성화 되어 있는 상태입니다.(추가 예정)

전체 선택 | 선택 해제  
토글 모드
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
Selected : --


Width: 75px
전체 선택 | 선택 해제  

드래그 다중선택 활성 모드
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
Selected : --

사용방법

적용대상이 되는 엘리먼트는 리스트 아이템(UL)의 부모이며, 부모 엘리먼트는 다중선택 활성화 영역(parent)이 됩니다. 리스트 아이탬은 고유한 ID값를 지니고 있어야 합니다.(수정됨) 드래그 사용여부와 스타일 시트에서 지정한 스타일을 별도로 설정 할 수도 있습니다, 자세한 사용방법은 아래와 같습니다.(슬라이드 바는 포지션 리셋 테스트용 입니다.)

new MultiSelect('testElement');

// CSS 시각효과 설정
new MultiSelect('testElement', {
    dragSelect: false, // 드래그 사용 여부
    rectangleCN: 'MS-rectangle', // 선택영역 스타일 이름
    selectCN: 'MS-select',  // 선택된 아이탬 스타일 이름
    unselectCN: 'MS-unselect', // 선택되지 않은 아이탬 스타일 이름
}});

// 예제에 사용한 코드
var selector = new MultiSelect('testElement', {
    // 변화가 생기면 이벤트 발생
    onChange: function(){
    var debug = $('debug2'), comma = '';
    debug.innerHTML = 'Selected : ';
    selector.items.each(function(a){
        if(a.success) {
            debug.innerHTML += comma + a.element.innerHTML;
            comma = ', ';
        }
    });
}});

selector.setOffset(true); // 포지션 다시 계산하기
selector.selectAll(true); // 모두 선택하기
selector.selectAll(false); // 모두 선택 해제하기

추가될 기능

- 윈도우 컨벤션을 따르는 UI 모드 추가(컨트롤 키 조합)
- 메모리 릭현상 제거
- 더블 클릭 이벤트 추가
- 아이템의 ID값 없이도 사용할 수 있도록 수정(수정됨)
- form 엘리먼트 지원

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar