jindo.m.ToggleSlider

Toggle Slider (JMC)

목적

오픈 소스 중 jindo.m.ToggleSlider의 대체안으로 적합한 것이 있는지 비교 검토하여 적합한 컴포넌트를 선정에 도움을 준다.

후보

• toggles
• jquery.onoff

기타 (검토 제외)

• jquerymobile : jquery mobile 에 의존적이라 제외
• bootstrap-switch: bootstrap 에 의존적이라 제외
• Switch Button: iPhone 룩을 표방함
• jquery-switchbutton: 상용이라 제외
• noUiSlider: 토글 기능으로 사용하기에는 너무 오버스펙(큰 용량)이라 제외

일반 사항 비교

-	toggles	jquery.onoff
IE Support	IE8+	IE9+
Git Star	266	75
Licenses	FREE	MIT
size	6.8kB / 2.9kB / 0.43 kB	10.3 kB / 4.3 kB / 1.6 kB
Dependency	jQuery	jQuery
First	Aug 12, 2012	Jan 12, 2014
Last	Jul 4, 2015	Oct 26, 2014

Jindo 기준 요구 사항

• 클릭 또는 드래그로 슬라이더를 토글 시켜 on/off 설정 가능
• 커스텀 이벤트 핸들링

모두 요구 사항을 만족 시켜 이슈 사항 없음

마크업 검토 의견

Simon Tabor의 toggle

• IE8+. 화면이 깨져보이는 것은 추후 css 수정으로 해결 가능.
• 접근성 대응 되어있음

Timmy Willison의 On-Off Toggle Switch

• 마크업 구조도 매우 간단하고
• 접근성 대응도 잘 되어있음

기타 컴포넌트 특징

Simon Tabor의 toggle

• jquery.onoff 대비 다양한 옵션 제공

// With options (defaults shown below)
$('.toggle').toggles({
	drag: true, // allow dragging the toggle between positions
	click: true, // allow clicking on the toggle
	text: {
		on: 'ON', // text for the ON position
		off: 'OFF' // and off
	},
	on: true, // is the toggle ON on init
	animate: 250, // animation time
	transition: 'swing', // animation transition,
	checkbox: null, // the checkbox to toggle (for use in forms)
	clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)
	width: 50, // width used if not set in css
	height: 20, // height if not set in css
	type: 'compact' // if this is set to 'select' then the select style toggle will be used
});

• HTML 마크업을 통한 옵션 지정 가능

Timmy Willison의 On-Off Toggle Switch

• UI 커스터마이징을 위한 generator 제공

• CSS 클래스 지정 가능

결론(요약)

• toggles:

  • 장: IE8 지원 및 더 많은 커스터마이징 옵션

• jquery.onoff:

  • 장: 단순한 형태의 마크업과 접근성 측면에서 toggles 대비 우수. UI generator 를 통한 디자인 커스터마이징 용이
  • 단: IE9 이상 요구. 옵션이 toggles 대비 부족