easy select(prototype select component)

손쉽게 select 태그를 커스터마이징하는 E A S Y S E L E C T!!!

데모 사이트

div[selector]>ul[data-id]>li[value] 로 다양한 디자인을 구성한 뒤, 이벤트 호출만 하면 끝!!!!!

설치

npm install easy-select

사용방법

<!-- 공통 -->
<!-- div[selector]>ul[data-id]>li[value] -->
<!-- 싱글타입 -->
<div class="selector"><!-- class나 id등등의 selector가 필요합니다. -->
  <ul data-id="age"><!-- name의 역할을 하는 data-id를 입력해주세요. -->
    <li data-value="값" selected disabled><!-- 옵션의 value값, 초기 세팅 값 1개 이상, 클릭 불가능 필요 시 추가 -->
    <!-- 텍스트 또는 html -->
  </ul>
</div>
<!--멀티타입(체크모양)-->
<div class="selector"><!-- class나 id등등의 selector가 필요합니다. -->
  <ul data-id="favorite"><!-- name의 역할을 하는 data-id를 입력해주세요. -->
    <li data-value="값" checked disabled><!-- 옵션의 value값, 초기 세팅 값 1개 이상, 클릭 불가능 필요 시 추가 -->
    <!-- 텍스트 또는 html -->
    </li>
  </ul>
</div>

//for mvc
import EasySelect from 'easy-select';
import '@/easy-select/dist/style.min.css';
const select = new EasySelect('.selector'); 
//or const select = new EasySelect('.selector', {options}); 

<!-- for html -->
<script src="ease-select.min.js"></script>
<link href="style.min.css">
<script>
  var select = new EasySelect('.selector');
  //or const select = new EasySelect('.selector', {options}); 
</script>

옵션

{
  search: Boolean, // 검색기능
  length: Boolean, // 옵션 총 갯수 노출 여부
  resultLength: Boolean, // 검색결과 노출 여부
  emptyText: String'검색결과없는글자수정',
  placeHolder: String'검색어 입력 기본 글자 수정',
  frontOnlyText: Boolean, // 버튼엔 text만 적용할 경우
  selectToClose: Boolean, // 선택 후 닫기
  onchange: Function, // 온체인지, 벨류가 인자값
  oninvalid: Function, // 벨리데이션, 벨리데이션 텍스트

  //멀티(체크)일때옵션
  check: Boolean,
  min: Number, // 멀티 최소 체크 갯수
  max: Number, // 멀티 최대 체크 갯수
  invalid: { //벨리데이션 텍스트
    min: String, 
    max: String,
    disabled: String
  }
}

getter

var select = new EasySelect('.selector');
select.id[data-id].getValue();
//ex select.id.age.getValue();

setter

var select = new EasySelect('.selector');
select.id[data-id].setValue(value);
//ex select.id.age.setValue(1) || select.id.age.setValue([1,2,3]);

update

var select = new EasySelect('.selector');
select.id.age.update();