본문 바로가기

jQuery/jQueryMobile

[jQueryMobile] jQueryMobile 입력 양식

반응형






jQueryMobile의 기본 입력양식




01. 가장 기본적인 type 속성으로 textpassword를 갖는 input 태그이다.

    별도의 설정 없이도 모바일에 맞는 입력양식으로 변화하지만, data-role 속성이

    fieldcontaindiv 태그로 감싸면 입력의 형태를 자동으로 잡아줍니다.

 type_text.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Mobile</h1>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="textinput">텍스트 INPUT</label>
            <input type="text" name="textinput" id="textinput"/>
        </div>
        <div data-role="fieldcontain">
            <label for="textinput">패스워드 INPUT</label>
            <input type="password" name="passwordinput" id="passwordinput"/>
        </div>
    </div>
    <div data-role="footer">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 출력결과는 아래와같다.










jQueryMobile의 체크 입력 양식



01. type 속성이 radiocheckbox인 경우 fieldset 태그의 data-role 속성을 controlgroup으로 입력하고

   label 태그의 for 속성을 정확하게 입력하고 id 명칭과 일치 시켜야만 예쁜 형태를 형성한다.

 radio_checkbox.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Mobile</h1>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>RADIO</legend>
                <label for="radioinput_1">Radio Input</label>
                <input type="radio" name="radioinput" id="radioinput_1"/>
                <label for="radioinput_2">Radio Input</label>
                <input type="radio" name="radioinput" id="radioinput_2"/>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>CHECKBOX</legend>
                <label for="checkboxinput_1">Checkbox Input</label>
                <input type="checkbox" name="checkboxinput_1" id="checkboxinput_1"/>
                <label for="checkboxinput_2">Radio Input</label>
                <input type="checkbox" name="checkboxinput_2" id="checkboxinput_2"/>
            </fieldset>
        </div>
    </div>
    <div data-role="footer">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 코드를 실행하면 input 태그가 구성됩니다.











jQueryMobile의 select, slider, textarea 태그



01. select 태그는 option 태그를 넣으면 자동으로 완성된다.

    slider태그의 data-role에 slider를 설정하고  option 값을 설정하고 2개 이상 넘길 수 없다.

    textarea 기존의 HTML에서의 textarea와 다르지 않다.

 select_textarea.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Mobile</h1>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="select">셀렉트 Input</label>
            <select id="select">
                <option>서울</option>
                <option>대구</option>
                <option>인천</option>
                <option>광주</option>
                <option>대전</option>
                <option>울산</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="slider">셀렉트 Slider</label>
            <select name="slider" id="slider" data-role="slider">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="textarea">Textarea Input</label>
            <textarea id="textarea"></textarea>
        </div>
    </div>
    <div data-role="footer">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 출력결과는 아래와 같은 형태를 볼 수 있다. select 태그는 기본적으로 모바일 장치의 기본 선택 형태를 이용한다.









■ jQuery Mobile HTML5 입력양식 태그




01. HTML5 양식의 input 태그도 사용이 가능하다. type 속성에 rangesearch를 입력하면 그에 맞는 형태로 변환된다.

 input_html5.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Mobile</h1>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="slider">슬라이드 Input</label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
        </div>
        <div data-role="fieldcontain">
            <label for="search">서치 Input</label>
            <input type="search" name="search" id="search"/>
        </div>
    </div>
    <div data-role="footer">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 코드를 실행하면 아래 그림과 같은 형태가 된다. search 태그는 입력 앞에 돋보기가 생성되는 것 이외에도

    글자를 입력하면 자동으로 지우기 버튼이 생성된다.







반응형