ixSlider()

Type : jQuery Plugin

Support : 0.3

Return : jQuery

  • 슬라이더 Plugin
    ※한번 적용된 대상에는 "clear" 하기 전에는 다시 적용되지 않는다.

Options

대상 Node의 inline 속성으로 설정하는 data-ix-options의 Properties
property description required default ver
min 선택할 수 있는 최소값 설정 (음수 설정가능) ✔ 0.3
max 선택할 수 있는 최대값 설정 (음수 설정가능) ✔ 0.3
gap 슬라이드가 움딕일때 한번 반환될 수치의 간격을 설정 1 0.3
snap 슬라이드가 움딕일때 gap으로 구간을 보정하여 이동하도록 설정 false 0.3
value 초기 선택값 설정, 설정하지 않으면 min 값이 적용된다. min 설정값 0.3
disable 초기 비활성화 설정 false 0.3
number-format "ix-input"의 노출되는 문자열 형식을 "2,000" 형식으로 표출 false 0.3
correct-endpoint 슬라이더를 이동후 snap구간으로 보정하여 이동하도록 설정
※snap:true 설정시 false로 설정된다.		 false 0.3
duration correct-endpoint:true 설정시 animate 지속시간 설정, 1000/1초 0 0.3
axis 슬라이더 방향축이 가로인지 세로인지 설정 ( "horizontal", "vertical" ) horizontal 0.3
add-first-str "ix-input"의 노출되는 문자열 앞에, 해당 문자를 추가해서 노출한다.
※영문, 숫자 이외의 문자는 encodeURIComponent("문자")로 변환하여 설정해야 한다.		 0.3
add-last-str "ix-input"의 노출되는 문자열 뒤에, 해당 문자를 추가해서 노출한다.
※영문, 숫자 이외의 문자는 encodeURIComponent("문자")로 변환하여 설정해야 한다.		 0.3
number-fixed input의 노출되는 숫자의 소수점 표현 설정 ex)27.00
※number-format 이 설정되었을때만 작동한다.		 0 0.3.5
currency-format input의 노출되는 숫자를 국가별 currency format으로 설정 ex)currency-format:de = 1.000,00
기본 format (2,000)을 사용하는 국가 이외에 (de, sk, no, nl, it, be, fr, es, pl)를 지원
※v0.3.7 에서 pl 추가
※number-format 이 설정되었을때만 작동한다.		 0.3.6

Methods

  • ixSlider( options ) : jQueryver 0.3~

    슬라이더 기본적용
    • options : Object
      각종 옵션들 설정, 설정하지 않으면 기본 옵션이 설정된다, Property는 카멜표기법 사용
      옵션 항목들은 "Options" 참조
      ※옵션설정은 되도록 inline으로 data-ix-options속성에 설정하길 권장한다.

  • ixSlider( 'changeValue', value ) : jQueryver 0.3~

    현재 선택되어진 선택값 변경
    • value : Number
      변경할 value 설정
      ※min설정과 max설정을 벗어나면 보정하여 설정된다.

  • ixSlider( 'enable' ) : jQueryver 0.3~

    슬라이더를 활성화 시킨다.

  • ixSlider( 'disable' ) : jQueryver 0.3~

    슬라이더를 비활성화 시킨다.

  • ixSlider( 'getValue' ) : Numberver 0.3~

    현재 value값을 반환

  • ixSlider( 'clear' ) : jQueryver 0.3~

    슬라이더 적용 해제, 등록된 이벤트들도 모두 삭제되어 초기화 된다.

Events

No. type description property ver
1 ixSlider:init 초기 설정시 전달 되는 Event
  • value: value값 반환
 0.3
2 ixSlider:slideStart 슬라이더 제어가 시작될때 전달 되는 Event
  • value: value값 반환
  • userInteraction: 사용자가 슬라이더를 조작하여 변경되었을시 true 반환
 0.3
3 ixSlider:change 슬라이더 값이 변경 되었을시 전달 되는 Event
  • value: value값 반환
  • userInteraction: 사용자가 슬라이더를 조작하여 변경되었을시 true 반환
 0.3
4 ixSlider:slideEnd 슬라이더 제어가 끝났을때 전달 되는 Event
슬라이더 값이 변경 되지 않아도 무조건 호출된다.
  • value: value값 반환
  • userInteraction: 사용자가 슬라이더를 조작하여 변경되었을시 true 반환
 0.3

Example