Switch 커스터마이징 하기
switch는 jQuery Mobile 에 의해 제공되는 CSS class들을 이용해서 customizing 할 수 있습니다. 우리는 아래 DOM tree 에 있는 CSS 들을 수정해서
switch Yes / No: 를 display 해 보겠습니다.
switch를 customizing 하기 위해 위 CSS 클래스들 중 일부를 사용하겠습니다. 특히 ui-slider class 는 switch 의 width 와 관련 일반적인 appearance 를 관리합니다. ui-slider-label class 는 switch 에서 텍스트를 display 하기 위해 사용됩니다. 이 클래스가 ui-btn-active 와 같이 어울리면 switch 가 ON 인 상태에서의 appearance 를 관리합니다. 마지막으로 ui-slider-handle class 는 switch 의 cursor 를 움직이는 것과 관련 있습니다.
Use CSS classes to style the switch
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
span.ui-slider-label {
color : red;
font-style : italic;
}
span.ui-slider-label.ui-btn-active {
color : gainsboro;
}
.ui-slider-handle {
background : grey;
}
.ui-slider {
width : 50% !important;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Would you like an apartment: </span>
<select data-role=slider>
<option value=no> No </option>
<option value=yes> Yes </option>
</select>
</div>
</div>
</body>
</html>
tistory517_01.html
ui-slider
class
의 width
property를 정의할 때
!important 의 사용법을 잘 보세요. 이것은 jQuery Mobile 이 CSS 안에서 이 프로퍼티를 redefine 하기 때문에 필요합니다. 만약
!important directive 가 있지 않다면 우리가 만든 CSS가 정의 되지 않을 겁니다.
