Prototype base multi-Selection API

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

download JS : http://firejune.com/javascripts/multiselect.js
download CSS : http://firejune.com/stylesheets/multiselect.css

사용방법

적용대상이 되는 엘리먼트는 리스트 아이템(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'), point = '';

   debug .innerHTML = 'Selected : ';

   selector.items.each(function(a){

      if(a.success) {

        debug .innerHTML += point + a.element.innerHTML;


        point = ', ';

      }

   });

}});



selector.setOffset(true); // 포지션 다시 계산하기

selector.selectAll(true); // 모두 선택하기

selector.selectAll(false); // 모두 선택 해제하기

추후 추가될 기능

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

출처 : FireJune's Blog