반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

slider 를 customizing 하기

2012. 12. 14. 12:35 | Posted by 솔웅


Customize sliders



이전 글에서 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 됐습니다.




반응형

Comment