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

최근에 받은 트랙백

글 보관함

Switch 커스터마이징 하기

2012. 12. 7. 11:54 | Posted by 솔웅



 

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가 정의 되지 않을 겁니다.






반응형

Comment