이전 글에서 jQuery Mobile 이 변환하는 것을 봤습니다.
<input>
element 에 type="number"
와 data-type="range"
attributes 가 생기는 것도 봤는데요. 거기에다가 ui-slider
class 가 있는 <div>
element 도 생겼습니다. 거기에 ui-slider-handle
class 가 있는 <a>
link 도 생성됐죠. 이건 slider 의 축을 따라 움직이는 버튼을 만들기 위한 클래스였죠.
이 slider 를 다르게 display 하고 싶으면 이 CSS class 들을 수정하면 됩니다.
Change the styles associated with the slider
<!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>
.ui-slider {
width : 90% !important;
background : yellow;
}
input.ui-slider-input {
display : none !important;
}
.ui-slider-handle {
background : red;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Indicate the number of rooms: </span><br />
<input type=range min=1 max=5 /><br />
</div>
</body>
</html>
|
|
tistory541_01.html
input field 부분의 ui-slider-input class 에 none으로 할당해서 input field 부분을 없앴습니다. 여기서 !important를 사용하는 것이 중요합니다. 왜냐하면 jQuery Mobile 이 이것을 보고 적용을 하거든요. 바로 jQuery Mobile 에게 이 클래스를 반드시 적용하라고 일러 주는 겁니다.
slider 의 축은 ui-slider
class 에서 width
property를 90%로 세팅했기 때문에 화면 대비 90% 크기로 보여질 겁니다. 여기에도 jQuery Mobile 에게 이것을 적용하도록 시키기 위해 !important이 반드시 필요합니다. 이 축은 노란 배경화면으로 세팅됐습니다.
마지막으로 ui-slider-handle
class 에 해당하는 slider button은 빨간 배경 색으로 initialize 됐습니다.
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| accordion menu 열고 닫는 것 구현하기 (0) | 2012.12.20 |
|---|---|
| Ajax 로 accordion menu 삽입하기 (0) | 2012.12.20 |
| HTML을 jQuery Mobile 의 accordion menu 로 변환하기 (1) | 2012.12.18 |
| 다이나믹 하게 accordion menu 생성하기 (0) | 2012.12.17 |
| slider 생성 관련 예제들.. (0) | 2012.12.15 |
| slider 의 이벤트 관리하기 (0) | 2012.12.15 |
| Slider 에 값을 할당하거나 받아오기 (0) | 2012.12.13 |
| Ajax 로 slider 삽입하기 (0) | 2012.12.11 |
| HTML element를 jQuery Mobile slider 로 변환하기 (2) | 2012.12.10 |
| 다이나믹하게 slider 생성하기 (0) | 2012.12.09 |