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

최근에 받은 트랙백

글 보관함

체크박스 customize 하기

2012. 11. 26. 13:29 | Posted by 솔웅


Customize checkboxes



이 전 글에서 어떻게 jQuery Mobile 이 오리지널 HTML 코드를 jQuery Mobile 형식에 맞는 HTML 코드로 바꾸는지에 대해 살펴 보았습니다. 아래 예제에서는 체크박스의 display 를 바꾸기 위해 jQuery Mobile 에서 사용하는 CSS 클래스들을 수정해 보겠습니다.


Styling the checkboxes


<!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-checkbox label {

      font-size : 25px;

      font-style : italic;

    }

    .ui-checkbox .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 an apartment: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 bedroom </label>

      <input type=checkbox id=id1 name=p1 />

      <label for=id2> 2 bedrooms </label>

      <input type=checkbox id=id2 name=p2 />

      <label for=id3> 3 bedrooms </label>

      <input type=checkbox id=id3 name=p3 />

      <label for=id4> 4 bedrooms </label>

      <input type=checkbox id=id4 name=p4 />

      <label for=id5> 5 bedrooms </label>

      <input type=checkbox id=id5 name=p5 />

    </div>

  </div>

</div>


</body>

</html>




tistory487_01.html


반응형

Comment

  1. 저도 jQuery Mobile 을 좀 공부 해둬야겠습니다.
    객체지향적인 Sencha 와는 좀 다른 방식이더라구요...^^
    오늘도 꾸욱 누르고 갑니다...ㅎㅎㅎ

    • 솔웅 2012.11.27 03:28 신고

      저도 sencha 에 관심이 많은데... 기회가 안 닿네요...
      매번 꾸욱 누르신다니 정말 감사드립니다... ^^
      요즘 대부분 저의 jQuery Mobile 관련 글은 http://the-jquerymobile-tutorial.org/ 에 있는 내용입니다.
      jQuery Mobile 책 내신 분인데...
      여기는 매일 꾸욱 할만한게 없더라구요.
      프랑스에서 IT 관련 책을 내시는 분인데요.
      Eric Sarrion 이분도 기억해 주세요... ^^

  2. 앗... 영어네요...ㅎㅎㅎ
    영어는 쥐약이라~!~!
    이해가 너무 느려요...^^
    Sencha 는 초반 개념 잡는데 조금의 시간만 투자한다면,
    매력적인 Framework 인 듯 합니다...
    계속 공부해야 겠어요...ㅎㅎㅎ

    • 솔웅 2012.11.27 11:45 신고

      예 우리 팀에서도 개발 후 유지 보수 측면에서 MVC 를 충실히 지원하는 Sencha touch 가 장점이 있다고 얘기하고 있어요.
      저도 이번 프로젝트 어느정도 정리 되면 Sencha touch 공부 이어 나갈 생각입니다. 열심히 하자구요.

  3. 아... 지금 jQuery Mobile 로 프로젝트를 진행중이신가봐요~!
    Sencha 부분 공부하실 때...
    모르는 거 있으시면, 이야기 해주세요.
    같이 풀어 가는 재미가 있을 듯 합니다...^^
    화이팅~!~!~!
    오늘도 꾸욱...ㅎㅎㅎ