jquery mobile 강좌 11 [ 목록 뷰 / listview / form 태그 적용 / 입력 폼 만들기 ] (5)

listview 마지막 시간입니다.

 

이번에는 가볍에 훑어보고 지나가도록 하겠습니다.

 

form 태그 안에 listview 를 써서 입력 태그를 배치하면 보기 좋게 정렬된 입력폼을 만들 수 있습니다.

 

listview 를 이용하여 form 태그의 내부를 정렬하거나 배치할 수 있다는 것이지 무조건 listview 를 사용해서 form 을 만들어야 한다는 것은 아닙니다.

 

 

소스먼저 보겠습니다.

<script type="text/javascript">
 function formSubmit(){
     alert($("form#sampleForm").serialize());
 }
</script>
<section id="page1" data-role="page">
    <header data-role="header"><h1>cofs header</h1></header>                   
    <div class="content" data-role="content">
        <h3>listview 입니다.</h3>
        <form id="sampleForm">
            <ul data-role="listview" data-inset="true">
                <li class="">
                    <label for="name2">Text Input:</label>
                    <input name="name2" id="name2" type="text" value="" data-clear-btn="true">
                </li>
                <li class="">
                    <label for="textarea2">Textarea:</label>
                    <textarea name="textarea2" id="textarea2" rows="8" cols="40"></textarea>
                </li>
                <li class="ui-field-contain">
                    <label for="flip2">Flip switch:</label>
                    <select name="flip2" id="flip2" data-role="slider">
                        <option value="off">Off</option>
                        <option value="on">On</option>
                    </select>
                </li>
                <li class="ui-field-contain">
                    <label for="slider2">Slider:</label>
                    <input name="slider2" id="slider2" type="range" min="0" max="100" value="0" data-highlight="true">
                </li>
                <li class="ui-field-contain">
                    <label class="select" for="select-choice-1">Choose shipping method:</label>
                    <select name="select-choice-1" id="select-choice-1">
                        <option value="standard">Standard: 7 day</option>
                        <option value="rush">Rush: 3 days</option>
                        <option value="express">Express: next day</option>
                        <option value="overnight">Overnight</option>
                    </select>
                </li>
                <li class="ui-body ui-body-b">
                    <fieldset class="ui-grid-a">
                            <div class="ui-block-a"><button class="ui-btn ui-corner-all ui-btn-a" >Cancel</button></div>
                            <div class="ui-block-b"><button class="ui-btn ui-corner-all ui-btn-a" onclick="formSubmit(); return false;">Submit</button></div>
                    </fieldset>
                </li>
            </ul>
        </form>
    </div>
    <footer data-role="footer"><h1>cofs footer</h1></footer>
</section>

 

 

먼저 form 태그를 만들고 그 안에 data-role="listview" 속성이 있는 ul 태그를 넣습니다.

 

그리고 각 li 태그에는 class="ui-field-contain" 처럼 클래스를 추가해 줍니다.

이 클래스의 역할은 li 태그 안에 있는 태그들을 묵어주어 화면의 크기에 따라 알맞게 배치해주는 역할을 합니다.

 

그리고 li 태그 안에는 label, input, textarear, select, button 등등 사용자가 입력할 수 있는 태그들을 배치합니다.

 

form 태그와 그 내부의 입력 태그들은 form 태그 강좌 시간에 자세히 다룰 것이니 이번 시간에는 이런것이 있구나 정도 보시고 넘어가면 되겠습니다.

 

 

 

결과입니다.

Submit 버튼에 javascript 로 form 의 내용을 볼 수 있는 클릭 이벤트를 걸어 두었으니 클릭해서 확인해 보시기 바랍니다.

 

ps : 마지막 팁

 

jquery 등을 사용하여 다이나믹하게 ListView 에 li (item) 등 목록을 추가할 경우가 있다.

이럴때는 javascript 에서 추가한 후 꼭

$("#ARTICLE_LIST").listview("refresh");

를 호출해야 반영된다.