Home Back

egovframework

Checked List

Checked List는 List로서의 기능과, Checkbox의 기능을 결합하여 List를 Checkbox형태로 선택할 수 있을 뿐만 아니라, 오른쪽의 버튼을 통해 특정 경로로 이동 또는 어떠한 Action을 부여하여, 현재 List의 자세한 내용 보기와 같은 기능으로 활용할 수 있을 것이다.
하지만, JqueryMobile의 기본 디자인 상 Button에 텍스트가 들어가지 않을 경우 높이가 자동 조절되어 낮아지는 문제로, 좌측의 Checkbox와 우측의 Button 의 형태를 맞추어 주지 않으면, 높이가 같아지지 않는다.
다시 말해서, Checkbox와 Button 둘 중 하나만 텍스트가 들어간 경우에는 텍스트 유무에 따라 높이가 자동조절 되므로 두 컴포넌트의 높이가 일치하지 않는다.
따라서, Checkbox와 Button 모두 어떠한 Text를 삽입하는 방법으로 높이를 맞추어 주어야 한다.

What kind of fruits do you like?
You want submit
  • <div data-role="controlgroup" class="checkList">
  • <ul data-role="listview" data-inset="true" id="group_1">
  • <li>
  • <input type="checkbox" name="checkbox-a" id="checkbox-a" value="Apple"/>
  • <label for="checkbox-a">Apple</label>
  • <div class="detailBtn"><a data-role="button" data-icon="info" data-iconpos="right" href="<c:url value="checked-detail.do"/>">View</a></div>
  • </li>
  • <li>
  • <input type="checkbox" name="checkbox-b" id="checkbox-b" value="Orange"/>
  • <label for="checkbox-b">Orange</label>
  • <div class="detailBtn"><a data-role="button" data-icon="info" data-iconpos="right" href="<c:url value="checked-detail.do"/>">View</a></div>
  • </li>
  • <li>
  • <input type="checkbox" name="checkbox-c" id="checkbox-c" value="Melon"/>
  • <label for="checkbox-c">Melon</label>
  • <div class="detailBtn"><a data-role="button" data-icon="info" data-iconpos="right" href="<c:url value="checked-detail.do"/>">View</a></div>
  • </li>
  • </ul>
  • </div>
  • <strong>You want <span id="promptOut"></span></strong>
  • <a href="javascript:checkSubmit()" data-role="button">submit</a>

Button 부분에 텍스트 없이 사용해야 할 경우에는 높이를 맞추기 위해 우측의 Button부에는 anchor tag 가운데에 공백문자인 &nbsp; 를 통해 높이를 맞출 수 있으나, 임의로 iconpos를 top, bottom 으로 지정할 경우에는 높이가 늘어나게 되어 이 경우에도 문제가 발생할 수 있다.
JqueryMobile의 기본 디자인 상의 이유들로, Checked List를 활용하기 위해서는 Checkbox와 Button에 모두 Text를 넣어야 하는 점, iconpos를 지정할 때 left, right로만 지정할 수 있는 제약사항이 있다.

공백 문자(&nbsp;)를 삽입한 예

  •  
  • <div data-role="controlgroup" class="checkList">
  • <ul data-role="listview" data-inset="true" id="group_2">
  • <li>
  • <input type="checkbox" name="checkbox-e" id="checkbox-e" value="No Text"/>
  • <label for="checkbox-e">Apple</label>
  • <div class="detailBtn"><a data-role="button" data-icon="info" data-iconpos="right" href="<c:url value="checked-detail.do"/>"> </a></div>
  • </li>
  • </ul>
  • </div>

Copyright(c)2012 Ministry of Government Administration and Home Affairs.