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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
Customize radio buttons

이전에 jQuery Mobile이 어떻게 오리지널 HTML 에서 jQuery Mobile convention에 맞도록 display 될 HTML 코드로 변환하는지 살펴 봤습니다. 아래 예제를 볼까요. jQuery Mobile 에 의해서 사용되는 CSS 클래스들을 몇개 바꿔서 색다른 radio 버튼을 만들어 보겠습니다.


Styling the radio buttons


<!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-controlgroup .ui-radio label {

      font-size : 25px;

      font-style : italic;

    }

    .ui-radio .ui-btn {

      text-align : right;

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Choose the number of rooms: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 </label>

      <input type=radio id=id1 name=rooms />

      <label for=id2> 2 </label>

      <input type=radio id=id2 name=rooms />

      <label for=id3> 3 </label>

      <input type=radio id=id3 name=rooms />

      <label for=id4> 4 </label>

      <input type=radio id=id4 name=rooms />

      <label for=id5> 5 </label>

      <input type=radio id=id5 name=rooms />

    </div>

  </div>

</div>


</body>

</html>


tistory498_01.html





반응형